Zur Navigation

Breite der li gleich machen

1 trudi

[Edit Jörg: folgende Beiträge aus diesem Thread abgetrennt, die Frage bezieht sich auf diese Seite]

ciao jörg,

hab jetzt doch noch eine frage:
beim hauptnavi menu, sind die farbige box ja nach länge der name verschieden. gibt es wie line-height auch einen befehlt dass die breite der li alle gleich macht?

danke saluti katia

16.04.2008 09:02 | geändert von Jörg: 16.04.2008 10:14

2 Jörg Kruse

Normalerweise mit width - aber da du die Listenpunkte mit "display:inline;" zu Inline-Elementen gemacht hast, wird das so wohl nicht funktionieren. Inline-Elemente nehmen immer die Breite ihres Inhaltes an

Wenn du die Listenpunkte alternativ als Blockelemente belässt und sie stattdessen mit float:left nebeneinander positionierst, kannst du ihnen auch eine Breite zuweisen

16.04.2008 10:11

3 trudi

wenn ich sie also als blockelemente mache:

#hauptnavi {
	margin: 0px;
	width:473px;
	height: 38px;
	background:#99ABCD;
	border-top:1px solid #99ABCD;
	border-bottom:1px solid #DF2111;
}

#rot {background-color:#FC284C;
	}
	
#orange {background-color:#FCA044;
	}
	
#gelb {background-color:#FFFF00;
	}
#grün {background-color:#00CC00;
	}
#blau {background-color:#0000FF;
	}

#hauptnavi ul {
margin:0 40px;
padding:0;
}


#hauptnavi li {
	display:block;
	float:left;
	padding: 10px 0;
        margin:0 px;
	border-right:2px solid #DF2111;
	font-size:12px;
	line-height: 38px;
	width: 70px;
}

#hauptnavi li a:link, #hauptnavi li a:visited  {
	display:block;
	text-decoration:none;
	color:#3C0763;
	line-height: 38px;
	width: 70px;
	padding: 10px;

}

#hauptnavi li a:hover {
	display:block;
	text-decoration:none;
	background-color:#D8E5E7;
	padding: 10px;
	line-height: 38px;
	width: 70px;
	margin:0px;	
}

und eine width angebe (oder soll man line_widht angeben?) werden die navi elemente schon alle gleich breit aber in der höhe (height) stimmen sie nicht mehr sonder viel zu hoch??

siehst du was falches?

saluti trudi

16.04.2008 10:25

4 Jörg Kruse

Hattest du die padding Werte für "#hauptnavi li", "#hauptnavi li a:link, #hauptnavi li a:visited" und "#hauptnavi li a:hover" vorher auch schon so? Bei display:inline wurden sie möglicherweise gar nicht berücksichtigt, jetzt aber schon. Ich würde die vertikalen padding Werte einfach mal testweise runtersetzen

16.04.2008 10:37

5 trudi

ciao jörg, ja du hast recht , die padding angaben brauche ich nicht, und jetzt ist es gut. vielen vielen dank für deine hilfe, super

grazie mille e saluti trudi

16.04.2008 11:03

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]