nicht angemeldet
DIV-Containerbreite dyanmisch an den Inhalt anpassen
Hi Leutz!
Ich suche und suche und finde einfach keine Lösung zu meinem Problem.
Wie kann man (wie bei Tabellen) den DIV-Container dynamisch mit dem Inhalt wachsen lassen? Mein Problem ist, ich würde gerne ein Forum in meiner Seite includen. Wenn jemand jetzt aber ein grösseres Bild in die Seite einfügt, soll diese aber, statt fest auf 760 Pixel zu sein, etwas breiter werden bis das Bild hineinpasst. Mit Tabellen ging sowas noch. Man hat der Tabelle eine Breite von 760 px gegeben und sie wurde automatisch grösser, wenn man grosse Bilder drinne hatte.
Ich habe mir mal die Mühe gemacht und etwas Code geschrieben, damit ihr euch mein Problem vielleicht etwas besser verdeutlichen könnt. Bilder sprechen nun mal mehr als tausend Worte. Einfach folgenden Quellcode in einem Browser darstellen:
---------------------------------------------------
<html>
<head>
<style type="text/css">
#box1 { background-color: aaaaaa; margin-top:20px; }
#box2 { background-color: aaaaaa; margin-top:20px; min-width:700px; }
#box3 { background-color: aaaaaa; margin-top:20px; max-width: 700px; }
#box4 { background-color: aaaaaa; margin-top:20px; width: 700px; }
</style>
</head>
<body>
Ich würde gerne, dass der DIV-Container sich wie eine Tabelle verhält. Ich gebe ihm eine feste Breite, aber wenn ein Bild mit drinnen ist welches grösser ist, soll er dynamisch grösser werden (das tut er nur im IE) und sich der Breite des Bildes anpassen.
<div id="box1">Wenn ich keine Formatierung zugebe, dann ist die Box so breit wie das Fenster.
<br />
<img src="#" alt="irgendein Bild mit 1600 Pixel Breite" height="32" width="1600" border="0" />
</div>
<div id="box2">Hier eine Box mit Mindestbreite 700 Pixel. Die Breite geht ebenfalls auf das volle Fenster.<br />
<img src="#" alt="irgendein Bild mit 1600 Pixel Breite" height="32" width="1600" border="0" />
</div>
<div id="box3">Hier eine Box mit einer Maximalbreite von 700 Pixel, da hält er sich penibel dran. <br />
<img src="#" alt="irgendein Bild mit 1600 Pixel Breite" height="32" width="1600" border="0" />
</div>
<div id="box4">Hier eine Box mit einer Breite von 700 Pixel, auch hier kein abweichen von der Breite. <br />
<img src="#" alt="irgendein Bild mit 1600 Pixel Breite" height="32" width="1600" border="0" />
</div>
Wie ihr nun im Mozilla seht, geht das Bild aus dem DIV-Container und der Container bleibt in der Grösse.
</body>
</html>
---------------------------------------------------
Mir liegt wirklich viel an der Lösung dieses Problems. Danke auf jeden Fall für jeden Tipp den ich kriege.!
Greetz
Scheich Xodox
-
hi,
Wie kann man (wie bei Tabellen) den DIV-Container dynamisch mit dem Inhalt wachsen lassen?
hast du dich bereits mit overflow beschäftigt?
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Ja, das habe ich schon. Wenn ich overflow benutze, dann ist "visible" doch Standard (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow). Bei "scroll" enstehen unschöne Scrollbalken, bei "hidden" ist das Element weg. Und wenn ich wie erwähnt "visible" benutze, dann ist zwar das ganze Bild sichtbar, aber die Hintergrundfarbe von dem DIV zieht nicht mit, sprich das DIV verändert seine Breite leider nicht mit.
-
hi,
Ja, das habe ich schon.
gut, ich dachte zunächst, overflow wäre für dein vorhaben das geeignetste.
wenn nicht, dann wirf auch noch einen blick auf min-width.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Aber das habe ich doch schon. In meinem kleinen Code-Schnipsel hab eich auch ein Beispiel mit min-width. Im Mozilla wird das DIV aber leider trotzdem nicht größer (so eine Frechheit).
-
Tachchen!
Aber das habe ich doch schon. In meinem kleinen Code-Schnipsel hab eich auch ein Beispiel mit min-width. Im Mozilla wird das DIV aber leider trotzdem nicht größer (so eine Frechheit).
Eigentlich müsste es viel zu _groß_ sein!?
Es sei denn, du hättest die width-Angabe nicht gestrichen. ;-)Die einzige CSS-Lösung, die mir einfiele, wäre eine solche, bei der
der entsprechende DIV aus dem Textfluss genommen würde.
Nur so nimmt der DIV nicht die komplette Breite des Elternelements an
und könnte per min-width auf de gewünschte Breite gebracht werden.Gruß
Die schwarze Piste
-
hi,
Die einzige CSS-Lösung, die mir einfiele, wäre eine solche, bei der
der entsprechende DIV aus dem Textfluss genommen würde.
Nur so nimmt der DIV nicht die komplette Breite des Elternelements an
und könnte per min-width auf de gewünschte Breite gebracht werden.display:inline sollte dazu ja eigentlich schon reichen.
wenn darauf wieder ein inline-element folgt, dann ggf. dieses als block formatieren oder noch ein element einfügen, welches den umbruch wieder herstellt.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
-
-
-
-
-