DIV Container wächst nicht mit IMG mit, IMG "fällt" raus

[Jill]

Hallo Ihr lieben,

ich habe ein Problem, dass ich ein Bild in einem CSS Element darstelle und das Bild, wenn es grösser ist als der CSS Container, unten heraussteht und dabei sollte das CSS auch grösser werden, so wie es z.B. eine Tabelle so schön macht.

Ich finde da keine passende Lösung, was mache ich da am besten?

Für jeden Tipp dankbar,
Jill

[Ashura]

Hallo Jill.

ich habe ein Problem, dass ich ein Bild in einem CSS Element darstelle

Es gibt in CSS keine Elemente.

und das Bild, wenn es grösser ist als der CSS Container, unten heraussteht

Es gibt in CSS keine CSS Container. Ich habe den Verdacht, dass du von einem DIV-Element redest; habe ich Recht?

und dabei sollte das CSS auch grösser werden,

Wie bitte?

so wie es z.B. eine Tabelle so schön macht.

Aha, du möchtest also, dass sich das DIV-Element dem Inhalt entsprechend ausdehnt, richtig?

Ich finde da keine passende Lösung, was mache ich da am besten?

Einen Link zu einer Beispielseite hier hinein setzen, damit wir uns den Code anschauen können. Im Moment können wir nur Rätsel raten.

Gruß, Ashura

[Kamil Garbacz]

Hallo Jill.

ich habe ein Problem, dass ich ein Bild in einem CSS Element darstelle

Es gibt in CSS keine Elemente.

und das Bild, wenn es grösser ist als der CSS Container, unten heraussteht

Es gibt in CSS keine CSS Container. Ich habe den Verdacht, dass du von einem DIV-Element redest; habe ich Recht?

und dabei sollte das CSS auch grösser werden,

Wie bitte?

so wie es z.B. eine Tabelle so schön macht.

Aha, du möchtest also, dass sich das DIV-Element dem Inhalt entsprechend ausdehnt, richtig?

Ich finde da keine passende Lösung, was mache ich da am besten?

Einen Link zu einer Beispielseite hier hinein setzen, damit wir uns den Code anschauen können. Im Moment können wir nur Rätsel raten.

Gruß, Ashura

Yuhuu! Endlich jemand, der das gleiche Prob hat wie ich. Habe erst vor ein paar Stunden hier rein gepostet, aber keiner wusste was ich meine! Bei mir "wächst" DIV-Container auch nicht mit, so wie es normalerweise Tabellen machen. Hier der Link zu meinem Post:

http://forum.de.selfhtml.org/?t=109496&m=684240

Eine Lösung wäre cool, ich sitze schon seit 2 Tagen da dran!

Meine Page:

http://www.helpmode.de/mypage/page.html

Hier ist zwar kein IMG drin, aber trotzdem kann man, wenn das fenster verkleinert wird, sozusagen ins nichts scrollen. Und alle dem DIV-Container hinzugehörende Elemente hören auf.

[Ashura]

Hallo Kamil.

Yuhuu! Endlich jemand, der das gleiche Prob hat wie ich. Habe erst vor ein paar Stunden hier rein gepostet, aber keiner wusste was ich meine!

Weil deine Problembeschreibung sehr zu wünschen übrig lies.

Hier der Link zu meinem Post:

http://forum.de.selfhtml.org/?t=109496&m=684240

Nein, das ist kein Link. Das ist einer: </faq/#Q-19>

Meine Page:

http://www.helpmode.de/mypage/page.html

Siehe oben.

Hier ist zwar kein IMG drin, aber trotzdem kann man, wenn das fenster verkleinert wird, sozusagen ins nichts scrollen. Und alle dem DIV-Container hinzugehörende Elemente hören auf.

Bitte lies dir noch einmal _genau_ durch, was Detlef G. geschrieben hat.

Gruß, Ashura

[Jill]

Ja, ich bin sehr gestresst, daher mein Verschreiber, ich meine natürlich DIV Elemente und keine CSS Elemente. Aber dass Du so darauf herumreiten musst finde ich ein wenig übertrieben.

Naja, trotzdem Dank für Deinen Hilfeversuch.

Das Elternelement ist übrigens über position:absolute gesetzt, das lässt sich leider nicht verhindern, weil die ganze Seite immer zentriert im Browser erscheinen soll. Also nochmal zur Anschauung:

|---------------|
|               |______ Website im Browser (zentriert)
|  |--------|   |
|  | |----| |___|______ DIV Element
|  |-|    |-|   |
|    |    |     |
|    |----|_____|______ Image, welches aus DIV herausragt

Vielen Dank für jede Hilfe,
Jill

[Ashura]

Hallo Jill.

Ja, ich bin sehr gestresst, daher mein Verschreiber, ich meine natürlich DIV Elemente und keine CSS Elemente. Aber dass Du so darauf herumreiten musst finde ich ein wenig übertrieben.

Ich möchte nur die korrekten Begriffe vermitteln, mehr nicht.

Das Elternelement ist übrigens über position:absolute gesetzt, das lässt sich leider nicht verhindern, weil die ganze Seite immer zentriert im Browser erscheinen soll.

Dafür bedarf es aber keiner absoluten Positionierung.
Diesen Effekt kann man auch wunderbar mittels margin:auto; bzw. (für den IE) mittels text-align:center; für das betreffende Element bewirken. Alles, was sich in diesem Element befindet, benötigt dann natürlich wieder ein text-align:left/right;. (Ihr seht, Webgestaltung in Anwesenheit des IE macht weniger Spaß.)

Also nochmal zur Anschauung:

|---------------|
|               |______ Website im Browser (zentriert)
|  |--------|   |
|  | |----| |___|______ DIV Element
|  |-|    |-|   |
|    |    |     |
|    |----|_____|______ Image, welches aus DIV herausragt

Ich bitte dich um Quellcode und kein ASCII-Art, besser jedoch wäre ein Link zu einer Beispielseite.

Gruß, Ashura

[Jill]

Hallo,

nochmal danke für Eure Tipps.

Ich habe das Problem nun isolieren können, es liegt an der "left" Eigenschaft des img Tags. Ich kann das auch anders lösen, aber mich würde nun interessieren, warum es so ist.

Hier ein Beispielcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.box {
background-color: #999999;
width:500px;
}
-->
</style>
</head>

<body>
<div class="box">
<img src="http://www.spiegel.de/static/sys/logo_120x61.gif" height="500" width="100" align="left">
Test
</div>
</body>

</html>

Gruß, Jill

[Ingo Turski]

Hi,

Ich habe das Problem nun isolieren können, es liegt an der "left" Eigenschaft des img Tags. Ich kann das auch anders lösen, aber mich würde nun interessieren, warum es so ist.

diese "left-Eigenschaft", die Du unschön über

<img src="http://www.spiegel.de/static/sys/logo_120x61.gif" height="500" width="100" align="left">

definierst, entspricht der CSS-Anweisung float. Und genauso wie bei absoluter Positionierung wird hierdurch das Element aus dem Fluß genommen und beeinflußt dadurch das Elternelement nicht mehr. Bei float hast Du jedoch im Gegensatz zu position:absolute noch die Möglichkeit, den Elementenfluß über clear wieder herzustellen.

freundliche Grüße
Ingo

[Candid Dauth]

Heißa, Jill,

Das Elternelement ist übrigens über position:absolute gesetzt, das lässt sich leider nicht verhindern, weil die ganze Seite immer zentriert im Browser erscheinen soll.

Das lässt sich auch anders realisieren.

Zu deinem Problem:
Das Elternelement dehnt sich automatisch aus, solange du ihm kein height oder max-height zugewiesen hast. (Ausgenommen Internet Explorer)

Caramba!
Grüße aus Biberach Riss,
Candid Dauth

[Detlef G.]

Hallo Jill

Das Elternelement ist übrigens über position:absolute gesetzt, das lässt sich leider nicht verhindern, weil die ganze Seite immer zentriert im Browser erscheinen soll. Also nochmal zur Anschauung:

|---------------|
|               |______ Website im Browser (zentriert)
|  |--------|   |
|  | |----| |___|______ DIV Element
|  |-|    |-|   |
|    |    |     |
|    |----|_____|______ Image, welches aus DIV herausragt

Sehr schön, damit können wir uns vorstellen, wie es bei dir aussieht.

Da du uns immer noch nicht verrätst, wie dein Quelletext aussieht, kann ja
das heitere Rätselraten weitergehen.

Wie ist das Bild positioniert?
Welche Höhe ist für den Container angegeben?
Wie sind die Elemente verschachtelt?
Welche, _genau_ welche CSS-Eigenschften hat welches Element?
usw.

Auf Wiederlesen
Detlef

[HaThoV]

Das Elternelement ist übrigens über position:absolute gesetzt

Dann mußt Du das Kindelement (img) auf "relative" setzen, weil es sonst "absolute" erbt und aus dem Elementfluß hupft.

Hghzk
T.

[MudGuard]

Hi,

Das Elternelement ist übrigens über position:absolute gesetzt
Dann mußt Du das Kindelement (img) auf "relative" setzen, weil es sonst "absolute" erbt und aus dem Elementfluß hupft.

Unsinn. position wird nur dann vererbt, wenn explizit der Wert inherit angegeben wird. Defaultwert ist static.

cu,
Andreas

[HaThoV]

Unsinn. position wird nur dann vererbt, wenn explizit der Wert inherit angegeben wird. Defaultwert ist static.

Blanke Theorie.

cu,
Andreas

mfg
T.

[MudGuard]

Hi,

Unsinn. position wird nur dann vererbt, wenn explizit der Wert inherit angegeben wird. Defaultwert ist static.
Blanke Theorie.

Ja, Deine Behauptung ist blanke Theorie.

Siehe

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<style type="text/css">  
    #box1 { position:absolute; left:50px; top:30px; border:1px solid red; }  
    #box2 { position:absolute; left:150px; top:30px; border:1px solid red; }  
    #box2 p { position:absolute; }  
</style></head><body>  
    <div id="box1">  
        <p>TEST1</p>  
        <p>BLA</p>  
    </div>  
    <div id="box2">  
        <p>TEST2</p>  
        <p>BLA</p>  
    </div>  
</body></html>  

(unter http://temp.andreas-waechter.de/HaThoV.html zum Testen ne Zeitlang verfügbar).

Wie Du erkennen kannst, ist der Unterschied zwischen beiden divs (neben dem Wert für left) der, daß für das zweite div den Nachkommen explizit position:absolute ist.
Da nach Deiner Behauptung dies aber sowieso über Vererbung passiert, müßten die Boxen identisch aussehen (bis auf die Position und die 1 bzw. 2 im Text.

Meine Browser zeigen das dann aber doch deutlich unterschiedlich an (wie ja auch vom CSS-Standard her zu erwarten war):

cu,
Andreas