Navigationsleiste formatieren

[Tobias]

Hallo,
irgendwie stell ich mich zu blöd ein. Ich habe eine Navigationsleiste erstellt und möchte jetzt, dass jeder Punkt eine bestimmte Größe hat, wobei die Beschriftung etwas eingerückt sein soll und auch über und unter der Schrift noch etwas Freiraum sein soll.

Die Liste erstellen, die Anstriche verschwinden lassen, den Link auf die gesamte Breite und Höhe ausdehnen, sowie farbliche Gestaltung sind kein Problem. Nur die Texteinrückung krieg ich nicht hin.

Wie geht's richtig?

Hier ein Bsp.-Code.

Hier der html-Part:

  
<ul id="navi">  
<li><a href="#">ABC</a></li>  
<li>DEF</li>  
  
</ul>  

Und hier das CSS:

  
  
#navi {  
	list-style-type: none;  
	background:red;  
	width: 12em;  
	padding: 0;  
  
}  
  
#navi a {  
	display: block;  
	width: 100%;  
	height: 100%;  
	color: green;  
}  
  
#navi a:hover {  
	color: white;  
	background: grey;  
}  
  
  

Tschau

Tobias

[Malcolm Beck´s]

مرحبا

Nur die Texteinrückung krieg ich nicht hin.

Welche Texteinrückung? Oder besser, was verstehst du unter Texteinrückung?

Hier ein Bsp.-Code.

http://jsfiddle.net/mvZDY/

mfg

[1UnitedPower]

Nur die Texteinrückung krieg ich nicht hin.

Mit padding-left zum Beispiel.

Hier ein Bsp.-Code.

http://jsfiddle.net/mvZDY/

Überarbeitete Version

[Malcolm Beck´s]

مرحبا

http://jsfiddle.net/mvZDY/

Überarbeitete Version

Könnte aber auch <http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm@title=eines von diesen Einrückungen> gemeint sein. Oder auch etwas aus der Ecke http://de.selfhtml.org/css/eigenschaften/schrift.htm@title=Schriftformatierung. Ohne genauere Angaben ist es ein Rätselraten. Da warte ich lieber auf etwas mehr Infos.

mfg

[Tobias]

Hallo,
danke für eure Bemühungen. Nach etwas rumprobieren hab ich's noch doch rausbekommen.

Lösung war dem <a> den entsprechenden padding zu verpassen und die Breite nicht mit 100% anzugeben, sondern die Breite der Navigation abzüglich dem padding (da der ja auf die Gesamtbreite mit draufgerechnet wird).

Tschau

Tobias

[Malcolm Beck´s]

مرحبا

Lösung war dem <a> den entsprechenden padding zu verpassen und die Breite nicht mit 100% anzugeben, sondern die Breite der Navigation abzüglich dem padding (da der ja auf die Gesamtbreite mit draufgerechnet wird).

In deinem fall kannst du die Breitenangabe auch ganz weg lassen.

mfg

[Tobias]

Hallo,

In deinem fall kannst du die Breitenangabe auch ganz weg lassen.

vielen Dank für den Hinweise.

Stimmt, Blockelemente dehnen sich ja automatisch auf den ihnen zur Verfügung stehenden Platz aus.

Tschau

Tobias