Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    unable to center DIV in top of page

    unable to get the DIV to center in page

    Code:
    #new_header { position: relative; margin: 0 auto; padding-bottom: 5px; height:38px; background-color:#f3f3f3; background:url(images/bghead.jpg); line-height: 40px;}
    Code:
    <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>

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Add a width definition to the new_header div. For example - width:75%;
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    hey thanks for your input.

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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    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
    Code:
    <!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>
    Code:
    #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;}

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It looks like you are suffering from divitis!

    Anyway, set a suitable width and margin:0 auto; to that div, like
    Code:
    <div id="wrap">
    Code:
    #wrap{
    width:900px;
    margin:0 auto;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •