Bilder mit Untertext

[Felix Riesterer]

Liebe(r) Uups,

bitte vergiss inline-styles! Benutze Deine zentrale CSS-Datei, um dort Formate zu definieren, anstatt mit style="..." etwas lokal auf jeder Seite erneut zu gestalten. Das ist Wahnsinn, wenn man einmal das "Design" einer Seite umstellen möchte! Insbesondere verstehe ich nicht, warum Du folgendes im HTML schreibst:
<h1 style="....." align="center">....</h1>

Also: Schmeiß alle align-Attribute raus! Die haben in einem CSS-Layout nichts zu suchen!

Oder auch sehr fragwürdig:
<div id="tabunten"><br><br><br>

Also: Schmeiß alle <br>s raus! Die sind völlig brrrrrrr! Abstände werden per CSS mit margin realisiert!

Nutze die Möglichkeiten, Formate zentral zu definieren, indem Du Dein HTML sinnvoll einsetzt, und indem Du zusammenhängende HTML-Elemente sinnvoll gruppierst! Was spricht denn z.B. dagegen, Deine Bau-Elemente-Seite so auszuzeichnen?

<div id="bauelemente">  
    <h2>Bauelemente</h2> <!-- (ja, das ist keine <h3>, sondern eine <h2>!!) -->  
    <p>....</p>  
  
    <h3>Standard - Treppenpfosten</h3>  
    <p>...</p>  
  
    <h3>Standard - Treppentraillien</h3>  
    <p>...</p>  
</div>

Im CSS kannst Du dann für die auf dieser Seite verwendete Überschriften und Textabsätze die vom generellen Layout Deiner Seite abweichenden margins und paddings eintagen, indem Du über den Nachfahrenselektor auf sie zugreifst:

/* generelle Formate */  
p {  
    margin: 0;  
    padding: 0 0 5px 0;  
}  
  
h2 {  
    color: #8080ff; /* Himmelblassblau */  
}  
  
h3 {  
    border: 5px dashed #00ff00; /* Ekelgrün */  
}  
  
  
/* spezielle Formatierungen für Bauelemente-Seite */  
#bauelemente p {  
    padding: 0 90px;  
}  
  
#bauelemente h2 {  
    color: #ff0000; /* Wichtigtuerrot*/  
}  
  
#bauelemente h3 {  
    border: none;  
    background: #a0ffa0; /* Froschgrüner Hintergrund */  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.