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



## Layna (20. Februar 2008)

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 (20. Februar 2008)

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


----------



## Layna (20. Februar 2008)

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 (20. Februar 2008)

display: relative; mal rausnehmen und erneut testen?! 

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


----------



## Layna (20. Februar 2008)

*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 (20. Februar 2008)

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 (20. Februar 2008)

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


----------



## Layna (20. Februar 2008)

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 (20. Februar 2008)

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 (20. Februar 2008)

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


----------



## Maik (20. Februar 2008)

Die Gesamtbreite der einzelnen Menüpunkte ist in deinem Menü nicht bekannt, daher hilft in diesem Fall die Breitenangabe für das Listenelement auch nicht weiter.

Hier der relevante Quellcode aus Stu Nicholls' Demo für das zweite Menü mit unbekannter Breite:


```
<del class="container">
<ul id="menu2">
<li><a href="#nogo">Tab One</a></li>

<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
</del>
```


```
#menu2 {
  display:table;
  padding:0; 
  margin:0 auto; 
  list-style-type:none;
  white-space:nowrap;
  }
#menu2 li {
  display:table-cell;
  }
#menu2 a {
  width:auto;
  display:block;
  padding:4px 16px;
  color:#fff; 
  background:#08c; 
  border:1px solid #fff; 
  text-decoration:none;
  }
#menu2 a:hover {
  color:#000; 
  background:#d4d4d4;
  }

.container {clear:both; text-decoration:none;}
```


```
<!--[if lt IE 7]>
<style type="text/css">
#menu2 li {
  float:left;
  }
#menu2 a {
  float:left;
  }
.container {display:inline-block;}
</style>
<![endif]-->
```


----------



## Layna (20. Februar 2008)

Meine Breite ist ja bekannt (~700px)...
Nur, mir ist gerade aufgefallen dass sich die einzelnen li-elemente ja gar nciht zentrieren KÖNNEN, oder?
Ich kann zwar die ul in die Mitte schieben, da ich aber da ich auf float: left angewiesen bin (wegen der ausfüllung der li durch die a), kann ich die li-elemente nicht in der ul zentrieren?
Wenn ich mich da irre bitte korrigieren .


----------



## Maik (20. Februar 2008)

Die von dir gesetzte Breite für das Listenelement korrespondiert aber nicht mit der unbekannten Breite der einzelnen Menüpunkte, und hilft hier somit nicht weiter. Daher sollst du dich auch an dem empfohlenen Quellcode orientieren.


----------

