DIV Höhe von leeren Elementen automatisch anpassen
icke
- css
Moin,
folgendes Szenario:
Ich habe 3 DIV-Elemente per float nebeneinander positioniert.
Alle 3 Elemente befinden sich in einem umschließenden DIV-Container.
Der umschließende Container hat als hight-Wert "auto".
Eines der 3 DIV-Elemente hat einen Textinhalt und passt sich automatisch dem äußeren Container an, die anderen Beiden haben lediglich eine Hintergrundgrafik.
Das Problem ist, dass diese beiden leeren Elemente sich nicht der Höhe des äußeren Containers anpassen.
Welchen Wert muss ich hierfür setzen?
Was ich bereits probiert oder eingesetzt habe:
Herzlichen Dank.
Hi,
Eines der 3 DIV-Elemente hat einen Textinhalt und passt sich automatisch dem äußeren Container an, die anderen Beiden haben lediglich eine Hintergrundgrafik.
die anderen beiden erfüllen also keinen Zweck. Entferne sie.
- abschließender Container <div style="clear:booth"></div>
Ich finde auch, man sollte seine Kajüte sauber halten. Trotzdem erfüllt dieses Element keinen Zweck und gehört somit entfernt.
Cheatah
die anderen beiden erfüllen also keinen Zweck. Entferne sie.
Doch haben Sie - sie sollen mit der Hintergrundgrafik einen Rahmen geben.
Ich finde auch, man sollte seine Kajüte sauber halten. Trotzdem erfüllt dieses Element keinen Zweck und gehört somit entfernt.
Bei float-Elementen dient dieses Element doch zum Abschluß?!
Hi,
die anderen beiden erfüllen also keinen Zweck. Entferne sie.
Doch haben Sie - sie sollen mit der Hintergrundgrafik einen Rahmen geben.
HTML hat nichts mit Hintergrundgrafiken zu tun. Irgendwelche CSS-Dinge haben für die Wahl des HTML-Codes keine Bedeutung - wenn Du also als einzigen Grund für die Elemente Darstellerisches nennen kannst, erfüllen sie keinen Zweck.
Entferne sie.
Ich finde auch, man sollte seine Kajüte sauber halten. Trotzdem erfüllt dieses Element keinen Zweck und gehört somit entfernt.
Bei float-Elementen dient dieses Element doch zum Abschluß?!
Leere <div>-Elemente können keine Existenzberechtigung habe. <div> *umschließt* Elemente, ansonsten ist es fehl am Platz. Und nein, Floating bedingt keine Notwendigkeit von Clearing.
Cheatah
HTML hat nichts mit Hintergrundgrafiken zu tun. Irgendwelche CSS-Dinge haben für die Wahl des HTML-Codes keine Bedeutung - wenn Du also als einzigen Grund für die Elemente Darstellerisches nennen kannst, erfüllen sie keinen Zweck.
Entferne sie.
Wie erstelle ich dann ein DIV nach dem Schema:
Bild - Text (mit einer Hintergrundfarbe) - Bild
?
Leere <div>-Elemente können keine Existenzberechtigung habe. <div> *umschließt* Elemente, ansonsten ist es fehl am Platz. Und nein, Floating bedingt keine Notwendigkeit von Clearing.
Da sich darunter noch Elemente befinden, die nicht vom Textumfluss betroffen sein sollen, müßte es genauer lauten: <div style="clear: booth"> ... ein paar Elemente mehr ... </div> - womit die Existenzberechtigung wieder gegeben ist.
Hi,
Wie erstelle ich dann ein DIV nach dem Schema:
wer hat Dir denn gesagt, dass alles <div> sein muss? Recherchiere den Begriff des semantischen Markups.
Leere <div>-Elemente können keine Existenzberechtigung habe. <div> *umschließt* Elemente, ansonsten ist es fehl am Platz. Und nein, Floating bedingt keine Notwendigkeit von Clearing.
Da sich darunter noch Elemente befinden, die nicht vom Textumfluss betroffen sein sollen, müßte es genauer lauten: <div style="clear: booth"> ... ein paar Elemente mehr ... </div> - womit die Existenzberechtigung wieder gegeben ist.
Irgendein Element darf(!) clear:both bekommen. Ob das notwendig ist und wenn ja, welches Element betroffen ist, hängt vom Einzelfall ab. Als Inline-Style ist es jedoch in fast 100% aller Fälle falsch. Darüber hinaus bedeutet clear:booth etwa "mach die Bude sauber" und hat somit nichts mit CSS zu tun.
Cheatah
wer hat Dir denn gesagt, dass alles <div> sein muss? Recherchiere den Begriff des semantischen Markups.
Ich weiß, dass auch eine Lösung über z.B. <ul> möglich ist. as aber, wenn es sich um DIVs handeln *muss*?
Hi,
wer hat Dir denn gesagt, dass alles <div> sein muss? Recherchiere den Begriff des semantischen Markups.
Ich weiß, dass auch eine Lösung über z.B. <ul> möglich ist. as aber, wenn es sich um DIVs handeln *muss*?
über <ul> strukturierst Du listenförmige Inhalte, deren Reihenfolge austauschbar ist. Mittels <div> gruppierst Du zusammengehörende Elemente. Beide haben Einsatzgebiete, in denen sie "sein müssen", und beide lassen sich über CSS auf gleiche Art und Weise formatieren. Ergo:
Wenn es sich um <div>s handeln *muss*, formatierst Du sie genau so, wie Du es machen würdest, wenn es z.B. <ul> wäre.
Bei dem von Dir gezeigten Inhalt handelt es sich jedoch um - nichts. Das richtige Element, um diesen Inhalt zu strukturieren, ist keines. Entferne also die leeren <div>-Elemente und arbeite mit denen, die verbleiben. Die gute Nachricht lautet: Wenn Du schon auf diese Weise den HTML-Code verhunzt hast, ist die Wahrscheinlichkeit groß, dass auch der Rest semantischer Unfug ist. Finde und korrigiere die Fehler; es besteht eine gute Chance, dass Du dadurch genügend Elemente zur Verfügung bekommst, falls die bisher übrig bleibenden nicht ausreichen sollten.
Cheatah
Gratulation: Du hast es in 4 Postings nicht geschafft, mir die eigentliche Frage zu beantworten, sondern immer wieder nur noch mehr "Hinweise" und "Tipps" für die bessere Strukturierung zu geben. Die Frage war nicht, wie mache ich es am Besten, sondern wie schaffe ich es mit den gegebenen Umständen. Das hight-Problem war hier eigentlich mal Gegenstand der Frage, dass scheint jedoch untergegangen zu sein.
Ich danke Dir für die großartige Unterstellung, mein Code sei Unfug und wünsche frohe Weihnachten sowie einen guten Rutsch in das neue Jahr.
Nur damit wir uns richtig verstehen - ich bin durchaus der Auffassung, dass ein Forum auch dafür da sein sollte, neue Dinge zu erlernen oder die bestehenden zu verbessern. Nur nerven mich Antworten, die nichts beantworten.