Jump to content

unable to center DIV in top of page

jasonc

By jasonc
in CSS Help

 Share

Recommended Posts

jasonc Advanced Member

jasonc

Posted
Posted

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
Share on other sites
jasonc Advanced Member

jasonc

Posted
  • Author
Posted

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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.