Hi all, How do i use css to put a header div on top but centered?? code so far <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #wrap { width: 750px; } #content{ } #header { top:0px; position:absolute; } #footer { } </style> </head> <body> <div id="wrap" align="center"> <div id="content">CONTENT</div> <div id="header">HEADER</div> <div id="footer">FOOTER</div> </div> </body> </html> Code (markup): Now my header is top left and it looks like #wrap isn't the parent div anymore????
now i changed the css part #wrap { width: 750px; background-color:#00CC00; margin:auto; } #content{ margin-top: 30px; /*need to know the height of div header*/ } #header { top:0px; position:absolute; width: 750px; } #footer { } Code (markup): But in IE it looks off center
#wrap { width: 750px; background-color:#00CC00; margin: 0 auto; } #content {} #header {} ============= <div id="wrap"> <div id="header">HEADER</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </div> Code (markup): cheers, gary
hi gary, That's not what I am after. For Search Engine Optimization it would be better to have my unique content first in the source and the header which stays the same on the bottom of the source code.
does it offer THAT MUCH of an advantage? i can understand the content ahead of the sidebar, but the content ahead of the header, i dunno if it's worth hacking together just for that.
dude, if you follow the logical structure of a document you'll have: header, content, footer. if in that header you use <h1>, than why would you put content first? and even if you don't use H's, if you have a good page structure you don't need to bother with this. good luck
Not if your header is used properly to introduce the page. If you just must, #wrap { position: relative; /*sets positional reference for modern browsers*/ width: 750px; /*sets hasLayout for IE*/ margin: 0 auto; } #content { margin-top: nnpx; /*equals height of header*/ } #header { left: 0; top:0; position:absolute; } #footer {} =============== <body> <div id="wrap" align="center"> <div id="content">CONTENT</div> <div id="header">HEADER</div> <div id="footer">FOOTER</div> </div> Code (markup): cheers, gary
hi gary, your solution still doesn't work in IE. You are properly right but in my case the header just holds an image and a navigation menu.
make a new div with absolute layout, 0px from top, centered position through auto margin and text-align: center. then insert that div anywhere you want in your html code. Cheers
Define "doesn't work". The code I gave you does, indeed, work. Do you have syntax errors, or have you triggered quirks mode in IE? Give us a link. gary