Sat, 2013-03-30 21:04
Hello. I am starting a site in EW4, and the header is positioned as i want it in the design mode, when I view it in a browser, it is centered. I need it to be left, and have tried changing the css every way I could. Thanks in advance. Dave
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link rel="stylesheet" type="text/css" href="main.css" /> <style type="text/css"> </style> </head> <body style="background-color: #666666"> <div id="container"> <div id="header"> <img alt="" height="175" src="images/banner_13_2.jpg" width="900" /></div> </div> <div id="menu"> </div> <div id="content"> </div> <div id="footer"> <em>Fish hard...fish with the best!</em><br /> Hindsight Sortfishing<br /> Fishing out of Rock Harbor, Orleans, Cape Cod, MA<br /> <br /> <span class="auto-style3">© Hindsight Sportfishing 2013</span><br /> <span class="auto-style3">Site desesign and SEO by</span> <a href="http://www.offshorepursuits.com">Offshore Pursuits LLC</a><br /> <span class="auto-style3">Site Map</span><br /> </div> </body> </html>
.auto-style2 { font-size: x-small; color: #C0C0C0; font-family: Verdana, Geneva, Tahoma, sans-serif; } .auto-style3 { font-size: x-small; color: #C0C0C0; } #container { padding: 0px; margin: 0px auto 0px auto; width: 900px; height: 100%; } #header { background-repeat: no-repeat; padding: 0px; margin: 0px; width: 900px; height: 175px; background-color: #666666; clear: none; margin-left: auto; margin-right: auto; } #footer { padding: 0px; margin: 0px; width: 900px; height: 125px; clear: both; background-color: #666666; text-align: center; color: #FFFFFF; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small; font-weight: bold; } .menu { float: left; width: 150px; background-color: #666666; bottom: ; } #menu { float: left; width: 150px; background-color: #666666; bottom: ; } #content { width: 680px; float: right; padding-bottom: 0; padding-left: 10px; padding-right: 35px; background-color: #666666; color: #FFFFFF; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small; } #body { font-family: Verdana, Geneva, Tahoma, sans-serif; color: #FFFFFF; }.auto-style1 { font-size: small; font-family: Verdana, Geneva, Tahoma, sans-serif; font-style: italic; } .h1 { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: medium; font-weight: bold; color: #FFFFFF; } .content a:link, a:visited, a:actve { font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; color: #FFFFFF; } .content a:hover { font-weight: bold; color: #800000; }.footer a:hover { font-weight: bold; color: #800000; } .footer a:link, a:visited, a:active { font-weight: bold; text-decoration: underline; color: #FFFFFF; } .footersmall { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: x-small; color: #C0C0C0; }
//mod edit: When posting source code, use the 'code' button above the entry area, or wrap it in bbcode tags, [code] [/code]. Fixed. ~gt
Sat, 2013-03-30 23:00
#1
But, you centered its parent,
But, you centered its parent, #container, and #header is the same width. Delete margin from #container and you should have what you want.
cheers,
gary