Gleichgroße Buttons, Text unterschiedlich

KoRnNes · 11 Mai 2009

Hallo zusammen. Nach einem Tag rumprobieren dachte ich mir, ich frag hier mal nach. Folgende Situation ist gegeben:
Zurzeit erstelle ich eine Webseite und würde hierbei gerne die Navigation mit fünf gleichgroßen Buttons bestücken. Diese haben etwa 20px Abstand zueinander. Die Texte (Links) auf diesen sind natürlich nicht immer gleich groß. Sprich mal steht "Blog" drauf und mal "Kontakt". Die Anordnung und das meine Liste horizontal ausgegeben wird hab ich bereits geschafft, aber ich bekomme es nicht hin, das trotz Textlängenunterschiede die selbe Größe von Buttons verwendet wird. Wenn wird mir immer bei kurzen Wörtern an den Seiten was abgeschnitten und wenn ich dies dann vergrößere ist der Abstand zwischen A und B kleiner als zwischen B und C. Ich möchte nämlich nicht, dass die Buttons verkleinert werden sobald der Text kürzer ist, sondern eben gleichgroß bleiben. (Hoffe das versteht einer :???:)
Hier das Beispiel wie es aussehen soll:

So sieht mein HTML-Code aus:

<html>
<head>
<title>Kleiner Blog</title>
<link rel="stylesheet" href="../css/style.css"
type="text/css" />
</head>

<body>
<div id="navigation">
<ul>

<li id="current"><a href="#">Mein Blog</a></li>
<li><a href="#">Go For it!</a></li>
<li><a href="#">Blaaa</a></li>
<li><a href="#">Bla Bla</a></li>
<li><a href="#">Kontakt</a></li>

</ul>
</div>

</body>

</html>

Und so mein dazugehöriges CSS:

#navigation A:link
{
color: #9F0990;
text-decoration: none;
}

#navigation #current A, #navigation A:hover, #navigation A:visited
{
color: #FEFEFE;
text-decoration: none;
}

#navigation
{
margin: 1em 0 0;
padding: 0.6em 0 0;
font-size: 9pt;
font-family: sans-serif;
font-weight: bold;
}

#navigation UL, #navigation UL LI
{
list-style: none;
margin: 0;
padding: 0;
}

#navigation UL
{
padding: 5px 0;
text-align: center;
}

#navigation UL LI
{
display: inline;
}

#navigation UL LI A
{
background: url(../images/button.png) no-repeat center center;
padding: 5px 0;
}

Nur zur Info: button.png ist ein Einzelbild von einem Button.

Jemand ne Idee? :-( Ich verzweifel hier, hab schon zig Sachen ausprobiert, aber ich steh im Moment wohl auf em Schlauch.
Sorry, falls das zu kompliziert sein sollte und es niemand versteht :| Hoffe aber, dass es jemand versteht

prm · 11 Mai 2009

Definiere hier noch einen einheitlichen width-Wert, welcher dem Button entspricht.

#navigation UL LI A
{
background: url(../images/button.png) no-repeat center center;
padding: 5px 0;
width: 50px;
}

padding kannst du weglassen.
Besser zur Textzentrierung ist "line-height" entsprechend der Grafikhöhe und dann noch "text-align: center;"

Gleichgroße Buttons, Text unterschiedlich

KoRnNes

Neues Mitglied

prm

Aktives Mitglied

Neueste Beiträge