• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kopfzeile letzter Versuch

H

hawa

Neues Mitglied
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 :

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; ).

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?
 
Werbung:
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
 
Werbung:
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.
 
hawa schrieb:
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
Zum Vergrößern anklicken....

ä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;
}

<body>
<div id="haupt">
<h1 class="kopf">Grafik Überschrift</h1>
</div>
</body>

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?
 
Werbung:
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
Zum Vergrößern anklicken....

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.
 
Werbung:
Hallo.

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

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben