nicht angemeldet
Div mindestens genauso hoch wie Bild daneben
Gunnar BittersmannHi,
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
[code lang=css] body {
background:black;
}
article {
border:3px solid #fff;
overflow:hidden;
background:url(http://image.bayimg.com/dahnaaadl.jpg);
width:934px;
padding:20px;
}
article > img {
float:left;
}
article > div {
background:rgba(255,255,255,.7);
padding:0 20px;
overflow:hidden;
/* height:240px; // Diese Zeile einkommentieren damit man sieht wie es sein sollte */
}
h1 {
border-bottom:1px dashed #9e4343;
}
</style>
</head>
<body>
<article>
<img src="http://placehold.it/350x240" alt="Ein hübsches Bild in Grau"/>
<div>
<h1>Foo</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
</p>
</div>
</article>
</body>
</html>[/code]
Das div-Element neben dem Bild ist immer nur so hoch wie sein Inhalt. Ich möchte aber, dass es mindestens so hoch ist, wie das Bild daneben.
min-height:100% funktioniert nicht, was mich kaum wundert. Das article-Element hat ja auch keine feste Höhe.
Jemand eine Idee wie ich das bewerkstelligen könnte?
Ohnehin stört mich das nutzlose div-Element, aber ohne bekomm' ich 's überhaupt nicht hin. Wenn also da jemand weiß wie ich schaffen kann dass es wie gewünscht aussieht nehme ich gerne Hinweise an :-)
~dave
-
Hi,
Ohnehin stört mich das nutzlose div-Element, aber ohne bekomm' ich 's überhaupt nicht hin. Wenn also da jemand weiß wie ich schaffen kann dass es wie gewünscht aussieht nehme ich gerne Hinweise an :-)
Lass das DIV-Element weg, und formatiere ARTICLE stattdessen.
Das div-Element neben dem Bild ist immer nur so hoch wie sein Inhalt. Ich möchte aber, dass es mindestens so hoch ist, wie das Bild daneben.
SELFHTML Weblog: Grundlagen für Spaltenlayout mit CSS
Dich interessiert für das konkrete Problem besonders der Abschnitt „Einschließen von float-Boxen“. Bitte arbeite aber den kompletten Artikel aufmerksam durch, er vermittelt wichtige Grundlagenkenntnisse.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Ohnehin stört mich das nutzlose div-Element, aber ohne bekomm' ich 's überhaupt nicht hin. Wenn also da jemand weiß wie ich schaffen kann dass es wie gewünscht aussieht nehme ich gerne Hinweise an :-)
Lass das DIV-Element weg, und formatiere ARTICLE stattdessen.
Und wie kann ich das article-Element formatieren so dass es einen 3px breiten weißen Rahmen hat, dann 20px padding (wo man nur die Hintergrundgrafik sieht) und in der mitte eine transparente weiße Fläche die wiederum ein padding von 20px hat (und über der Hintergrundgrafik liegt)?
Das einzige was ich seh ist article>* das transparente weiß als Hintergrundfarbe zu geben und ein padding:0 20px, dann noch first-child und last-child für padding-top und padding-bottom.
Dann geht aber die Linie der Überschrift über die gesamte Breite, und ich weiß nicht wie ich das verhindern kann.Das div-Element neben dem Bild ist immer nur so hoch wie sein Inhalt. Ich möchte aber, dass es mindestens so hoch ist, wie das Bild daneben.
SELFHTML Weblog: Grundlagen für Spaltenlayout mit CSS
Dich interessiert für das konkrete Problem besonders der Abschnitt „Einschließen von float-Boxen“. Bitte arbeite aber den kompletten Artikel aufmerksam durch, er vermittelt wichtige Grundlagenkenntnisse.
Wenn ich folgendes hinzufüge:
article > div::after { content:"clear"; clear:both; display:block; height:0; }Hat das bei mir keinerlei Auswirkung. Ist das nicht das in der Kombinationslösung vorgeschlagene?
Außerdem müsste ich damit dass im IE7 funktioniert dann zusätzlich ein div einfügen?Und dann gibts leider auch den Fall, dass das Bild anstelle des float:left ein float:right hat.
Dafür konnte ich keine Lösung finden, die bei mir ohne zusätzlich div-Elemente funktioniert.Ich bin leider auch nach dem (teils mehrfachen) Lesen des Artikel mit meinem Problem noch überfordert.
~dave
-
Hi,
Und wie kann ich das article-Element formatieren so dass es einen 3px breiten weißen Rahmen hat, dann 20px padding (wo man nur die Hintergrundgrafik sieht) und in der mitte eine transparente weiße Fläche die wiederum ein padding von 20px hat (und über der Hintergrundgrafik liegt)?
Na die weiße Fläche wird schon irgendein Element o.ä. sein müssen.
Dich interessiert für das konkrete Problem besonders der Abschnitt „Einschließen von float-Boxen“. Bitte arbeite aber den kompletten Artikel aufmerksam durch, er vermittelt wichtige Grundlagenkenntnisse.
Wenn ich folgendes hinzufüge: [Clearing per Pseudoelement]
Hat das bei mir keinerlei Auswirkung. Ist das nicht das in der Kombinationslösung vorgeschlagene?Ist es das direkt im ersten Satz des verlinkten Absatzes beschriebene?
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Ist es das direkt im ersten Satz des verlinkten Absatzes beschriebene?
Sorry: Nicht explizit verlinkt, aber speziell erwähnt.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Hi,
Und wie kann ich das article-Element formatieren so dass es einen 3px breiten weißen Rahmen hat, dann 20px padding (wo man nur die Hintergrundgrafik sieht) und in der mitte eine transparente weiße Fläche die wiederum ein padding von 20px hat (und über der Hintergrundgrafik liegt)?
Na die weiße Fläche wird schon irgendein Element o.ä. sein müssen.
Also in dieser Art:
<article> <!-- mit Hintergrundbild und 20px padding--> <div> <!-- mit weiß-transparentem Hintergrund und 20px padding--> <img .../> <!-- mit negativem margin, damits direkt am Rand des umschließenden div-Elements ist (quasi gegen die 20px padding) --> <h1>...</h1> <p>...</p> </div> </article>Das finde ich jetzt von allen Ideen in meinem Kopf am besten, wobei mich auch hier das div etwas stört.
Dich interessiert für das konkrete Problem besonders der Abschnitt „Einschließen von float-Boxen“. Bitte arbeite aber den kompletten Artikel aufmerksam durch, er vermittelt wichtige Grundlagenkenntnisse.
Wenn ich folgendes hinzufüge: [Clearing per Pseudoelement]
Hat das bei mir keinerlei Auswirkung. Ist das nicht das in der Kombinationslösung vorgeschlagene?Ist es das direkt im ersten Satz des verlinkten Absatzes beschriebene?
"Um das Überlappen der float-Box zu verhindern, bekommt der Container die Eigenschaft overflow mit einem anderen Wert als visible."
article hat bei mir overflow:hidden.
Oder meinst du noch was anderes?
~dave
-
Hi,
"Um das Überlappen der float-Box zu verhindern, bekommt der Container die Eigenschaft overflow mit einem anderen Wert als visible."
article hat bei mir overflow:hidden.
Mit article bestand ja auch nicht das Problem, dass es „zu klein“ war.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
Om nah hoo pez nyeetz, dave!
Und wie kann ich das article-Element formatieren so dass es einen 3px breiten weißen Rahmen hat, dann 20px padding (wo man nur die Hintergrundgrafik sieht) und in der mitte eine transparente weiße Fläche die wiederum ein padding von 20px hat (und über der Hintergrundgrafik liegt)?
Viele Browser beherrschen bereits multiple Hintergründe.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, dave!
Dann geht aber die Linie der Überschrift über die gesamte Breite, und ich weiß nicht wie ich das verhindern kann.
display: inline-block;
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
@@dave:
nuqneH
article { … width:934px;Gestaltest du deine Webseite für dich oder für andere? Viele andere haben einen Viewport, der schmaler ist als 934 Pixel und müssen horizontal scrollen. Benutzerfreundlich ist das nicht. Gib keine feste Breite, sondern eine Maximalbreite an!
Außerdem würde ich dem Ding noch 'display: block' spendieren, das 'article'-Element kennen noch nicht alle Browser.
Jemand eine Idee wie ich das bewerkstelligen könnte?
Eine Beschreibung, was „das“ ist, wäre ein guter Anfang. Und deine Seite zu verlinken, auch.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
Außerdem würde ich dem Ding noch 'display: block' spendieren, das 'article'-Element kennen noch nicht alle Browser.
Wenn der Parser es wegen Unkenntnis gar nicht erst als Blockelement ansieht, und deshalb vor dem nächsten solchen wieder schließt, dann erkenne ich in dieser Formatierung keinen Zusatznutzen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Außerdem würde ich dem Ding noch 'display: block' spendieren, das 'article'-Element kennen noch nicht alle Browser.
Du hast recht, im FF 3.6 macht das tatsächlich einen Unterschied.
Danke für die Info.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
Hi,
Gestaltest du deine Webseite für dich oder für andere? Viele andere haben einen Viewport, der schmaler ist als 934 Pixel und müssen horizontal scrollen. Benutzerfreundlich ist das nicht. Gib keine feste Breite, sondern eine Maximalbreite an!
Außerdem würde ich dem Ding noch 'display: block' spendieren, das 'article'-Element kennen noch nicht alle Browser.
Beides gemacht. max-width hatte ich ursprünglich sogar, ist beim rumkopieren fürs Beispiel nur verloren gegangen.
Jemand eine Idee wie ich das bewerkstelligen könnte?
Eine Beschreibung, was „das“ ist, wäre ein guter Anfang.
Im CSS das hier:
/* height:240px; // Diese Zeile einkommentieren damit man sieht wie es sein sollte */Einkommentieren.
In Worten: „das“ ist, dass der weiße Hintergrund für den ich das div-Elemente gebrauche mindestens so hoch ist wie das Bild daneben.
Noch immer unklar?
~dave
-
@@dave:
nuqneH
In Worten: „das“ ist, dass der weiße Hintergrund für den ich das div-Elemente gebrauche mindestens so hoch ist wie das Bild daneben.
Noch immer unklar?
Ja. Warum gibst du den Hintergrund nicht – wie ChrisB schon sagte – dem 'article'-Element?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
In Worten: „das“ ist, dass der weiße Hintergrund für den ich das div-Elemente gebrauche mindestens so hoch ist wie das Bild daneben.
Noch immer unklar?
Ja. Warum gibst du den Hintergrund nicht – wie ChrisB schon sagte – dem 'article'-Element?
Das article-Element hat bereits die Hintergrundgrafik.
Ich weiß nicht wie ich dem Element auch noch eine Hintergrundfarbe geben soll die auch noch 20px vom Rand entfernt sein soll (und der Text-Inhalt dann wieder 20px Abstand dazu).~dave
-
Hi,
Das article-Element hat bereits die Hintergrundgrafik.
Ich weiß nicht wie ich dem Element auch noch eine Hintergrundfarbe geben soll die auch noch 20px vom Rand entfernt sein soll (und der Text-Inhalt dann wieder 20px Abstand dazu).Dann pack das Bild mit ins DIV-Element, und wende auf dieses die Eingeschaft an, die den Einschluss des gefloateten Bildes bewirkt.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Dann pack das Bild mit ins DIV-Element, und wende auf dieses die Eingeschaft an, die den Einschluss des gefloateten Bildes bewirkt.
Werd' ich wohl so machen.
Vielen Dank euch beiden.
~dave
-
-
-
-
-
-
Hallo,
mir ist noch nicht 100%ig klar geworden, was du alles erreichen willst. Nach deiner Beschreibung könnte dir aber wohl auch eine Definitionsliste helfen. Mit etwas CSS kannst du damit deinen Text neben dem Bild positionieren.
Und lass dich nicht abschrecken, falls behauptet wird, dies sei semantisch nicht korrekt.
Gruss
MrMurphy
-
Hi,
mir ist noch nicht 100%ig klar geworden, was du alles erreichen willst. Nach deiner Beschreibung könnte dir aber wohl auch eine Definitionsliste helfen. Mit etwas CSS kannst du damit deinen Text neben dem Bild positionieren.
Eine Definitionsliste hat den gravierenden konzeptionellen Nachteil, dass sie kein gruppierendes Element für einzelne DT-DD-Kombinationen bietet.
Gerade in Verbindung mit dem hier prinzipiell vorliegenden Wunsch, zwei Spalten gleich hoch zu bekommen, dürfte das ziemlich ungünstig sein.Und lass dich nicht abschrecken, falls behauptet wird, dies sei semantisch nicht korrekt.
Erzähl uns nicht, sie wäre es, so lange überhaupt nicht klar ist, ob der Test das Bild beschreiben soll o.ä. :-)
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
@@ChrisB:
nuqneH
Eine Definitionsliste hat den gravierenden konzeptionellen Nachteil, dass sie kein gruppierendes Element für einzelne DT-DD-Kombinationen bietet.
Gerade in Verbindung mit dem hier prinzipiell vorliegenden Wunsch, zwei Spalten gleich hoch zu bekommen, dürfte das ziemlich ungünstig sein.Könnte den Fehler mal jemand den HTML5-Machern melden, damit er dort endlich behoben wird?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
@@ChrisB:
nuqneH
Eine Definitionsliste hat den gravierenden konzeptionellen Nachteil, dass sie kein gruppierendes Element für einzelne DT-DD-Kombinationen bietet.
Für eine einzelne schon ;-)
an dieser Stelle merkt der geneigte Leser sicher den Unterschied zwischen einzeln und einzig.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-