alex1234 hat geschrieben:Bei der rechten Box "Partner" bekomm ich das Partner nich in die Mitte...ich habe es wie oben beschrieben in eine Tabelle gepackt....funktioniert aber irgendwie nicht.
Tabelle hat da nix zu suchen. Wenn dir einer eine Tabelle für Layoutmaßnahmen andrehen will, ist er verzweifelt - das bedeutet aber nicht, dass es nicht anders ginge :)
Wie schon geschrieben, zentrierst du die Inhalte eines Elements horizontal mit text-align, sowie vertikal mit vertical-align, wobei sich die Zentrierung immer auf die Zeilenhöhe line-height bezieht, nicht auf das gesamte Element.
Ersetze
Code: Alles auswählen
<div style="background:url(templates/fisubsm_blue/images/cellpic1.gif) repeat-x; height: 28px; width: 100px;">
<table>
<tr>
<td align="center" valign="middle" width="100px">Partner</td>
</tr>
</table>
</div>
durch
Code: Alles auswählen
h2 {
background:url(templates/fisubsm_blue/images/cellpic1.gif) repeat-x center;
margin:0;
padding:0;
font-size:1em;
line-height:2em;
vertical-align:middle;
text-align:center;
}
<h2> statt <div> benutze ich, weil das zweifelsohne eine Überschrift sein soll, also gehört da auch ein Überschriftselement hin. Ob das nun <h2>, <h3> oder sonst ein h wird, hängt nur von der inhaltlichen Struktur deiner Seite ab. Hauptsache kein <div>, gleicher Grund wie schon bei der Menüliste.
Obendrein hast du ja nicht nur diese eine, derartig aussehende Überschrift, sondern mindestens drei. Auch "Übersicht" und "Portal für erneuerbare Energie" gehören in <h2>. Sie sind dann inhaltlich korrekt ausgezeichnet und du hast die Formatierungen für diese Art Überschriften an einem zentralen Platz gelagert, der schnell anzusprechen ist (<h2> statt <div class="zweite_ueberschrift">).
<div>s benutzen solltest du allerdings um diese drei Bereiche herum. div#partner und div#inhalt hast du ja schon, ein div#uebersicht fehlt dir noch. Diese <div>-Gruppierungen helfen bei der Gestaltung.
Die Breitenangabe für das Überschriftselement ist überflüssig; du hast bereits dem umgebenden Kasten div#partner eine Breite gegeben, alle Blockelemente sind von Haus aus so breit wie ihr Elternelement.
Bei background ist dir vielleicht aufgefallen, dass dort zusätzlich "center" steht. Erhöhe mal probehalber line-height auf zB 100px, die Hintergrundgrafik wird dank
background(-position):center trotzdem exakt in der Mitte der Schrift zu liegen kommen.
Du kannst dir dies zu Nutze machen, indem du die Grafik höher machst als im Normalfall nötig. Einerseits fällt das nicht auf, weil Hintergründe immer am Elementrand abgeschnitten werden, andererseits würde die Grafik dann auch immer noch passen, falls jemand eine größere Schrifthöhe eingestellt hat.
Aus diesem Grunde habe ich bei line-height auch die Maßeinheit em benutzt. Sie ist eine relative Einheit, die sich letztlich auf die vom Benutzer gewählte Schriftgröße bezieht; in diesem Fall passt sie besser als px.
Die 0.9em bei <body> solltest du hingegen weglassen - der Benutzer hat (s)eine Schriftgröße X als Basis eingestellt, wozu diese Basis um 10% verringern? Das macht keinen Sinn.
Unbedingt vermeiden solltest du die Nutzung des style-Attributs. Das kann man mal als temporären Notnagel nehmen, aber für reguläre CSS-Formatierungen taugt es nichts: Du zerfledderst sowohl den HTML-Code mit vereinzelten CSS-Angaben, als auch den CSS-Code, weil vereinzelte Teile daraus im HTML-Code stecken. Der Übersichtlichkeit ist sowas auf beiden Seiten nicht zuträglich und es rächt sich, wenn der Code umfangreich wird.
Das Logo-<img> ist als Kind von <body> nicht korrekt gelagert, da es kein Block-, sondern ein Zeilenelement ist. Du könntest es zusammen mit der <h1>Seitenüberschrift in ein <div id="seitenkopf"> einlagern. Oder du legst es als Hintergrundgrafik von <h1> an.
Den Alternativtext "Portal" halte ich davon abgesehen für nicht sonderlich aussagekräftig. Bei so einer Dekografik kann alt auch genauso gut leer bleiben.
Ich will die Startseite neu aufbauen & programmiertechnisch korrekt erstellen.
Wie soll sie denn am Ende aussehen, so wie die alte?
