Schweben und Höhe

Habe ich ein div namens footerWrap, die enthält 3 ungeordnete Listen.
Ich schwebte nach Links, alle ungeordneten Listen.

Meine Absicht war es, die footerWrap in die Höhe wachsen nach der Höhe der ungeordnete Listen. Allerdings... in allen Browsern (ausser IE6) der ungeordnete Listen führen über die div... wie hatte Sie z-index atribute!

Ich versuchte, platzieren Sie ein div am Ende, mit dem klar:alle, und ich habe auch versucht zu machen, float:none auf den div#footerWrap

Dies ist mein Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dies ist meine Komplette CSS-code:

div#footerWrap
{
    height:180px;
    background-color:#5c5c5c;
    background-image:url('../../img/bgFooter.png');
    background-repeat:repeat-x;
    background-position:top;
    padding-top:20px;
    padding-left:15px;
    margin-top:20px;
}



    /* menus footer */
    div#footerWrap ul#mainMenu,
    div#footerWrap ul#myMenu,
    div#footerWrap ul#othersMenu
    {width:180px; float:left;}

        div#footerWrap ul#mainMenu li a,
        div#footerWrap ul#myMenu li a,
        div#footerWrap ul#othersMenu li a 
        {
            color:#dadada;
            text-decoration:none;
            padding:5px;
        }

            div#footerWrap ul#mainMenu li a,
            div#footerWrap ul#othersMenu li a
            {padding:5px 10px;}

            /* hover */
            div#footerWrap ul#mainMenu li a:hover,
            div#footerWrap ul#othersMenu li a:hover
            {color:#fff; background-color:#666;}


    /* menu principal */
    div#footerWrap ul#mainMenu {margin-top:-10px;}

        div#footerWrap ul#mainMenu li{line-height:24px;}       

        /* /menu principal */



        /* o meu menu*/
        div#footerWrap ul#myMenu {margin-left:15px;}

            div#footerWrap ul#myMenu li {color:#fff; line-height:22px;}

                    div#footerWrap ul#myMenu li.myMenuItem a 
                    {
                        background-image:url('../../img/smallArrow.gif');
                        background-repeat:no-repeat;
                        background-position:left 7px;
                        padding-left:15px;
                        padding-right:20px;
                    }

                        div#footerWrap ul#myMenu li.myMenuItem a:hover
                        {color:#fff; background-color:#666;}                
        /* /o meu menu */



        /* outros menu */
        div#footerWrap ul#othersMenu {margin-left:300px; width:340px;}

            div#footerWrap ul#othersMenu li 
            {
                color:#fff;
                line-height:22px;
            }

                div#footerWrap ul#othersMenu li a{margin-left:5px;}
                div#footerWrap ul#othersMenu li a span {margin-left:-5px;}

        /* /outros menu */

Und das ist mein XHTML code:

       <div id="footerWrap">

            <!-- menu principal -->
            <ul id="mainMenu">
                <li><a href="#">item</a></li>
            </ul>


            <!-- o meu menu -->
            <ul id="myMenu">
                <li>meu menu</li>
                <li class="myMenuItem slideMenuItem"><a href="#">item</a></li>
            </ul>


            <!-- outros menu -->
            <ul id="othersMenu">
                <li><span>outros</span></li>
                <li><a href="#">item</a></li>
            </ul>

        </div>
InformationsquelleAutor M. Silva | 2009-10-19
  1. 8

    Brauchen Sie nicht height: 180px; auf #footerWrap. Schwimmen der 3 ul Links ist gut, aber Sie brauchen, um Sie zu löschen.

    Hinzufügen .clear {clear:both;} zu deinem CSS.
    Hinzufügen <div class="clear"></div> vor dem schließen der #footerWrap div.

    Können Sie auch versuchen, hinzufügen von position: relative; zu #footerWrap und hinzufügen div#footerWrap ul {display: block;} zu Ihrer CSS.

    • Sie haben absolut Recht! Ich fügte hinzu, die Höhe atribute nur zum test den hintergrund, vor dem div hatte alle Elemente in es, und ich habe ganz vergessen, es zu entfernen später. Thx a lot für Eure Hilfe.
    InformationsquelleAutor
  2. -1

    Warum versuchen Sie nicht, eine Marge:

    div#footerWrap ul#mainMenu {margin-left:0}
div#footerWrap ul#myMenu {margin-left:200px}
div#footerWrap ul#othersMenu {margin-left:200px}

    Tatsächlich 180 zu sein scheint genug, aber das rendering beinhaltet auch die Polster so dass Sie brauchen eine Zahl, die größer als 180

    • Thx für die Antwort. Aber wie können die Ränder Links Hilfe der div-container in die Höhe wachsen? Ich bin nicht zu verstehen, ganz gut. Das problem ist nicht die Positionierung der ungeordnete Listen, es ist der container nicht wächst muss ich hinzufügen weitere Elemente, um die ungeordneten Listen.
    InformationsquelleAutor phunehehe
Schreibe einen Kommentar