✔ horizontale css navi macht probleme

Status
Nicht offen für weitere Antworten.
Biergamasda

Biergamasda

Erfahrenes Mitglied
Hi Leute

Ich hab mir von selfhtml die dynamische, horizontale navigation rauskopiert. :)
Jetz hab ich die eingebaut, funktioniert aber nicht so ganz wie ich mir das vorgestellt hatte..., könnte mir da vieleicht jemand verraten, was ich wie machen muss dass es funktioniert?

http://biergamasta.bi.ohost.de/jenig/

glg me
 
Du müsstest eine Gesamtbreite wählen, die ein Vielfaches von acht ist. Denn 870÷8 ergibt 108,75 – aber es gibt keine Viertel-Pixel. Mach einfach 864 oder 880 daraus.
 
Hmm, hab das jetzt gemacht, jedoch ändert sich nichts daran dass
1. das Untermenü zu weit links anfängt (im Firefox, andere noch nicht getestet)
2. der Hintergrund bzw die Breite des Untermenü's nicht stimmt

Außerdem würde ich die Breite gerne dynamisch ändern können, gibts da vl ne Möglichkeit?

glg
 
Hi,

der "Knackpunkt" ist die prozentuale Breitenangabe (12.5%) , die du derzeit für die Listenpunkte li deklariert hast.

Dass das Submenü zu weit links geöffnet wird, liegt an der negativen linken Positionsangabe für selbiges, die ihn den Original-Beispielen den gesetzten horizontalen Außenabstand zwischen den Listenpunkten ausgleichen soll, den du bei dir aber schon auf null zurückgesetzt hast.
 
OK, das mit dem margin krieg ich ja denk ich noch hin, was ich aber überhaupt nicht verstehe, ist was ich machen kann, dass die untermenüs jetzt gleich breit sind wie das Hauptmenü, und das, ohne statische breiten zu verwenden.

glg
 
Probier mal Folgendes:
Code: 
ul#Navigation,
ul#Navigation ul {
	padding: 0;
	list-style: none;
	color: #666666;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

ul#Navigation li {
	float: left;
	width: 12.5%;
	text-align: center;
	font-size: 0.8em;
}

ul#Navigation li ul li {
	float: none;
	width: 100%;
	text-align: left;
	font-size: 1em;
	margin-bottom: 0.2em;
}

ul#Navigation a {
	display: block;
	padding: 0.2em 0;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid black;
	border-left-color: white; 
	border-top-color: white;
	color: maroon; 
	background-color: #ccc;
}

ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
	border-color: white;
	border-left-color: black; 
	border-top-color: black;
	color: white; 
	background-color: gray;
}

li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
	color: maroon; 
	background-color: silver;
}

ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
	background-color: maroon;
}

/* Erweiterung zur dynamischen Ein-/Ausblendung */
ul#Navigation li ul {
	display: none;
}

ul#Navigation li:hover ul {
	display: block;
}
 
Nimm mal folgende Änderung vor:
Code: 
ul#Navigation li {
	[…]
	position: relative;
}
ul#Navigation li ul {
	[…]
	position: absolute;
	width: 100%;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück