a soll li in der höhe ausfüllen.

[Layna]

Hallo.
*seufzt* CSS könnte so schön sein...
Ich habe eine Liste mit Links zur Navigation. Die Links füllen aber leider nicht die li-Elemente voll aus; sowohl über als auch unter dem Link ist ein Abstand zwischen rand li und rand a.

Hier das Komplette CSS, falls es an irgednwelchen nebeneffekten liegt:

/*======================
        Resets
=======================*/

html, body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, a {
	margin: 0px;
	padding: 0px;
	border: none;
	font-family: Verdana, Helvetica, Geneva, Arial;
	font-size: 1em;
}

html, body {
	height: 100%;
	background-color: #E5E5E5;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
	text-decoration: none;
}

div, ul, ol {
	position: relative;
}

/*======================
        Layout
=======================*/

#center {
	width: 700px;
	margin: auto;
	margin-top: 20px;
}


/*======================
  Navigation: Listen
=======================*/

#nav1 {
	background-color: #191769;
	display: block;
	text-align: center;
	width: 100%;
	list-style: none;
}

#nav1 li {
	display: inline;
	white-space: nowrap;
	border: 1px solid red;
}

/*======================
  Navigation: Links
=======================*/

#nav1 a, #nav1 a:link, #nav1 a:visited {
	color: #D9D9D9;
	font-weight: bold;
	font-size: 0.7em;
	text-decoration: none;
	position: relative;
}

#nav1 a:active, #nav1 a:focus, #nav1 a:hover {
	background-color: #D9D9D9;
	color: #191769;
}

Und das HTML:

<div id="center">
	<div id="head"></div>
	<ul id="nav1">
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>   
		<li><a href="#">Link 4</a></li>     
		<li><a href="#">Link 5</a></li>
	</ul>
	<ul id="nav2">  
		<li><a href="#">Unterseite 1</a></li>     
		<li><a href="#">Unterseite Nr 2</a></li>     
		<li><a href="#">die Dritte</a></li>
	</ul>
	<div id="content">  
		Hier steht content
	</div>
</div>

Die neue Hintergrundfarbe des Hover soll sich halt über die GANZE höhe erstecken.
Hoffe jemand hat 'ne idee .

Hmm... eine Lösung scheitn zu sein den Links ein padding-top: 4px; mitzugeben, nur leider geht wenn ich in eine zweite Zeile komme der Hintergrund dann zu weit; abgesehen davon: ich will diesen Abstand nicht Kaschieren, ich will ihn Kontrollieren .

Layna

 

[chainy]

Vergib dem a-Tag eine weitere Styleeigenschaft:
display: block;

 

[Layna]

Gute idee... leider erfolglos.
Reaktion der a-tags: sie verlassen das li komplett!

Btw, wo ihr gerade so nett seit zu gucken: wie bekomem ich den abstand zwischen den li-elementen weg? Da ist nämlich auch eine Lücke zwischen die ich nicht will...

 

[chainy]

display: relative; mal rausnehmen und erneut testen?!

li { padding: 0px; margin: 0px; }

 

[Layna]

*atmet tief durch, lächelt freundlich, und schießt dann in aller ruhe auf die Liste*

Erstens: auch damit kein Erfolg, position relative oder nicht.
Zweitens: die li scheren sich nicht im geringsten um das padding des links! Korrektur: der Link geht dann halt über die höhe der li hinaus, was solls....

Layna

 

[Maik]

Hi,

zeichne die Links mit der float:left-Eigenschaft aus, damit sie "Block-Level-Charakteristika" erhalten.

Wie sich eine floatende Liste im Anzeigebereich horizontal zentrieren lässt, kannst du bei Stu Nicholls erfahren -> http://www.cssplay.co.uk/menus/centered.html

 

[Layna]

Ok, bin schon näher dran... muss noch etwas verfeinert werden, aber der ansatz stimmt jetzt, danke

 

[Layna]

ALMOST there.
Leider komme ich nicht dahinter warum meines sich nicht Zentriert... finde zum Nochols-beispiel auch keinen Unterschied mehr an dem es liegen könnte, also nochmal die CSS:

/*======================
        Resets
=======================*/

html, body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, a {
	margin: 0px;
	padding: 0px;
	border: none;
	font-family: Verdana, Helvetica, Geneva, Arial;
	font-size: 1em;
}

html, body {
	height: 100%;
	background-color: #E5E5E5;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
	text-decoration: none;
}

/*======================
        Layout
=======================*/

#center {
	width: 700px;
	margin: auto;
	margin-top: 20px;
	text-align: center;
}


/*======================
  Navigation: Listen
=======================*/

#nav1 {
  width:700px;
  margin: 0 auto; 
  list-style-type:none;
  background-color: #191769;
  float: left;
}

#nav1 li { 
	float:left;
}


#nav2 {
	background-color: green;
	display: block;
	text-align: center;
	width: 100%;
	list-style: none;
	clear: both;
}

#nav2 li {
	display: inline;
	white-space: nowrap;
}


/*======================
  Navigation: Links
=======================*/

#nav1 a, #nav1 a:link, #nav1 a:visited {
	color: #D9D9D9;
	font-weight: bold;
	font-size: 0.7em;
	text-decoration: none;
	padding: 30px 7px;
	float: left;
	white-space: nowrap;
	display: block;
}

#nav1 a:active, #nav1 a:focus, #nav1 a:hover {
	background-color: #D9D9D9;
	color: #191769;
}

Tut wie gesagt alles was ich will, ausser zentrieren des Menüs.

Layna

 

[Maik]

Dann vergleiche bitte nochmal deinen Quellcode mit dem HTML- und CSS-Code für das zweite Menü #menu2, denn in deinem Menü ist die Gesamtbreite der einzelnen Menüpunkte nicht bekannt.

 

[Layna]

Einziger Unterschied außer der Farbe: float: left.
Das padding ein weiteres mal auf 0 zu setzen (passiert eigentlich ja schon ganu oben) klappt nicht, und ohne das flaot habe ich genau das gleiche Problem, mit dem Unterschied dass ich dann im Firefox auch keine Hintergrundfarbe mehr sehe.
Der einzige Unterschid zu Nichol's Menu ist also eigentlich dass meines in einem div sitzt und seines nicht... .

Layna