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:
[CODE]
{
margin: 0;
padding: 0;
}
body {
background-color: #2F2F2F;
font-family: arial, serif;
}
h1 {
text-align: center;
color: white;
vertical-align: middle;
}
[/CODE]1. Problem:
Der Header wird bei mir zentriert, aber geht das auch mit position ? Reine Interesse.
Problem:
Die h1 wird nicht im div-container vertikal zentriert positioniert.
HTML-Code:
[CODE]
Meine erste Homepage
[/CODE]
Problem:
Wie muss ich am Anfang die Ränder mit * {} definieren ? Wieso geht das nicht mit body ? Verstehe den Vorgang nicht so ganz.
Frage: Warum setzt Du Dein div#header um das h1? Das ist doch überflüssig.
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.
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.
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
besser bzw. das
falsch, denn da wird erwartet, dass da etwas dazwischen steht. Ein Hintergrundbild alleine ist keine Überschrift (
).
Das
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
