Using CSS in search engine optimisation (SEO)

Forum Moderators: not2easy

Message Too Old, No Replies

Using CSS in search engine optimisation (SEO)

grahamstewart

12:03 am on Apr 3, 2003 (gmt 0)

I've noticed a few threads that talk about using CSS to help with search engine optimisation (SEO).

I presume that this means you are coding up your html so that the page content comes immediately after the body tag and is then followed by all the navigation and other clutter. Like this..

[pre]<body>
 <div id="content">
   blah blah
 </div>
 <div id="navbar">
   (various links)
 </div>
 <div id="logo">
   (big picture)
 </div>
</body>
[/pre]

So how do you then layout the page as you would like to see it (i.e. logo at the top,then navbar,then content)?
Doesn't this approach force you to use absolute positioning for each of the divs?
If so then how do you avoid the page getting messed up when the user changes the size of the text?

Also, what about browsers that don't support stylesheets, or accessiblilty tools that read pages out.. won't this present the page in a slightly odd order for them?

SinclairUser

1:28 am on Apr 3, 2003 (gmt 0)

I thing absolute positioning is the only way using this method. You could mark the css as "important!" which will enforce you css layout options but will prevent the user from overriding them.

As for the other points you raise - you can please some of the browsers all of the time and all of the browsers some of the time but not all of the browsers all of the time.

Perhaps the browser manufacturers will all handle css in the same way in future ;-) - but dont hold your breath...

Chris.

grahamstewart

1:47 am on Apr 3, 2003 (gmt 0)

Hmm.. I'm not sure I want to force my users to use a particular font size. Its for a hospital site so some of them might be 'silver surfers' with the fonts cranked up large.

Plus marking the font-size as "!important" doesn't seem to stop the browser changing it (via the "View->Text Size" option in IE or the "View->Text Zoom" in NN).

SuzyUK

10:38 am on Apr 3, 2003 (gmt 0)

To expand on your original post

<body>
<div id="head"><h1>page heading</h1></head>
<div id="content">
blah blah
</div>
<div id="navbar">
(various links)
</div>
<div id="footer">text</div>
<div id="logo">
(big picture)
</div>
</body>

put the <h1> tag at the top, the SE's like this ;)

And the by putting in it's own div you can then achieve this layout using floats, and it should suit your purpose. The logo can still be absolutely positioned, if required. If your viewers crank up their font size (and you have any text in that header div)then the only part of your design liable to "break" is the "graphic" logo will look out of context (but will they mind?)..or you could put your big picture as the background to your header div and give it a fixed height to suit the height of your graphic (if no text in header). If there would be text in the header then a background image would also work (I did one that I "blended" so that as the header expands the picture will remain in the same position and will seem to fade out naturally rather that a "clean line" that absolute positioning would show..)

Suzy

re: The!important rule it will not override a users stylesheet if they also have!important set against the same attribute, and I think font-size is default setting!important in a users sheet isn't that what gives the browser the ability to "zoom" (well not IE)...