div nebeneinander und 2 mal UL untereinander wobei 1 UL nebeinander

tupa

Hallo,
könnte mir bitte jemand sagen wie man 1x Bild Links und 2 UL Listen rechts wobei 1x UL Nebeneinander und die andere UL direkt dadrunter Dargestellt werden kann ???

Beispiel

Code

<div id="header">
    <a href="xxxx"><img src="bild.png/></a>

<ul id="liste1">
        <li><a href="xxxx">Linkname1</a></li>
        <li><a href="xxxx">Linkname2</a></li>
        <li><a href="xxxx">Linkname3</a></li>
        </ul>


<ul id="liste2">
        <li>text</li>
        </ul>
    </div>

Alles anzeigen

Bild.png > soll ganz links
liste1 > soll ganz rechts nebeneinander
liste2 > soll ganz rechts unter liste1 mit einem Strich als abgrenzung

in tabelle ist es kein Problem aber wie geht sowas mit Div, UL und LI ???

Dodo

Du gibst dem Bild die CSS-Angabe "float:left;"
Je nachdem, wie breit dein Bild ist, gibst du per CSS den Listen eine Breite, sodass sie sich neben dem Bild innerhalb des Divs ausgehen.
Die Listen bekommen "float:right"
Damit sollte sich das gewünschte Ergebnis zeigen.

tupa

Hallo,
soweit teilweise habe ich es hinbekommen, wobei aber die Texte nicht unter den Links stehen sondern links daneben.

Ich habe mal ein Screenshot gemacht.
Links soll das Bild hin (Grösse steht da) und der rest soll komplett auf der rechten Seite wobei das mit dem Blauenhintergrund unter die Links soll.

Code

#ck_header  { 
background-color:#feffd5;
    }

#ck_header img  { 
float:left;
    }


#liste1  { background-color:#d7d7d7;
float:right;
    }    

#liste1 li{ list-style-type:none;
float:left;
    }    


#liste2  { background-color:#006699; color:#ffffff;


float:right;
    }    

#liste2 li{ list-style-type:none;
float:left;
    }

Alles anzeigen

Code

<div id="ck_header">
    <a href="{$index}"><img src="{$tpl_path}img/1logo.png"  /></a>

    <ul id="liste1">
    <li><a href="xxxx">Linkname1</a></li>
    <li><a href="xxxx">Linkname2</a></li>
    <li><a href="xxxx">Linkname3</a></li>
    </ul>

    <ul id="liste2">
    <li>text1</li>
    <li>text2</li>
    <li>text3</li>
    </ul>


</div>

Alles anzeigen

Dodo

Mist... Wer floatet, muss auch clearen. Per float erstellt man einen Textfluss, der wieder aufgehoben gehört. Am einfachsten geht das mit diesem Code:

Code

#liste1:after, #liste2:after {
    clear:                both;
    content:            " ";
    display:            block;
}

tupa

Hallo,
damit klappt es , aber wie bringt mn das jetzt noch den IE7 bei. Das der IE 7 auch ein umbruch macht ?

Firefix 9 und IE 9 sieht das so aus
Link1 Link2 Link3
Text

IE 7 sieht das so aus
Link1 Link2 Link3Text

Dodo

Für IE 7 kannst du noch deiner liste2 ein clear:both geben.

tupa

dank dir, jetzt pass es alles.

Tags