2 Div-Container in einem Div untereinander mit jew. fester Höhe

[JustMe28]

Hi und ein Hallo @all.

Grund meiner Anfrage ja schon im Betreff, aber hier noch mal genauer. Bin gerade dabei mich in HTML und CSS einzuarbeiten

Für eine TestPage müsste ich folgendes realisieren:

• ein Div oben, top 0px, Breite 100% Höhe 180px 'position: fixed;'.
• In diesen Container sollen jetzt 2 Div's, untereinander mit fester Höhe, der obere H: 150px, der untere dann 30px.
• Beide inneren Div's Breite 1200px, zentriert.

Soweit bin ich bis jetzt, es funktioniert auch solange im oberen Div kein Text steht. Aber sobald im oberen Div Text steht, und das wird auch sein, und zwar verschiedener Text in den versch. Pages, drückt es den oberen Div plötzlich um ca. 25 - 30 px nach unten, wodurch dann der untere Div aus dem 'Parent Div' herausrutscht.

Edit: der obere Div bricht nach unten aus wenn ich Text z. B. mit <h1>, <p>, ... formatiere( mehr teste ich noch ). Soll aber auch dann seine feste Höhe behalten.

Was ich also bräuchte wäre eine Möglichkeit den beiden inneren Div's eine feste Höhe zu geben, egal ob Inhalt - egal welcher - oder kein Inhalt.

Danke schonmal an alle die helfen( wollen ).

Grüssle

[Der Martin]

Hallo,

willkommen auf dem Holzw in der Welt des Webs!

Für eine TestPage müsste ich folgendes realisieren:

• ein Div oben, top 0px, Breite 100% Höhe 180px 'position: fixed;'.
• In diesen Container sollen jetzt 2 Div's, untereinander mit fester Höhe, der obere H: 150px, der untere dann 30px.
• Beide inneren Div's Breite 1200px, zentriert.

Diese Anforderungen enthalten mehrere gravierende Fehler.

Angefangen bei der Verwendung von div-Elementen, die keine eigene Bedeutung (Semantik) mitbringen. Was sollen diese Elemente wirklich sein? Ein Header? Überschriften? Eine Navigation? Verwende doch ruhig die Elemente, die die Bedeutung am besten beschreiben.

Dann Größenangaben in Pixeln. Du weißt nicht, wie groß die Anzeige bei deinen Besuchern überhaupt ist. Eine Breite von mehr als 1200px vorauszusetzen, ist mehr als optimistisch. Außerdem sollten die Maße deiner Boxen möglichst zur Schriftgröße passen, oder? Auch die kannst du nicht im Voraus ahnen. Jemand, der schlecht sieht, hat möglicherweise einen Default-Zoomfaktor von 150% eingestellt. Oder eine Mindestschriftgröße von 28px.
Gib also die Maße flexibel an. Zum Beispiel in Prozent bezogen aufs Elternelement. Oder in em, dann skalieren sie mit der Schriftgröße.

Und schließlich position:fixed. Überlege genau, ob das wirklich eine gute Idee ist. Immerhin ist damit die Höhe des fixierten Bereichs permanent nicht für andere Seiteninhalte verfügbar.

Soweit bin ich bis jetzt, es funktioniert auch solange im oberen Div kein Text steht. Aber sobald im oberen Div Text steht, und das wird auch sein, und zwar verschiedener Text in den versch. Pages, drückt es den oberen Div plötzlich um ca. 25 - 30 px nach unten, wodurch dann der untere Div aus dem 'Parent Div' herausrutscht.

Wenn du den beiden inneren Containern eine feste Höhe gibst, kann das eigentlich nicht passieren. Aber das solltest du eher nicht. Lass den äußeren Container mitwachsen, wenn das nötig ist.

Was ich also bräuchte wäre eine Möglichkeit den beiden inneren Div's eine feste Höhe zu geben, egal ob Inhalt - egal welcher - oder kein Inhalt.

Was wir gemeinsam bräuchten, wäre ein Live-Beispiel, an dem wir eine sinnvolle Lösung erarbeiten können.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Samuel fiedler]

Hallo JustMe28!

Zuerst einmal einige Fragen:

• Wie genau machst du das?
• Kannst du uns eine Seite schicken, in der wir deinen Code sehen?
• Oder den Code im Forum einfügen?

Ich kann mangelnden Codes nur spekulieren ^[1], was das konkrete Problem ist.
Ich schicke einfach, was ich coden würde.

Mein HTML im Body sähe etwa so aus:

<div id="elternDiv">
  <div id="kindDivEins"></div>
  <div id="kindDivZwei"></div>
</div>

Ich würde, wenn es genau so wie deine Angaben sein soll, folgendes ins CSS schreiben:

#elternDiv {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 180px;
  position: fixed;
}

#kindDivEins {
  top: 0px;
  left: 0px;
  width: 1200px;
  height: 150px;
  position: absolute;
  text-align: center;
}

#kindDivZwei {
  top: 150px;
  left: 0px;
  width: 1200px;
  height: 30px;
  position: absolute;
  text-align: center;
}

Das sollte dann so wie in einem JSFiddle Beispiel ohne Text bzw. einem JSFiddle Beispiel mit Text aussehen.

Ich sage noch, dass es keine gute Idee ist, alles absolut zu positionieren und sich auf Pixelangaben zu verlassen. Wenn du zwei 1200px große DIVs auf einem 200px × 400px großem Handy hast, gibt es einen großen Scrollbalken. Das lässt sich schon bei der Zentrierung des Textes bemerken:
Der Text ist bei dem Beispielfenster von JSFiddle in der von mir eingestellten Ansicht ganz weit rechts.

Wenn du dann eine h1 reinpackst, gibt es noch ein Problem:
Die h1 wird vom Browser so formatiert, dass sie wahrscheinlich mehr Platz als 150px bzw. 30px einnimmt.

Ich nehme an, entweder hast du einen ähnlichen Code, dann würde kein Problem existieren, oder du hast einen anderen Code, dann wären wir ein Schritt weitergekommen.

Jetzt warte ich erstmal auf eine Antwort von dir.

Au revoir,
Samuel Fiedler

---

1. Das Verb spekulieren passt gut zum weihnachtlichen Spekulatius! ↩︎

[Matthias Scharwies]

Herzlich willkommen bei SELFHTML,

Soweit bin ich bis jetzt, es funktioniert auch solange im oberen Div kein Text steht. Aber sobald im oberen Div Text steht, und das wird auch sein, und zwar verschiedener Text in den versch. Pages, drückt es den oberen Div plötzlich um ca. 25 - 30 px nach unten, wodurch dann der untere Div aus dem 'Parent Div' herausrutscht.

Martin und Samuel haben Dir schon geantwortet.

Edit: der obere Div bricht nach unten aus wenn ich Text z. B. mit <h1>, <p>, ... formatiere( mehr teste ich noch ). Soll aber auch dann seine feste Höhe behalten.

Da hilft die Lektüre zum Boxmodell: CSS/Tutorials/Einstieg/Box-Modell

Was ich also bräuchte wäre eine Möglichkeit den beiden inneren Div's eine feste Höhe zu geben, egal ob Inhalt - egal welcher - oder kein Inhalt.

Ja, die Eigenschaften overflow, height, max-height, etc.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo JustMe28,

Für eine TestPage müsste ich folgendes realisieren:

Diese Angaben sind so konkret - und gleichzeitig so willkürlich -, dass mir eigentlich nur eine Frage bleibt:

Welcher Informatiklehrer hat diese Aufgabe gestellt?

Aber sobald im oberen Div Text steht, und das wird auch sein, und zwar verschiedener Text in den versch. Pages, drückt es den oberen Div plötzlich um ca. 25 - 30 px nach unten

Setzt Du in den "oberen div" ein h1 Element hinein? Oder ein p Element? Die haben einen margin-top, und weil der Browser die Margins zusammenlegt (sofern kein eigener Blockformatierungskontext aufgemacht wird), kann es dazu führen, dass das ganze Konstrukt nach unten rutscht.

Rolf

[JustMe28]

Welcher Informatiklehrer hat diese Aufgabe gestellt?

Rolf

• keiner, wie im Eingangspost erwähnt bin ich gerade dabei mich in HTML & CSS einzuarbeiten( bin seit > 30 Jahren Softwareentwickler, hauptsächlich C, C++ und C# ), und so lerne ich. Muss nicht immer Sinn ergeben, aber immer eine 'Herausforderung' sein. Ein 'Hello World' ist nun mal nicht abendfüllend.

Hallo zusammen,

erst einmal Danke für die Antworten und die enthaltenen Denkanstöße. Werde ich mit Sicherheit einige umsetzen. Also, Aufgaben umformulieren, und neu loslegen.

Und was die Angabe in px angeht, zum einen gibt es @media, und außerdem werde ich mir - sobald HTML & CSS soweit sitzen - JavaScript mal näher anschauen. Ergeben sich dann ja noch mehr Möglichkeiten.

Und jetzt ist Schluß für heute

[Matthias Scharwies]

Servus!

Welcher Informatiklehrer hat diese Aufgabe gestellt?

Rolf

• keiner, wie im Eingangspost erwähnt bin ich gerade dabei mich in HTML & CSS einzuarbeiten( bin seit > 30 Jahren Softwareentwickler, hauptsächlich C, C++ und C# ), und so lerne ich. Muss nicht immer Sinn ergeben, aber immer eine 'Herausforderung' sein. Ein 'Hello World' ist nun mal nicht abendfüllend.

Das stimmt! Viel Spaß dabei!

erst einmal Danke für die Antworten und die enthaltenen Denkanstöße. Werde ich mit Sicherheit einige umsetzen. Also, Aufgaben umformulieren, und neu loslegen.

Wir treffen immer wieder auf solche Aufgaben und wundern uns oft mehr über die Aufgabenstellung an sich als die Fragenden und ihre Lösungsansätze.

Meist kommen die Leute - wie @Rolf B vermutete - aus allgemeinbildenden Schulen / der beruflichen Weiterbildung und haben wenig Ahnung vom Webdesign.

Und was die Angabe in px angeht, zum einen gibt es @media,

Die Aufgabenstellung arbeitet mit absoluter Positionierung und festen Pixeln, was mittlerweile ein No-go ist, was im von mir verlinkten Tutorial erklärt wird.

Auch @media arbeitet lieber mit relativen Werten wie em:

HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen

und außerdem werde ich mir - sobald HTML & CSS soweit sitzen - JavaScript mal näher anschauen. Ergeben sich dann ja noch mehr Möglichkeiten.

Ja, aber zur Interaktion und Steuerung - nicht zur Gestaltung!

HTML/Tutorials/Trennung_von_Inhalt,_Präsentation_und_Verhalten

Und jetzt ist Schluß für heute

Genieß den Feierabend!

Herzliche Grüße

Matthias Scharwies