zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hauptnavigation mit dynamischer Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.06.2012, 00:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2008
Beiträge: 10
razzmatazz befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.06.2012, 10:00
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Link zum Problem bitte.
Schau evtl. mal in die CSS-FAQ Punkt 13.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.06.2012, 10:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2008
Beiträge: 10
razzmatazz befindet sich auf einem aufstrebenden Ast
Standard

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>
Das Problem ist nun, dass der letzte Eintrag eigentlich rechtsbündig und der erste Eintrag linksbündig sein sollte, so dass die gesamte Breite ausgenutzt wird. Und die Abstände zwischen den Elementen sollten wie gesagt immer gleich sein.

Konnte ich das einigermassen erklären? Anbei noch ein Bild, welches das Ganze visualisiert.
Angehängte Grafiken
Dateityp: png main-nav.png (5,1 KB, 10x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 07.06.2012, 10:55
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von razzmatazz Beitrag anzeigen
Konnte ich das einigermassen erklären?
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
Mit Zitat antworten
  #5 (permalink)  
Alt 07.06.2012, 11:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2008
Beiträge: 10
razzmatazz befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 07.06.2012, 11:17
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 25.07.2009
Ort: Wanne-Eickel
Beiträge: 223
TanjaP. befindet sich auf einem aufstrebenden Ast
Standard

breite gesamt 100%
jedes Element 20%
Mit Zitat antworten
  #7 (permalink)  
Alt 07.06.2012, 11:26
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von razzmatazz Beitrag anzeigen
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.
dann folge dem anderen geposteten Link, dort steht doch was du brauchst um dein Problem zu lösen.

edit. wenn die Schrift im letzten Link rechtsbündig sein soll, dann mußt das halt per CSS definieren.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 07.06.2012, 13:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2008
Beiträge: 10
razzmatazz befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 07.06.2012, 13:31
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von razzmatazz Beitrag anzeigen
Ohne JS wird so etwas wohl nicht gehen.
oh mann ist nicht dein Ernst?

Zitat:
Zitat von razzmatazz Beitrag anzeigen
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
Dann zentrier die Linktexte horizontal im Li-Element. Das umliegende Element muss dann eben breiter werden, sodass es aussieht als würden die Linktexte rechts und links anstoßen.
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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.06.2012, 13:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2008
Beiträge: 10
razzmatazz befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:59 Uhr.