Mein kleiner Sammelthread

[aqua.*]

Hallo Leute,
ich hatte mich gestern mal bisschen mit CSS beschäftigt und wollte das mal sofort ins praktische umsetzen. Hatte mir dafür ein kostenloses Template geladen und wollte das mal coden.
Hier ein Screenshot, wie es aussehen sollte.
http://www.imagebanana.com/img/7nf3iu11/hc_003.jpg

Wie ihr sehen könnt nichts großartiges, aber für mich schon eine Herausforderung.
So, dann fang ich mal an.
Ich wollte in diesem Thread meine ganzen Fragen posten, die während des codings entstehen.

Dann fang ich mal an:
Beim Header oben fängt es schon an.
Mein bisheriger Code sieht so aus:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #2F2F2F;
    font-family: arial, serif;
}

#header {
     margin: 5px auto 0 auto;
    background: url(images/bgtop.jpg);
    height: 92px;
    width: 752px;   
}

h1 {
    text-align: center;
    color: white;
    vertical-align: middle;
}

1. Problem:
Der Header wird bei mir zentriert, aber geht das auch mit position ? Reine Interesse.

2. Problem:
Die h1 wird nicht im div-container vertikal zentriert positioniert.
HTML-Code:

<div id="header">
     <h1>Meine erste Homepage</h1>
</div>

3. Problem:
Wie muss ich am Anfang die Ränder mit * {} definieren ? Wieso geht das nicht mit body ? Verstehe den Vorgang nicht so ganz.

Danke!

 

[Efchen]

Frage: Warum setzt Du Dein div#header um das h1? Das ist doch überflüssig. <div> bezeichnet eine Gruppe. Ein einzelnes Element ist aber noch keine Gruppe.
Bist Du mit HTML vertraut? Nur, wer HTML beherrscht, kommt mit CSS zurecht.

Problem 2: vertical-align funktioniert nur in Elementen vom Typ table-cell.

Problem 1: Wozu brauchst Du position? Zentrieren kann man damit nicht wirklich. position nimmt das Element aus dem Textfluss, damit bekommst Du ganz andere Probleme.

 

[vitus37]

Zu Problem 3:
Mit * werden alle HTML-Elemente ausgewählt und mit den entsprechenden Attributen versehen.
Mit body nur der Body.
Ich weiss nicht ob man das so sagen kann, aber der body ist glaube ich wie ein Block-Element um die ganze Seite herum, nur dass bei body Attribute wie margin keinen Sinn machen, da er sowieso den Bildschirm (Bowserfenster) kompletteinnimmt.

 

[aqua.*]

Frage: Warum setzt Du Dein div#header um das h1?

Mein Header besteht ja halt nur aus einer Hintergrundgrafik und der Überschrift
Soll ich das dann so machen ?
<div id="header></div>
<h1>...</h1>
?

 

[_Thor_]

Mein Header besteht ja halt nur aus einer Hintergrundgrafik und der Überschrift
Soll ich das dann so machen ?
<div id="header></div>
<h1>...</h1>
?

Nein, so

<h1>...</h1>

h1 {background-image: url('background.png');}

 

[aqua.*]

Wenn ich z.B. noch ein <h2> haben würde, äre dann ein div-Container sinnvoller?

 

[_Thor_]

Wenn du diese gruppieren möchtest, ist ein div angebracht, aber grundsätzlich braucht man da auch kein div.

 

[Efchen]

Mit <h1>...</h1> aber eben nur, wenn etwas in <h1> drin steht. Wenn das wirklich nur ein Hintergrundbild ohne Content ist (also kein Text im Tag und auch kein Text auf dem Bild), dann ist das <div> besser bzw. das <h1> falsch, denn da wird erwartet, dass da etwas dazwischen steht. Ein Hintergrundbild alleine ist keine Überschrift (<h1>).

Das <div> brauchst Du nur, wenn Du mehrere Elemente zusammenfassen willst. Wenn Du für die aber auch keine gemeinsame Formatierung haben willst, dann musst Du nichtmal das machen. Das macht Deine Seite (den Code) übersichtlicher, wenn Du nicht alles mit <div> zupflasterst.