The image below is a header I created in photoshop.

What I would like to happen is that no matter what screen resolution is used the blue bar at the top takes up exactly 50% of the page and only uses CSS but also stays within the header and is semantically correct. Could you tell me if this could be coded better? I included my stab at the css and html. Thanks so much! (Will use shorthand in the end, so please overlook that)

Here's the css I came up with:

#page{
    width: 100%;
}
.wrap{
    width: 955px;
    margin: 0 auto;
}
#header{
    width: 100%;
}
    #bar{
    width: 50%;     /* AP Div */
    height: 28px;
    background-color: #1f6d8e;
    top: 0px;
    left: 0px;
    position: absolute;
    }
    #logo{
    text-align: right;
    padding-top: 40px;
    float: left;
    padding-left: 118px;
    width: 359px;
    }
    #nav{
    width: 477px;
    float: right;
    padding-top: 18px;  
    }
    #actionnav{
    width: 359px;
    float: left;
    clear: left;
    padding-left: 118px;
    }

and the HTML:

`

    <div id="header">
        <div id="bar">&nbsp;</div>
        <div class="wrap">
            <div id="logo"><img src="images/logo_03.gif" width="359" height="30" alt="Some logo" /></div>
            <div id="nav"></div>
            <div id="actionnav"></div>
      </div>
  </div>
</div>`

alt text

1 answer

0
points

didnt have the images so couldnt see some elements but i think i fixed your problem. firebug is a very good tool to debug. The wrap div wasnt noticing the size of any of its child divs because they were all floating. you need to have a clear fix to solve this. i rearranged some divs and removed the header div because it was unneeded. Style:

.wrap{
    width: 955px;
    height:100%;
    margin: 0 auto;
    position:relative;
}
#header{
    width: 100%;
}
    #bar{
    width: 50%;     /* AP Div */
    height: 28px;
    background-color: #1f6d8e;
    top: 0px;
    left: 0px;
    position: absolute;
    }
    #logo{
    text-align: right;
    padding-top: 40px;
    float: left;
    padding-left: 118px;
    width: 359px;
    }
    #nav{
    width: 477px;
    float: right;
    padding-top: 18px;  
    }
    #actionnav{
    width: 359px;
    float: left;
    clear: left;
    padding-left: 118px;
    }
    .clearfix {
        clear:both; 
    }

HTML:

<div class="wrap">
        <div id="bar"> </div>
        <div id="logo"><img src="images/logo_03.gif" width="359" height="30" alt="Some logo" /></div>
        <div id="nav"></div>
        <div id="actionnav"></div>
        <div class="clearfix"></div>
  </div>
Answered almost 6 years ago by Stephen Cronin
  • Sounds good to me... I did add that clearfix. What I'm really wondering is if this set up is semantic? The "bar" div really throws me off because other than for aesthetics it has no meaning in the HTML... and I'm really trying to achieve semantic markup... Let me know huh? THANX for taking the time to answer! Cheers :D Wen Griffin almost 6 years ago
  • yea i believe its pretty semantic. the only other way to get a bar up there is to do it with an image which takes time to load, so this is the best solution. technically does have meaning in html although it doesnt have anything inside it. Stephen Cronin almost 6 years ago