0

This question is sparked by a very frustrating problem that I find is a theme throughout my web development.

I have an example of this topic to show, in order to supplement my explanation. I have a header on my site and below that header I want a navigation bar, pretty standard. You can see this at http://www.ethoma.com/testhome.php. The header is the only img tag on the page easy to see. Here is the basic html and css structure to that portion of the page.

<div class="container" onclick="hide();">
    <div class="hhshomehead">
    <div class="logowrap">
    <center>
        <img src="/ETPbrand.gif" />
    </center>
        </div>
        <div id="homeopt">
             <ul id="homeoptlist">
             <li id="homeoptnewpost">
         <a class="homeoptanchor" href="/hhsplus_create.php">
            New Post
         </a>
         </li>
         </ul>
         </div>
    </div>
    ...... more html .....
</div>

And the CSS:

.hhshomehead
{
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;
    background-color:#ffffff;
    -moz-box-shadow: 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px #aaa;
    box-shadow: 3px 3px 3px #aaa;
    width:100%;
    border-radius:10px;
}

.hhshomebody
{
    min-height:75%;
    width:100%;
}

.logowrap
{
    display:inline;
}

.homeopt
{
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;
    width:100%;
    border-radius:10px;

}

.homeoptlist
{
    display:inline;
    list-style-type:none;
    float:left;
    margin-top:0px;
    margin-bottom:0px;
    padding-left:0px;
}

.homeoptanchor
{
    text-decoration:none;
    color:#1515b5;
    padding-bottom:3px;
    padding-top:3px;
    padding-right:3px;
    padding-left:3px;
}

.homeoptanchor:hover
{
    text-decoration:underline;
}

I know that the class and id notation doesn't fit right with the CSS and the html. I changed it to display properly in this post. If you look at the resulting code in firebug, you see that the hhshomehead class does seem to contain the logo image, but not the bar below it. I don't know if there is some critical element I am missing, because from my limited experience, if a tag has children, the tag's children should be contained by the parent tag. Thanks to anyone who takes the time to view or answer this question -- everyone here is always very helpful. (Sorry if the code isn't displaying quit right, I have only posted here once before)

thirtydot
  • 224,678
  • 48
  • 389
  • 349
Eric Thoma
  • 5,905
  • 6
  • 30
  • 40
  • 2
    I've looked at this a few times and I'm not certain of your question (or your problem). What do you mean by: 'you see that the hhshomehead class does seem to contain the logo image, but not the bar below it.' – FiveTools Jul 27 '11 at 01:31
  • 2
    This is a very confusing question I must say. Try simplifying everything you're communicating here. I think people are a bit overwhelmed by the masses of padded information. – alt Jul 27 '11 at 01:38
  • Two points of improvement that i can see: 1. remove the `
    ` tags and replace the `.logowrap` with `.logowrap{ text-align: center;}`. 2. remove the float, and both margins off the `#homeoptlist`
     – James Khoury Jul 27 '11 at 01:42

1 Answers1

1

On the site you link to the #homeoptlist list is floated, which removes it from the document flow. To have the parent div(s) expand to contain it you need to 'clear' the float, which can be done by applying a 'clearfix' to the parent element. See What methods of ‘clearfix’ can I use?

Community
  • 1
  • 1
Richard M
  • 14,244
  • 6
  • 52
  • 48
  • 1
    I didn't notice there was a link to the site because it.. wasn't a link :( tl;dr version of your answer: add `overflow: hidden` to `#homeopt`. – thirtydot Jul 27 '11 at 02:00