Padding

[Cujo]

Wishu hat in seinem Site-Check zurecht bemängelt, dass ich bei meiner Scherzfragenbox auf der Startseite kein padding drin habe. Der Grund dafür ist einfach, dass ich es nicht hinkriege

Im Moment sieht der Code so aus:

PHP-Code:

  if ($result === true) {
    echo $question;
    echo "<br /><img style=\"width: 77px; height: 30px;\" onclick=\"alert('$antwort');location.reload()\" alt=\"Rätsel Lösung\" src=\"buttons/raetsel-loesung-small.png\" />";
    } 


Ich habe es jetzt schon so versucht:

PHP-Code:

  if ($result === true) {
    echo $question;
    echo "<br /><img class=\"scherzfrage-zufall-rs\" onclick=\"alert('$antwort');location.reload()\" alt=\"Rätsel Lösung\" src=\"buttons/raetsel-loesung-small.png\" />";
    } 


und so:

PHP-Code:

  if ($result === true) {
    echo $question;
    echo "<br /><div class=\"scherzfrage-zufall-rs\"><img style=\"width: 77px; height: 30px;\" onclick=\"alert('$antwort');location.reload()\" alt=\"Rätsel Lösung\" src=\"buttons/raetsel-loesung-small.png\" /></div>";
    } 


CSS:

.scherzfrage-zufall-rs  img
{
padding: 5px;
width: 77px;
height: 30px;
}

Beide Varianten funktionieren allerdings nicht. Kann mir einer von euch sagen, woran das liegt?

Gruß,

Cujo

[powergold]

Hallo Cujo,

genau hier musst du padding einfügen:

<div class="menu3" style="margin: 0pt auto; float: right; background-image: url(images/bg-tag.png); width: 520px; height: 120px;">
<br/><a href="scherzfrage-des-tages.html" id="scherzfrage"><strong>Zufalls-Scherzfrage</strong></a><br/>
Welche Haare hat ein siebenjähriger, einäugiger und schwerhöriger Schäferhund?<br/><img src="buttons/raetsel-loesung-small.png" alt="Rätsel Lösung" onclick="alert('Hundehaare');location.reload()" style="width: 77px; height: 30px;"/> </div> 

Und zwar, ist der div menu3 gemeint bei dem du auch direkt per style Formatierungen vorgenommen hast. Hier musst du padding einfügen.

zB so:

<div class="menu3" style="margin: 0pt auto; padding: 0px 10px; float: right; background-image: url(images/bg-tag.png); width: 500px; height: 120px;">
<br/><a href="scherzfrage-des-tages.html" id="scherzfrage"><strong>Zufalls-Scherzfrage</strong></a><br/>
Welche Haare hat ein siebenjähriger, einäugiger und schwerhöriger Schäferhund?<br/><img src="buttons/raetsel-loesung-small.png" alt="Rätsel Lösung" onclick="alert('Hundehaare');location.reload()" style="width: 77px; height: 30px;"/> </div> 

Noch eine kleine Erklärung warum dein Versuch nicht funktioniert hat.

padding = immer Abstand nach innen
margin = immer Abstand nach aussen

Daher funktioniert padding nur bei den äusseren Elementen. (Und wie immer das ist nur die Einfachste Erklärung und nicht die genaue )

Lg
Stefan

[Cujo]

Okay, ich habe es jetzt wie folgt hingekriegt:

<div style="width:510px; height:130px; background-image:url(images/bg-tag.png)" class="scherzfrage-zufall-rs">
<br /><a id="scherzfrage" href="scherzfrage-des-tages.html"><strong>Zufalls-Scherzfrage</strong></a><br />
<? include ("scherzfrage-zufall-rs.php"); ?>
</div> 

.scherzfrage-zufall-rs
{
float: right;
margin: 0 auto;
padding: 5px;
}
.scherzfrage-zufall-rs a:link
{
color: #0178b4;
font-weight: normal;
font-family: Arial, Helvetica, Verdana;
text-decoration: none;
}

Ich habe aber noch ein Problem. Manche Scherzfragen sind einzeilig, manche zweizeilig. Wie kriege ich es jetzt hin, dass sowohl die einzeiligen als auch die zweizeiligen vertikal zentriert sind?

Ich kriege es jeweils nur in einem der beiden Fälle hin

[Wishu]

Das wirst du nicht ohne weiteres hin bekommen. Du kannst die Box höchstens mitwachsen lassen. Wenn sie immer gleich groß ist, ist das nur mit einer etwas aufwändigeren Berechnung mit PHP möglich.

Also entweder Box wachsen lassen oder den Server etwas rechnen lassen.