PDA

View Full Version : CSS Text Shifting on page HELP!


mwood00
08-22-2012, 04:07 AM
Hello,
I am making text changes on an existing webpage that someone else built. The link to the page is: http://rockstarpasses.com/aboutus.html

I've attached text files of the source code and CSS to see all the code and highlighted the areas BLUE that relate to the text in question.

Down about halfway were is says "COO/Founder". This div originally only had the text "COO", I had to add "/Founder" and now the text is shifting to the left. The more text I add the more it shifts to the left. It looks like the right side is set to line up. I've checked the specific rule for this div and can't seem to figure out how to keep it from shifting to the left. I'm used to building using tables and CSS and div's are new to me and I'm just learning. I've searched for an answer but can't locate anything I can understand. Any help would be greatly appreciated.

Thank you!

gentleone
08-22-2012, 09:07 AM
First a little lesson in semantics. If you want headings on your page, then you should use the appropriate tags for it; the heading tag. It's better for SEO and accessibility:
http://webdesign.about.com/od/beginningtutorials/a/headings_struct.htm

Re your problem... this is because you have that heading div (.content_heading_CEO) floated to the right and gave it a very high right margin. First you don't need these properties in your situation and second they are causing your issue.
If you delete them then you will see the 'headings' will align with your text.

mwood00
08-22-2012, 07:46 PM
Thanks gentleone for the tips for CEO and your remedy for my problem.

I took out the float to the right and made it nothing and took out the right margin and made it nothing but it still looks the same. I also tried "0" in the margin but it's still the same and still shifting to the left. ??

gentleone
08-22-2012, 08:47 PM
I've selected the title and used 'inspect element' (in Chrome), so that I can play a bit with the HTML & CSS in the browser. I disabled the 'float: right' and 'margin-right: 472px' in your CSS and the title lined up nicely with your text..

mwood00
08-22-2012, 10:45 PM
Can you possibly check the webpage? I also disables the float right and the right margin but it still isn't lined up. The page is: http://rockstarpasses.com/aboutus.html

For some background info, this site was originally coded in Pakistan by hand, not Dreamweaver and now the site has been transferred to me I am opening these pages in Dreamweaver. Not sure if this may have something to do with the issue.

mwood00
08-23-2012, 01:59 AM
Ok, it's working good now, text is lined up. I think I must of had a FTP lag and the updated files weren't showing up yet. Thanks for the help gentleone!

gentleone
08-23-2012, 11:50 AM
Yes, I saw that when I was looking again to that page. Nothing had changed in the CSS. Glad it's sorted out now, but change those <div> headings to <h2> or something like that. Google will love you! ;) The CSS styles can be the same, because div tags and heading tags are both block-level elements.