SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Blaine. WA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem adding navbar to Paul's 3 column layout

    I've created this page using Paul's famous 3 column w/header & footer layout, and tried to add a horizontal menu ( #navbar) just below the header, positioning it absolutely and using a negative margin to put it where I want it. But of course, when it looks good in Firefox, it's about 100 px too low in IE, and when I change the screen resolution, it disappears completely.
    If someone can help, you'll save what's left of my sanity. Thank you!
    rt

    The html is here
    http://www.cityofferndale.org/pd/tests/drivingtest.html

    and the CSS is here

    /* commented backslash hack v2 \*/
    html, body{height:100%;}
    /* end hack */

    body {
    padding:0;
    margin:0;
    background: #fff url(ltcol.gif) repeat-y left top;
    color: #fff;
    font-family: verdana, sans-serif; font-size: 90%; text-align: justify;
    line-height: 1.3em;
    }


    #outer{
    min-height:100%;
    margin-left:120px;
    margin-right:250px;
    background:#fff;
    margin-bottom:-52px;
    color: #000;
    }

    * html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/

    #header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:96px;
    background: #e7f1f4 url(headershort.gif) no-repeat;
    overflow:hidden;
    color: #fff;
    border-bottom: 2px solid #fff;
    }
    p.name {
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    padding-top: 76px;
    padding-left: 124px;
    letter-spacing: 2px;
    font-family: Verdana, Helvetica, Arial, sans-serif;}

    #left {
    position:relative;/*ie needs this to show float */
    width:120px;
    float:left;
    margin-left:-119px;/*must be 1px less than width otherwise won't push footer down */
    z-index:1;
    left:-1px;
    }
    * html #left {padding-bottom:52px ;margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
    #left p {padding-left:2px; padding-right:1px}
    #right p {padding-left:8px; padding-right:2px}

    #right {
    position:relative;/*ie needs this to show float */
    width:250px;
    float:right;
    margin-right:-249px;/*must be 1px less than width otherwise won't push footer down */
    left:1px;
    font-size: 85%;
    margin-top: 3em;
    line-height: 1.2em;
    text-align: left;
    border: 2px solid #5aa696;
    padding: 2em 0;}

    #right ul {width: 210px;}

    #right li {list-style-type: disc; margin: 5px 5px 5px 12px;
    padding: 3px;}
    #right img {border: 0;}

    #footer {
    width:100%;
    clear:both;
    height:50px;
    border-top:2px solid #fff;
    background-color: #5aa696;
    text-align:center;
    position:relative;
    font-size: 80%;
    color: #fff;
    padding: .8em 0;
    }
    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    #clearheader{height:96px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    * > html #clearfooter {float:left;width:100%;}/* ie mac styles */
    div,p {margin-top:0}/*clear top margin for mozilla*/
    * html #centercontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

    #centercontent {position:relative; z-index:100; padding: 2em; text-align: justify;
    margin-top: 2em;}
    /* css stuff below is just for presentation and not needed for the demo */

    h1 {font-size: 1.2em;
    font-weight: bold;
    text-align: center;}

    h2 {font-size: 1em;
    font-weight: bold;
    text-align: center;}

    #left ul {font-family: Verdana, Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 2em;
    font-size: .8em;
    font-weight: bold;
    list-style-type: none;
    background-color: #5aa696;
    padding:0;
    margin-left: 0;
    margin-top: 3em;
    width: 95%;
    }
    #left li {
    margin: 0;
    padding:0;
    line-height: 2em;
    border:1px solid #fff;
    }
    #left ul li a {
    text-decoration: none;
    display:block;
    }
    #left ul li a:link {
    color: #fff;
    }
    #left ul li a:visited {
    color: purple;
    }
    #left ul li a:hover {
    background-color: #ff9;
    color: #5aa696;
    }
    #left a:active {
    color: #fff;
    }
    #left #important {
    background-color: #fff;
    color: red;
    font-size: .8em;
    font-weight: bold;
    padding: 2px;
    border: 2px red solid;
    text-decoration: none;
    margin-top: 2em;
    width: 109px;
    text-align: center;}

    a {text-decoration: none;}


    div#navbar {
    position: absolute;
    margin-left: 123px;
    margin-top: -1476px;
    font-size: .9em;
    font-weight: bold;
    text-align: left;
    background: #5aa696;
    width: 83%;
    height: 20px;
    border-top: 2px solid #5aa696;
    padding-top: 1px;
    }

    div#navbar a:link, #navbar a:visited {
    color: #fff;
    text-decoration: none;
    border: solid #fff 1px;
    margin: 0;
    padding: 3px 17px;
    text-align: center;
    display: inline;}

    div#navbar a:hover, #navbar {
    color: #5a99af;
    background: #ff9;
    text-decoration: none;
    padding: 3px 17px;
    }


    @media all and (min-width: 0px){
    #left a:hover span {
    top:150px;
    }
    }
    #footer span {
    display:none;
    }

    html > body #minHeight{float:left; width:0px; height:100%; margin-bottom:-52px;} /*safari wrapper thanks to Tim Connor*/
    Peace.
    rt

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that you are trying to move the navbar from the bottom of the page to the top by using a massive negative margin. The page height is fluid and therefore will never be the same height. As you open and close the window the height increases and decreases accordingly as the content flows.

    You just needed to place the content absolutely 96 px from the top as follows.

    Code:
    div#navbar {
    position: absolute;
    top:96px;
    left: 0;
    font-size: .9em;
    font-weight: bold;
    text-align: center;
    background: #5aa696;
    width: 100%;
    height: 20px;
    border-top: 2px solid #5aa696;
    border-bottom: 2px solid #5aa696;
    padding:3px 0;
    white-space:nowrap;
    }
    div#navbar a {
    color: #fff;
    text-decoration: none;
    border:1px solid #fff ;
    margin: 0;
    padding: 3px 17px;
    text-align: center;
    position:relative;
    }
    div#navbar a:hover {
    color: #5a99af;
    background: #ff9;
    }
    I've changed some other bits in there as well so copy it exactly. You will also need to increase the height of the clearheder style.
    Code:
    #clearheader{height:123px;}/*needed to make room for header*/
    Hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Blaine. WA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bless you my friend! Parts of it are sinking in, but it's still a major learning process and *so* time consuming! Thank you so much for your help!
    Ronaye
    Peace.
    rt


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
  •