Kopfzeile letzter Versuch

Letzter Versuch,

kopf mit 20% Höhe.

Mache ich es ohne absolutes div.
html {height: 100%; width: 100%;}

kommt der vollkommen berechtigte Einwand:
Allerdings halte ich es nicht für besonders sinnvoll, die Höhe auf 100% zu begrenzen. Denn je nach viewport wird der Platz für den Inhalt ausreichen oder eben auch nicht.

Mache ich es mit absolutem div

#haupt {
position: absolute;
width:100%;
height:100%;
background-color: blue;
}

klappt es, das der Kopf 20% Höhe bekommt und ich body noch eigenständig formatieren kann. Dann kommt aber der Einwand :

[I]warum wird #haupt per position:absolute in den Viewport genagelt??

Die Höhenangabe von 100% dafür ist wirkungslos, weil 100% von was?
Da die Vorfahren (body, html) keine Höhenangabe haben, kann 100% für #haupt nicht errechnet werden und fällt auf den default-Wert zurück (height:auto; ).[/I]

[SIZE=4]Wie bekommt man es nun richtig hin? Das ein Header auf einer Seite erscheint, der 20% Höhe der Seite einnimmt aber min. 120px hoch ist?[/SIZE]

ich glaube so sollte es funktionieren

html {height: 100%; width: 100%}
div#haupt {position: absolute; width: 100%; height: 20%; min-height: 120px; background-color:#F00; text-align:center}

somit gibst du dem #haupt an dass er 20% hoch sein soll aber mindestens 120px hoch ist, ich habe ihm noch eine hintergrundfarbe und ein align gegeben welches du dann halt wieder entfernen musst oder ändern.
Textfarbe kann mit color noch angegeben werden.
hoffe konnte helfen.

mfg devilseye

Vielen dank für deine schnelle Antwort.
Es klappt so keine Frage, es ist eine Lösung allerdings habe ich dann html wieder auf 100% height, und dann greift doch wieder der Einwand

Allerdings halte ich es nicht für besonders sinnvoll, die Höhe auf 100% zu begrenzen. Denn je nach viewport wird der Platz für den Inhalt ausreichen oder eben auch nicht.

oder ?

Danke Hawa

noch was wenn du dem ganzen noch einen allgemeinen tag gibst

  • {margin: 0px; padding: 0px}

verhinderst du das du einen rand um den div hast.

ähm ja das kannst du aber ohne weiteres raus nehmen da du mit der height im #haupt schon klar sagst das es 20% vom viewport einnehmn soll

Mein erster Versuch war folgender :

#haupt {
position: absolute;
width:100%;
height:100%;
background-color: blue;
}
.kopf {
width:80%;
height:20%;
background-color: silver;
text-align: center;
margin: 1% auto;
}

Grafik Überschrift

kann ich den auch nehmen, will dann noch ein Inhaltsfenster von 75% height haben? Hierrauf kam dann der Einwand mit dem absolut genagelten Haupt, was ist denn eigentlich daran so falsch?

Ein Element mit position: absolute; wird vollständig aus dem Normal Flow herausgenommen. Alle anderen Elemente ignorieren die absolut poitionierte Box völlig und machen auch kein Platz dafür.
Quelle: Einstieg in CSS von Elisabeth Wetsch

Das bedeutet dass das absolute Element die anderen überdeckt und nicht gefloatet werden kann.

Vielen Dank für deine Mühe,

was ich daran nicht verstehe, wenn die anderen es ignorieren, kopf also nicht innerhalb von haupt ist warum kriegt kopf dann 20% höhe wenn ich haupt absolut positioniere und wenn ich haupt weglasse eben nur die höhe seines Inhaltes.
Irgendwie muß haupt doch kopf beeinflussen.

Da liegt irgendwie mein knick im Schlauch.
Irgendwie versteh ich das so, daß kopf 20% von Haupt bekommt, wenn haupt absolut positioniert ist.
das ist aber wohl falsch. Nur wovon bekommt kopf denn dann die 20% indem Fall indem es klappt???

ich denke das Problem liegt darin das du mit h1 eine überschrift mit einer vorbestimmten höhe hast womit du die 20% vom .kopf wieder relativierst, weil h1 ja nicht über den rand von .kopf kommen kann. eine class würde ich auch nicht mit mit height und width angeben wenn du sie dazu brauchst texte mit einem hintergrund zu versehen da, gerade bei überschriften, die höhe bereits gegeben ist.

ich probiers mal ohne H1 melde mich wieder.

Vielen Dank für deine Hilfe.

Hawa

Hallo.

Wenn h1 die Überschrift deiner Seite ist dann ist h1 schon richtig.
Wir gross h1 ist kannst du mit CSS bestimmen.

Gruss
Elroy