Buttons sollen nebeneinander stehen

[Cujo]

Hallo,

könnt ihr euch bitte diese Seite mal angucken:

Wer bin ich? 1-20

Als ich die Seite erstellt habe, haben die 3 Tipp-Buttons nebeneinander gestanden. Jetzt habe ich die 3 Buttons gegen andersfarbige ausgetauscht und auf einmal stehen sie untereinander

Hat einer von euch eine Idee, was da los ist?

Gruß,

Cujo

[Wishu]

Hast du die Bilder irgendwo als Blocklevel-Element deklariert? Wenn ja benötigst du noch die CSS-Eigenschaft float

EDIT:
Jup hier:

.textraetsel-gelb  img
{
margin: 0 auto;
display: block;
width: 78px;
height: 33px;
}

Einfach das display:block rausnehmen oder ein float einfügen

[Cujo]

Ja, daran lag's. Ich musste aber eine zusätzliche Klasse einfügen. Irgendwie haben sich margin: 0 auto, display: block und float:left nicht miteinander vertragen

[Cujo]

Hmmm, so ganz passt es immer noch nicht. Die gelben Buttons sind nicht auf der gleichen Höhe wie der blaue Button:



Ich weiß, es ist nicht viel, aber es stört mich trotzdem

/* Tabelle Texträtsel */

.textraetsel-weiss
{
background: white;
margin: 0 auto;
}

.textraetsel-blau
{
background: #b7cdde;
height: 12px;
font-weight: bold;
}

.textraetsel-gelb
{
text-align: left;
background: #ede9aa;
height: 50px;
font-weight: bold;
}

.textraetsel-gelb  img
{
margin: 0 auto;
width: 78px;
height: 33px;
display: block;
}

.tipps-gelb
{
text-align: left;
background: #ede9aa;
height: 50px;
font-weight: bold;
}

.tipps-gelb  img
{
margin: 0 auto;
width: 78px;
height: 33px;
}

<table style="background-color: white; margin:0 auto" border="0" cellpadding="2" cellspacing="2">
<colgroup>
    <col width="238" />
    <col width="100" />
</colgroup>
<tr>
<td class="textraetsel-blau"></td>
<td class="textraetsel-blau"></td>
</tr>
<tr>
<td class="tipps-gelb"><img onclick="alert('Ehemalige deutsche Sportlerin')" alt="Wer bin ich Tipp 1" src="../../buttons/raetsel-tipp-1.png" /><img onclick="alert('Lebt heute in den USA')" alt="Wer bin ich Tipp 2" src="../../buttons/raetsel-tipp-2.png" /><img onclick="alert('Tennis')" alt="Wer bin ich Tipp 3" src="../../buttons/raetsel-tipp-3.png" /></td>
<td class="textraetsel-gelb">
<img onclick="alert('XXXXXX')" alt="Wer bin ich Lösung" src="../../buttons/raetsel-loesung.png" /></td>
</tr> 

Könnt ihr nochmal einen Blick drauf werfen?

[Wishu]

.textraetsel-gelb
{
text-align:center;
background: #ede9aa;
height: 50px;
font-weight: bold;
}

.textraetsel-gelb  img
{
width: 78px;
height: 33px;
}

wenn du text-align:right angibst ist auch alles links. einfach auf center stellen und du sparst dir display:block; float:left; und margin:0 auto; Und du sparst dir die Zusatzklasse.

[Cujo]

Die Zusatzklasse kann ich nicht weglassen, weil ich bei den Scherzfragen ja Text habe, der linksbündig sein soll.

Ich habe es jetzt mal so gemacht:

.tipps-gelb
{
text-align:center;
background: #ede9aa;
height: 50px;
font-weight: bold;
}

.tipps-gelb  img
{
width: 78px;
height: 33px;
}

<tr>
<td class="tipps-gelb"><img onclick="alert('Ehemalige deutsche Sportlerin')" alt="Wer bin ich Tipp 1" src="../../buttons/raetsel-tipp-1.png" /><img onclick="alert('Lebt heute in den USA')" alt="Wer bin ich Tipp 2" src="../../buttons/raetsel-tipp-2.png" /><img onclick="alert('Tennis')" alt="Wer bin ich Tipp 3" src="../../buttons/raetsel-tipp-3.png" /></td>
<td class="tipps-gelb">
<img onclick="alert('XXXXX')" alt="Wer bin ich Lösung" src="../../buttons/raetsel-loesung.png" /></td>
</tr> 

Ich habe also deine Änderungen umgesetzt und außerdem dem Lösungsbutton auch die Tipps-Klasse gegeben. Jetzt sind zwar alle Buttons auf einer Höhe, aber leider nicht vertikal zentriert. Der Abstand nach oben ist kleiner als der nach unten.

Gibt es dafür auch eine Lösung?

[Wishu]

Einfach

.tipps-gelb
{
text-align:center;
background: #ede9aa;
height: 50px;
font-weight: bold;
}

gegen

.tipps-gelb
{
text-align:center;
background: #ede9aa;
padding:5px 0;
font-weight: bold;
line-height:1;
}

austauschen. Dann ist alles vertikal zentriert.

[Cujo]

Ja, das war's. Danke für die Hilfe