Suche lösung für Menü

[Zenda]

Hallo,

wie kann ich einen <a> tag eine bestimmte fesgelegte breite geben?
Ich möchte einfach nur das die background-farbe sich nicht an die länge des textes hält sondern immer eine bestimmte breite hat z.B 150px oder sowas und auch dann die Hintergrundfarbe farbe halt über diese breite geht. Mit Padding oder Margin geht das nicht.
Kann mir jemand helfen?

[tinu]

Hi!

Am besten packst Dein gesamtes menü in eine <div> und definierst dessen a tags in CSS. Beispiel:

#menu{
color:black;
background:#1f66f1;
padding:10px;
width:200px;
height:400px;
}

#menu a{
color:black;
font:bold 11px verdana, sans-serif;
margin:5px 0 5px 0;
padding:1px 3px 1px 4px;
text-decoration:none;
background:#f1f1ff ;
display:block;
width:150px; <--- Deine gewünschte Breite der a tags
}

Und im HTML-Dokument kannst das ganze ja nach Deinen Wünschen gestalten. Als Beispiel mal in ner vertikalen Darstellung:

<div id="menu">
 <ul><li><a href="seite1.html">Seite 1</a></li>
<li><a href="seite2.html">Seite 2</a></li>
<li><a href="seite3.html">Seite 3</a></li>
<li><a href="seite4.html">Seite 4</a></li>
</ul>
</div>

gruss
tinu

[OhneName]

Hallo,

#menu{
color:black;
background:#1f66f1;
padding:10px;
width:200px;
height:400px;
}

#menu a{
color:black;
font:bold 11px verdana, sans-serif;

11px sind aber ein wenig arg klein, dann lieber gar keine Größenangabe als so eine unleserliche Schriftgröße.

margin:5px 0 5px 0;

kann man einfacher als margin:5px 0; schreiben

padding:1px 3px 1px 4px;
text-decoration:none;
background:#f1f1ff ;
display:block;

das hier ist der einzige entscheidende Punkt. <a> ist standardmäßig ein Inlineelement und kann deshalb keine feste Breite haben. Mit display:block wird <a> zu einem Blockelement und nimmt die gewünschte Formatierung an.

width:150px; <--- Deine gewünschte Breite der a tags
}

<ul id="menu">

<li><a href="seite1.html">Seite 1</a></li>
<li><a href="seite2.html">Seite 2</a></li>
<li><a href="seite3.html">Seite 3</a></li>
<li><a href="seite4.html">Seite 4</a></li>

</ul>

Das <div> ist hier völlig unnötig. Du kannst die ID direkt dem <ul>-Element geben und von da aus die Links formatieren.

Gruss,
OhneName

[tinu]

War ja nur ein Beispiel. An der Formatierung soll er ruhig mal selber basteln. Aber geb Dir ansonsten in allen Punkten recht. Das mitm <div> war nur so weil die Aufzählung erst am Schluss eingefügt habe.

Aber joa... der Namenlose hat mit allem recht ;)
tinu