Problem mit float: <ul> verschwindet

  • Hallo.
    Bei mir gibt es Probleme mit float .. schaut hierzu bitte in das angehängte bild.
    Die <ul> wird nicht angezeigt. sie scheint 0 Pixel groß zu sein!
    Aber ich verstehe das nicht! ich cleare doch sogar :/

    HTML
    [...]<nav id="secondary">    <ul id="sub-nav-phip">        <li><a>Über mich</a></li>        <li><a>Kontakt</a></li>    </ul>    <ul id="sub-nav-blog">        <li><a>Blog</a></li>        <li><a>Login</a></li>    </ul>    <ul id="sub-nav-other">        <li><a>Impressum</a></li>        <li><a>andere Projekte</a></li>    </ul>    <div style="clear:left"></div></nav>[...]


    CSS
    nav#secondary{    margin: 30px auto;    width: 896px;    background-image: url("../images/bottomShadow.png");    background-position: bottom;    background-repeat: repeat-x;}    nav#secondary ul    {        display: none; /* wird später durch JS sichtbar */        margin: 0 auto;        width: 500px;        background-color: yellow;    }    nav#secondary li    {        display: block;        width: 250px;        float: left;        height: 22px;    }    nav#secondary a    {        display: block;        color: #333;        text-align: center;        font-size: 18px;        height: 21px;        line-height: 21px;        border: 1px solid #eee;    }


    Editor und Browser zusammengeschnitten:
    html-seminar.de/woltlab/attachment/420/

  • ich habe 2 varianten gefunden:
    1. du gibst deinen ul element style="overflow:hidden"


    2. du gibst deinen ul element style="float:left"


    scheint mir beides ein hack zu sein aber es geht

  • gefloatete Elemente werden aus dem Kontext herausgenommen. Floatest du alle Elemente in einem nicht gefloateten Element, beinhaltet dieses quasi keine Elemente mehr und ist deshalb 0 hoch.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!