Width-Fehler

[Flitztuete95]

Hallo liebe Community,
erstmal: ich bin neu hier, und vll. wurde diese Frage schon ein Paarmal gestellt. Ich habe ein Problem mit der width/min-width eigenschaft.
Website: http://flitztuete95.fl.ohost.de/TestWeb/index.htm
Hier der

body {
background-color: #808080;
font-family: arial, verdana;
}

span {
position: absolute;
left: 10%;
width: 80%;
background-color: #8080FF;
padding: 15px;
}

span a:link {
width: 23%;
height: 32px;
min-width: 128px;
min-height: 32px;
max-width: 128px;
max-height: 32px;
background-image: url(img/01.png);
color: #FFFFFF;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
}

span a:hover {
width: 23%;
height: 32px;
background-image: url(img/02.png);
color: #000000;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
}

a.normal {
}

Zur Erklärung: eigentlich sollten die Buttons oben immer 23% des Span-Tags einehmen, komischerweise wird das komplett ignoriert (IE 7 und Firefox). Vll. Könnt ihr mir helfen...

 

[csstester]

naja wenn du max-width auch mit 128px angibst kann das ja nix werden;)

 

[Flitztuete95]

Es wird trotzdem nicht richtig angezeigt.

 

[neuroleptika]

min-width: 128px;
max-width:128px;

liefert natürlich das selbe Ergebnis wie

width: 128px;

wenn das Element 23% vom Elternelement einnehmen soll, lasse die anderen Angaben doch einfach weg.

 

[Flitztuete95]

Ich poste mal den aktuellen

body {
background-color: #808080;
font-family: arial, verdana;
}
span {
position: absolute;
left: 10%;
width: 80%;
background-color: #8080FF;
padding: 15px;
}
/* Normaler link wird via klasse .normal defieniert!*/
span a:link {
width: 23%;
height: 32px;
min-height: 32px;
max-height: 32px;
background-image: url(img/01.png);
color: #FFFFFF;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
}
span a:hover {
width: 23%;
height: 32px;
background-image: url(img/02.png);
color: #000000;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
}

Es besteht kein unterschied zum voherigen ergebnis...

 

[neuroleptika]

<a> und <span> sind beides Inline-Eelmente.
Inline-Elemente sind immer so breit wie ihr Inhalt.
Wenn du ihnen eine Breite zuweisen möchtest, musst du ihnen diplay: block geben. Damit verhalten sie sich wie Blockelemente und reagieren auf width bzw. height.
Allerdings erzeugen sie damit auch einen Zeilenumbruch.
Um sie wieder nebeneinander zu bekommen musst du float einsetzen:

span a:link {
display: block;
float:left;
width:....
usw.

Das ist doppelt gemoppelt:

height: 32px;
min-height: 32px;
max-height: 32px;

min-height und max-height kannst du weglassen.



Solche Link-Aufzählungen gehören eigentlich in eine Liste:

<ul>
<li><a href="XXYc">Test</a></li>
<li><a href="XXYc">Test</a></li>
</ul>

 

[Flitztuete95]

Solche Link-Aufzählungen gehören eigentlich in eine Liste:

<ul>
<li><a href="XXYc">Test</a></li>
<li><a href="XXYc">Test</a></li>
</ul>

Danke, du hat mir geholfen ;)
Das oben muss ich mir noch angewöhnen...