Horizontale Liste mit horizontalen Unter-Listen-Punkten
rocco
- css
Hallo,
vorab: ich habe mich reichlich bemüht sowohl hier als auch sonst im wordwideweb ne antwort zu finden, da dabei aber irgendwie nix rauskommt, gibts hier halt ein neues Thema. Sollte es dazu schon irgendeinen Thread geben, so ist er leider an mir vorbeigerauscht, ohne sich zu melden.
Nun meine Frage:
Ein Liste horizontal zu bekommen ist entweder mit display:inline oder float:left ja ziemlich einfach.
punkt1 punkt2 punkt3 punkt4
wenn ein listenpunkte allerdings noch unterpunkte enthält, die selber wiederrum horizontal ausgerichtet sind, dann müsste das so aussehen:
punkt1 punkt2 punkt3 punkt4
upunkt1 upunkt2
leider bekomme ich es aber nur so hin:
punkt1 punkt2 punkt3 punkt4
upunkt1 upunkt2
die listenpunkte der oberen zeile werde eingerückt durch die unterpunkte. wie bekomme ich es hin dass der einfach in der zeile weiterschreibt?
thx tim
Ahoi rocco,
punkt1 punkt2 punkt3 punkt4
upunkt1 upunkt2
und wie solls aussehen wenn 1/2/3 alle unterpunkte haben? dann liegen die ja übereinander, daher finde ich
punkt1 punkt2 punkt3 punkt4
upunkt1 upunkt2
oder sollen die unterpunkte nur angezeigt werden wennn gehovert wird?
MfG
hi daniel
es gibt nur einen menu-punkt mit unterpunkten, darum ist es platzmäßig egal.
etwa so:
die unterliste braucht ein position:absolute und top:10px
etwa so:
die unterliste braucht ein position:absolute und top:10px
gleich mal ausprobiert:
<style type=text/css>
#listt {
float:left;
padding: 0 0 0 5px;
}
#listb {
float:left;
padding: 0 0 0 5px;
}
#posi {
position: absolute;
top: 30px;
}
</style>
<body>
<ul>
<li id=listt>Punkt1</li>
<li id=listt>Punkt2
<ul id=posi>
<li id=listb>UPunkt2.1</li>
<li id=listb>UPunkt2.2</li>
</ul>
</li>
<li id=listt>Punkt3</li>
<li id=listt>Punkt4</li>
</ul>
</body>
ergibt aber leider:
Punkt1 Punkt2 Punkt3 Punkt4
UPunkt2.1 UPunkt2.2
ist dann nicht unter Punkt2 zu finden, dann müsste ich ja noch ein left:?px; eingeben.
problem ist nur, dass die liste selber inhalt einer tabelle ist, die sowohl horizontal als auch vertikal zentriert im fenster ist und da die absolute positionierung mir nicht weiterhilft!
Hi,
und da die absolute positionierung mir nicht weiterhilft!
wieso?
Nimm einmal das Beispiel http://de.selfhtml.org/css/layouts/anzeige/nav_geteilt.htm und ändere das CSS folgendermaßen:
ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 1.7em; left: -0.4em; width:20em; }
ul#Navigation li ul li { }
dann werden die Menüpunkte Seite 2a und Seite 2b passend positioniert - unabhängig davon, wo und wie die Liste positioniert ist.
freundliche Grüße
Ingo