jasonc Posted May 18, 2010 Share Posted May 18, 2010 unable to get the DIV to center in page #new_header { position: relative; margin: 0 auto; padding-bottom: 5px; height:38px; background-color:#f3f3f3; background:url(images/bghead.jpg); line-height: 40px;} <div id="new_header"> <div style="float: left; width: 68px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="" class="tmenu">HOME</a></div> </div> <div style="float: left; width: 91px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="" class="tmenu">ABOUT US</a></div> </div> <div style="float: left; width: 112px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="" class="tmenu">OUR SERVICES</a></div> </div> <div style="float: left; width: 157px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="" class="tmenu">VIP & Business Class</a></div> </div> <div style="float: left; width: 90px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="" class="tmenu">VEHICLES</a></div> </div> <div style="float: left; width: 120px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="" class="tmenu">BOOKING FORM</a></div> </div> <div style="float: left; width: 95px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="" class="tmenu">QUOTE ME</a></div> </div> <div style="float: left; width: 90px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="" class="tmenu">MOBILITY</a></div> </div> <div style="float: left; width: 105px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="" class="tmenu">CONTACT US</a></div> </div> <div style="float: left; width: 100px;"> <div><a href=""><img src="images/logo1.jpg" width="74" height="35" border="1" /></a></div> </div> <div style="line-height: 20px"> </div> </div> Link to comment https://forums.phpfreaks.com/topic/202112-unable-to-center-div-in-top-of-page/ Share on other sites More sharing options...
haku Posted May 18, 2010 Share Posted May 18, 2010 You can't center relatively positioned elements using margin auto. Link to comment https://forums.phpfreaks.com/topic/202112-unable-to-center-div-in-top-of-page/#findComment-1059895 Share on other sites More sharing options...
jasonc Posted May 18, 2010 Author Share Posted May 18, 2010 here is what code i have, the header does not have to be relative or anything and removing the relative part from the css did not center the divs <!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>Welcome</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="align: center;"> <!-- menu --> <div id="new_header"> <div style="float: left; width: 68px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="index.html" class="tmenu">HOME</a></div> </div> <div style="float: left; width: 91px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="?ac=a" class="tmenu">ABOUT US</a></div> </div> <div style="float: left; width: 112px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="?ac=s" class="tmenu">OUR SERVICES</a></div> </div> <div style="float: left; width: 157px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="?ac=vip" class="tmenu">VIP & Business Class</a></div> </div> <div style="float: left; width: 90px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="?ac=veh" class="tmenu">VEHICLES</a></div> </div> <div style="float: left; width: 120px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="?ac=bf" class="tmenu">BOOKING FORM</a></div> </div> <div style="float: left; width: 95px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="?ac=qm" class="tmenu">QUOTE ME</a></div> </div> <div style="float: left; width: 90px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="?ac=m" class="tmenu">MOBILITY</a></div> </div> <div style="float: left; width: 105px;"> <div style="background: url(images/menubg-2010.jpg) no-repeat center right;"><a href="?ac=c" class="tmenu">CONTACT US</a></div> </div> <div style="float: left; width: 100px;"> <div><a href="booking.php"><img src="images/logo1.jpg" width="74" height="35" border="1" alt="" /></a></div> </div> <div style="line-height: 20px"> </div> </div> <!-- end of menu --> </div> <div id="bodypos"> <div id="imgcont"><img src="images/design.jpg" alt="" /></div> <div id="container2010"> <!-- top --> <div> </div> </div> <br style="line-height: 5px;" /> </div> <br style="line-height: 10px;" /> </body> </html> CSS file #container2010 { background-color:#ecedee; width:0 auto; background-image:url(images/containerbg2010.jpg); background-repeat: repeat-y; padding: 0 20px 0 30px; } .footer { font-family:Arial, Helvetica, sans-serif; background-color:#4F4F4F; } .footer a { color:#000000; text-decoration:none; } .footer h2 { text-align:center; padding: 0px; font-size:11pt; color:#FFFFFF; } .footer h3 { text-align:center; padding: 0px; font-size:11pt; color:#000000; } .footer h4 { text-align:center; padding: 0px; font-size:10pt; color: #000000; } .copyright2010 { text-align: center; background-color:#4F4F4F; color: #FFFFFF; font-size:8pt; line-height: 30px; } .more { display: none; } a.showLink, a.hideLink { text-decoration: none; color: #36f; padding-left: 8px; background: transparent url(down.gif) no-repeat left; } a.hideLink { background: transparent url(up.gif) no-repeat left; } a.showLink:hover, a.hideLink:hover { border-bottom: 1px dotted #36f; } .floatright { float: right; } .floatleft { float: left; } .p bookingform_headings { font-family:Arial, Helvetica, sans-serif; font-size: 12pt; line-height: 14px; } .qmstyle1 { color: #FFFFFF; } .qmstyle2 { font-family:Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #FFFFFF; } .mstyle1 { font-family: "Trajan Pro" } .mstyle2 { font-size: 14px } .vehstyle1 { font-family: "Trajan Pro" } .vehstyle2 { font-size: 14px } .vipimgleft { float: left; margin: 0; padding-right: 35px; } .vipimgright { float: right; margin: 0; padding-right: 35px; } #new_header { margin: 0 auto; padding-bottom: 5px; height:38px; background-color:#f3f3f3; background:url(images/bghead.jpg); line-height: 40px; width: 100%; } @charset "utf-8"; /* CSS Document */ body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color:white; background-image:url(images/gray.jpg); background-repeat:repeat-x; } .tmenu:visited { FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY:Arial, Helvetica, sans-serif; TEXT-DECORATION:none; font-weight: bold; } .tmenu:hover { FONT-SIZE:12px; COLOR:#7ed1fc !important; FONT-FAMILY:Arial, Helvetica, sans-serif; TEXT-DECORATION: blink !important; font-weight: bold; } .tmenu:link { FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION:none; font-weight: bold; } #bodypos {position: relative; margin: 0 auto; height: 100%; width: 775px; } #header { position: relative; margin: 0 auto; padding-bottom: 5px; width:1200px; height:38px; background-color:#f3f3f3; background:url(images/bghead.jpg); } #imgcont { width:775px; height:234px;} #container { background-color:#ecedee; width:775px; height:910px; background-image:url(images/containerbg.jpg);} #textcont { padding-top:5px; height:710px; width:560px; float:left; margin-left:15px; margin-top:20px; } .nohead { font-family:Arial, Helvetica, sans-serif; font-size:25px; color:#c70c16; font-weight:bold; } .texthead { font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold; color:#000000; } .textdeco { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000;} .txtlink { color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:12px; } .texthead2 { font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#000000; } .red { color:#FF0000;} Link to comment https://forums.phpfreaks.com/topic/202112-unable-to-center-div-in-top-of-page/#findComment-1059948 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.