Positionierung

[Flemli200]

Hallo,

ich möchte gerne eine Navigationsleiste wie folgt anlegen:

Link 1 Link 3 Link 5

Link 2 Link 4 Link 6

Die Links sind wie folgt aufgebaut:

ul
li link1 /li
li link2 /li
li link3 /li
li link4 /li
li link5 /li
li link6 /li
/ul

Und ich möchte nicht mit absoluten positionen o.ä. arbeiten...
Komm da immo echt nicht weiter und sitze schon ziemlich lange daran :/

Kann mir da einer helfen?

 

[bodil]

Müssen die Links wirklich in der Reihenfolge im Quelltext stehen? Sonst würde ich sagen: mach die <li>s je 33% breit (kannst es bei einer festen Breite auch mit Px-Werten ausprobieren), display:inline-block; und dann ne einheitiche Höhe. Aber spaltenweise ...

 

[Flemli200]

naja... leider schon...
sonst könnte ich ja auch einfach die Reiehnfolge tauschen und dann von links nach rechts arbeiten und dann einfach nach x links einen umbruch machen...
Problem ist allerdings, das ich genau dieses Modell nur eben von oben nach unten haben möchte...
Also eine Fixe höhe aber keine fixe breite...
Sodass ich die links von oben nach unten anordne und dann von links nach rechts mehrere Spalten habe...

 

[baxx]

Ist mit den Formatierungsmöglichkeit die CSS für Listen bietet nicht möglich

 

[Flemli200]

und wenn ich die Liste rausnehme und alle als einzelnes Element formatiere?
Also
<div id="links">
<div class="link">link1</div>
<div class="link">link2</div>
<div class="link">link3</div>
<div class="link">link4</div>
</div>

Wäre es dann möglich?
(hab schon recht viel mit css gemacht... aber da steh ich echt vor einem Rätsel...)

 

[baxx]

Die Frage ist halt wie sich eine Liste verhält, wenn eine feste Höhe bestimmt ist. Habe gerade keine Möglichkeit das aus zu probieren. Denke eher nicht, dass die Liste dann nach rechts hin weiter geführt wird. Mit Div-Containern könnte das umsetzbar sein, denke ich. Probiere nachher mal bisschen rum.

 

[Tronjer]

und wenn ich die Liste rausnehme und alle als einzelnes Element formatiere?
Also
<div id="links">
<div class="link">link1</div>
<div class="link">link2</div>
<div class="link">link3</div>
<div class="link">link4</div>
</div>

Wäre es dann möglich?
(hab schon recht viel mit css gemacht... aber da steh ich echt vor einem Rätsel...)

Möglich ist vieles. Die Verwendung unsortierter Listen für Navigationsleisten ist zwar üblich, aber keinesfalls zwingend. Manchmal wird man vor Aufgaben gestellt, wo man von der Norm abweichen muss. Ich hatte mal ein eher ungewöhnliches Menü mit Divs und unter Verwendung von position:absolute umgesetzt.

https://developer.mozilla.org/de/demos/detail/flipping-card-navigation

Die Frage wäre allerdings, warum du die Navigationselemente unbedingt entgegen ihrer HTML-Struktur positionieren willst. Du könntest doch ebenso zwei Listen verwenden oder auch mit Absätzen oder Divs arbeiten. Letztendlich geht es doch nur um zwei Reihen mit jeweils drei gefloateten Elementen.

Wenn die Struktur so vorgegeben ist, würde ich zwei Dinge versuchen:

1) Die nachträgliche Sortierung der Listenelemente mit JavaScript
2) Die Listenelemente in das Multi-Column-Layout von CSS3 zwingen.

 

[Flemli200]

@Trojaner: super link... find die Navbar echt shcick ;)

Was meinen quellcode angeht... nun... ich kann an dem Code der die Links ausgibt nichts ändern...
es ist auf jeden Fall ein ul element mit mehreren li elementen... also ich bekomme diese Links aus einem anderen System
auf das ich keinen Einfluss habe (und da mein "Design" auch nur ein Template ist möchte ich das auch garnicht ändern...).

kann ich in diesem Fall mit folgenden ids was anfangen??
Oder muss ich mir ein anderes Design ausdenken?



#navbarContent
{}


#navbarContent ul
{}


#navbarContent li
{}


#navbarContent li a
{}

 

[bodil]

Möglicherweise ein sicherer Weg in die css-Hölle, daher auch nur rein theoretisch gefragt: Kann man die einzelnen Elemente nicht mit

li:nth-child(1) {
   ...  
}
li:nth-child(2) {
    ... 
}
⋮

und z. B. absoluter Positionierung dort auf die Seite nageln, wo man sie gerade braucht?

 

[Flemli200]

Theoretisch ja... aber da die Anzahl der Links variiert auch wieder nicht... :(

 

[bodil]

Die variiert? Das heißt, wenns neun Links gibt, stehen die in drei Reihen?