|
|||
Hauptnavigation mit dynamischer Breite
Hallo zusammen
Ich habe folgendes Problem: Ich habe eine Hauptnavigation, welche 5 Punkte beinhaltet. Umgesetzt wird das Ganze natürlich mit einer unsortierten Liste. Nun sollte sich die Liste immer über die ganze verfügbare Breite ausbreiten, wobei die Breiten der einzelnen Listenelemente unbekannt sind. Die Abstände zwischen den einzelnen Listenelementen sollten dabei immer gleich gross sein. Wie kann man so etwas realisieren (ohne JS)? Ich habe mir bislang die Zähne ausgebissen und finde einfach keine Lösung... Weiss hier vielleicht jemand Rat? Tausend Dank im Voraus! Razzmatazz |
Sponsored Links |
|
||||
Link zum Problem bitte.
Schau evtl. mal in die CSS-FAQ Punkt 13.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
Sponsored Links |
|
|||
Hi Hubspe
Danke für deine Antwort. Mit einem Link kann ich leider nicht dienen (müsste ich erst hochladen, FTP ist jedoch gesperrt hier in meinem Office). Aber ich habe ein kurzes Beispiel erstellt, hier der Quellcode: Code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Hauptnavigation mit dynamischer Breite</title> <style type="text/css"> * { margin: 0; padding: 0; } body { margin: 0 auto; padding-top: 20px; width: 900px; } nav ul { border: 1px solid #333; display: table; list-style: none; width: 100%; } nav ul li { display: table-cell; } </style> </head> <body> <header> <nav> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </nav> </header> </body> </html> Konnte ich das einigermassen erklären? Anbei noch ein Bild, welches das Ganze visualisiert. |
|
||||
ja, deswegen bau das Beispiel aus der FAQ nach, daraus solltest du für dich eine Lösung ableiten können. Hier ist noch ein anderes Beispiel.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Leider nicht wirklich... Die Navigation muss sich über eine bestimmte Breite ausstrecken, sagen wir mal 1000 Pixel. Mit der Lösung aus der FAQ erhalte ich dann einfach fünf Listenelemente wobei jedes Element 200 Pixel breit ist (sofern immer der gleiche Text im <li> enthalten ist). Das letzte Element ist innerhalb der 200 Pixel links ausgerichtet, und genau das möchte ich aber nicht.
|
|
|||
breite gesamt 100%
jedes Element 20% |
|
|||
Leider kann auch der zweite Link mein Problem nicht lösen. Klar könnte ich das letzte Listenelement per CSS als rechtsbündig definieren, aber dann wäre der Abstand zwischen dem vierten und fünften Element viel grösser als die restlichen.
Gehen wir von einem 1000 Pixel breiten Div aus. Über diese Breite soll sich die Navigation erstrecken. Die Navigation enthält fünf Elemente. Gehen wir bei den Elementen mal von folgenden (flexiblen) Breiten aus: Home (100px) Angebot (120px) Strategie (150px) Arbeiten (150px) Unternehmen (200px) Das wären dann zusammen 720 Pixel. Bleiben also 280 Pixel. Und diese 280 Pixel sollten nun die Abstände zwischen den Elementen darstellen. Bei fünf Elementen wären das vier Abstände, also 70 Pixel pro Abstand. Auf diese Weise wäre sichergestellt, dass das erste Listenelement ganz links und das fünfte Listenelement ganz rechts anschlägt. Ohne JS wird so etwas wohl nicht gehen. Die geposteten Beispiele funktionieren leider nur, wenn die einzelnen Elemente entweder linksbündig oder mittig ausgerichtet sind. Aber für meinen speziellen Fall funktionieren sie leider nicht |
|
||||
oh mann ist nicht dein Ernst?
Zitat:
Die Container die schmaler sein sollen, bekommen einfach mehr padding z.B., entspr. Hg-Grafiken werden kleiner gemacht, sodass es aussieht als würden die Linktexte rechts und links anstoßen. Vor allem poste einen Link zum Problem, so kann man doch nur raten. Freehoster gibt es genug. Bau einen Testcase der es zeigt und lad ihn hoch, etc. Das FTP gesperrt ist, scheint mir nur eine schwache Ausrede zu sein. Dann mach den Testcase privat, wo du hochladen kannst.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
Sponsored Links |
|
|||
Die Linktexte zu zentrieren möchte ich vermeiden. Das sieht dann in jedem Browser wieder n'bisschen anders aus und bis da alles pixelgenau passt... Und das Ganze sollte ja auch responsive sein, dadurch würden sich dann alle Pixel-Schiebereien vervielfachen.
Ich würde ja gerne einen Testcase hochladen, aber ich arbeite bei einer Bank und da herrschen nunmal sehr strikte Richtlinien. Ich bin ja nur schon froh, dass ich Zugriff auf dieses Forum habe. Ich werde aber gerne den entsprechenden Testcase bauen und diesen dann von daheim aus hochladen. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
2 Spaltenlayout div/float mit fester und dynamischer Breite möglich? | Anotherone | CSS | 1 | 14.02.2007 14:44 |
Problem mit dynamischer breite | falken0077 | CSS | 5 | 09.01.2007 21:30 |
3 Spalten zentriert, mittlere mit dynamischer Breite | wima | CSS | 1 | 05.05.2006 11:49 |
Gleiche Breite der Navigationspunkt im horizontalen Menü | letslounge | CSS | 2 | 07.03.2006 01:38 |
3 Spalten | Aussen: variable Breite; Mitte: feste Breite | dreamshocker | CSS | 9 | 17.08.2005 17:23 |