SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning my navigation div

    http://berryequipment.net/berry3/
    Basically, the best thing I can say is that it works and is positioned the way it should be, in Firefox however it isn't in internet explorer. Only code I left out was the nav's hover effects.


    css
    Code:
    html {
        min-width:999px;
    }
    
    body {
        color: #2b2b2b;
        font-family: arial;
        min-width:999px;
        margin: 0px;
        padding: 0px;
        background: #f1f1f1;
    }
    
    img {
        border: 0px;
    }
    
    ul, li {
    list-style-type: none;
    display: inline;
    }
    
    a, a:visited {
    text-decoration: none;
    color: #444;
    }
    a:hover {
    text-decoration: underline;
    color: #000;
    }
    a:focus, a:hover, a:active { outline:none }
    
    #container {
    background-image: url(http://berryequipment.net/berry3/images/layout/headerbg.jpg);
    background-repeat: repeat-x;
    text-align: center;
        width: 100%;
    }
    
    #main_container {
        position: relative;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 950px;
    }
    
    #header {
    text-align: left;
    width: 950px;
    height: 118px;
    background-image: url(http://berryequipment.net/berry3/images/layout/topbg.jpg);
    }
    
    #logo {
    float: left;
    width: 285px;
    height: 106px;
    background-image: url(http://berryequipment.net/berry3/images/layout/logo.jpg);
    }
    
    #main_nav {
    padding-bottom: 10px;
    position: absolute; bottom: 0px; left: 321px;
    text-transform:uppercase;
    font-family: helvetica, arial;
    font-size: 12px;
    text-align: left;
    color: #FFF;
    }
    index
    Code:
    <?php
        session_start();
        header("Cache-control: private");
    
    
    
    
    
    
    
    
    
    
    
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
    
    <title></title>
    <link href="styles/main.css" rel="stylesheet" type="text/css" title="default">
    
    </head>
    <body>
    
    
    <div id="container">
    <div id="main_container">
    <div id="header">
    <div id="logo"></div>
    <div id="main_nav">
    
    	<ul>
    	<li><a href="#">Engineering</a></li>
    	<li><a href="#">Fabrication</a></li>
    	<li><a href="#">Parts</a></li>
    	<li><a href="#">Service</a></li>
    	<li class="selected">Equipment</li>
    	<li><a href="#">Contact</a></li>
    	</ul>
    
    </div>
    <div id="account_nav">
    
    	my account<br />
    	videos<br />
    	technical manuals<br />
    	shopping cart (0)<br />
    	logout
    
    </div>
    </div>
    
    
    
    
    <div id="body">
    test
    </div>
    </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hm, looks fine in IE9 to me. Which menu is not working for you?

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Currently looking at it in IE7

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by aebstract View Post
    Currently looking at it in IE7
    Important info.

    What happens if you add this to the CSS?

    Code:
    #main_nav ul {margin: 0;}

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't do anything, and I noticed something else strange is if I add an image to the body div, which I currently have up if you want to look, the nav shifts down to somewhere behind the image.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Ah, you need position:relative on the #header div, as that is the context for the position: absolute on the nav.

    Code:
    #header {
      background-image: url("http://berryequipment.net/berry3/images/layout/topbg.jpg");
      height: 118px;
      text-align: left;
      width: 950px;
      position: relative;
    }

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanks, I really though I had already set that to relative


Bookmarks

Posting Permissions

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