Seitenkopf (Header) immer 20% Höhe des Viewports

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich hätte gerne einen Seitenkopf der immer 80% Breite und 20% Höhe des Viewports einnimmt.
Später soll hier horizontal u. vertical zentriert eine Grafik und eine h1 erscheinen aber das ist der nächste Schritt.
( Den sollte ich dann selber hinkriegen ).
Ich bekomme es nur so geregelt:

#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

Damit „nagel“ ich haupt absolut in den Viewport.
a) Ist das ein Nachteil wenn ja warum?
b) Wie kann ich es besser lösen?
Antwort oder Link zum selber studieren wäre super.

Danke Hawa

2

Aus meiner Sicht ist der #haupt in dieser Form überflüssig.
Dessen Angaben kannst du - ohne absolute Positionierung - ebenso dem body zuweisen.
Dann auch noch html auf 100% setzen.

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. Dann ist es aus meiner Sicht besser, den Browser-Scrollbalken zu verwenden, als einen inneren Balken, der m.E. unschön aussieht.

3

Vielen Dank für deine Antwort.

Habe es gerade so probiert,
es gibt keine 20% Höhe
er legt den grauen Hintergrund nur um die Höhe des Textes.
Und weitere Eingaben in der Seite folgen direkt darunter.
Die 20% Höhe wirken nicht

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

Grafik Überschrift

4

Füge mal das noch ein:

html {height: 100%; width: 100%;}
5

SUUUPER,

Vielen, vielen Dank

so klappts

Hawa

6

Mach Dir mal 2 Minuten, wenn Du mal Zeit hast, Gedanken darüber, wie Dein Header mit 20% Höhe aussieht, wenn Du mit einem Netbook unterwes bist, das im Viewport vielleicht 400px oder weniger Höhe hat. 20% von 400 sind grad mal 80px.

7

Zwei Minuten sind rum und :wink:
wie immer hast du recht mit deinem Einwand.
Aber wie ist’s denn nu recht?
Mach ich nen Header mit z.B. 200px fest ist der halbe Viewport Header?
Wäre min-height ne Lösung?
Aber auch da Höhe??
Gibts nicht irgendne Faustregel so ca ungefähr sollte es aussehen??
Also ich will später mal ne Seite machen mit nen Header
links ner Navigation und rechts ein Inhaltsteil.
Es soll mehrere Seiten geben.
Allerdings nicht viel Infos zu den Einzelnen Themen halt kurz, knapp präzise.
Denke es wird bei nem Viewport der ne Auflösung von 1024*768 und dessen Browser im Vollbild läuft alles sichtbar sein.
Halt so ungefähr wie auf der Testseite. home
Wie würdet ihr es denn überhaupt angehen, festes oder flexibles Layout.
Ich wünsche mir natürlich das die Seite superinteressant wird :-o sprich alle Viewports sollten sie betrachten können.

Danke schon mal für eure Hilfe

Hawa