...

View Full Version : unable to center DIV in top of page



jasonpc1
05-18-2010, 03:15 AM
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">&nbsp;</div>


</div>

optimus203
05-18-2010, 03:22 AM
Add a width definition to the new_header div. For example - width:75%;

jasonpc1
05-18-2010, 04:56 AM
hey thanks for your input.

i tried that but this only squashed the menu to a two line menu not a single line

abduraooft
05-18-2010, 09:36 AM
i tried that but this only squashed the menu to a two line menu not a single line Can we have a link to your page?

jasonpc1
05-18-2010, 11:16 AM
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 &amp; 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">&nbsp;</div>

</div>
<!-- end of menu -->






</div>

<div id="bodypos">
<div id="imgcont"><img src="images/design.jpg" alt="" /></div>
<div id="container2010">
<!-- top -->
<div>&nbsp;</div>

</div>
<br style="line-height: 5px;" />
</div>

<br style="line-height: 10px;" />
</body>
</html>




#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;}

abduraooft
05-18-2010, 11:51 AM
It looks like you are suffering from divitis (http://csscreator.com/divitis)! :)

Anyway, set a suitable width and margin:0 auto; to that div, like

<div id="wrap">

#wrap{
width:900px;
margin:0 auto;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum