[CSS] Problem mit DIV-Boxen

brochhau

brochhau

Member
ID: 31314
L
3 März 2008
19
1
Hallo zusammen,

ich möchte auf einer Seite Bilder in den Text einbinden (Text soll Bilder umfließen, was auch einwandfrei klappt). Unter die Bilder soll eine Bildunterschrift.

Da die Bilder alle unterschiedlich breit sind, gebe ich keine Breite der Box an.

Wenn der Text unter den Bildern jetzt breiter ist, wie das Bild, wird die Box dementsprechend breiter. Jetzt dachte ich mir, ich kann das mit einer verschachtelten Box lösen.

Bloß: wie schaff ich das jetzt, dass die innere Box maximal so breit ist, wie die äußere?
 
läuft auf deinem Server PHP? Dann kannst du dir die Bilder mit PHP einbinden und die Bildbreite auslesen und als DIV-Breite setzen! Den code dafür hab ich leider gerade nicht zur hand.

Gruß Gogi
 
Mit Javascript könnte man es relativ sauber lösen. Eine Lösung mit CSS ist in meinen Augen mit heutigen Mitteln nicht möglich.
 
klausschreiber schrieb:
funktioniert "width: 100%;" oder "max-width: 100%;" nicht?
Zum Vergrößern anklicken....

Dann wird die Seitenbreite genommen.

HTML: 
<div id="gesamtcontainer" style="position:absolute;">
<img src="tanzmaus.png" alt="Angezeigtes Bild">
<div id="unterschrift" style="position:absolute; right:0px;">
<div id="blindgrafik" style="float:left;"><img src="blind.gif" width="1" height=10>
</div>
Das hier ist die Bildbeschreibung, die eigendlich umbrechen sollte wenn sie an das DIV mit dem blind.gif stößt... Es kann aber auch sein das ich da gewaltig auf dem Holzweg bin.
</div>

Vom Verständniss her ist die Position der blind.gif fest definiert und somit sollte die Bildunterschrift umbrechen...

eaxo
 
Das kann so auch nicht hinhauen. Die größe des äussern DIVs bestimmt das Bild oder der Text. Also hängt das Pixel an der falschen stelle, und mit position: absolute; kanns auch nix werden, da bricht kein Text um.
 
Ah ja, die Bildunterschrift und das blind.gif nomal in einen seperaten Container packen :-?



Ich teste das mal - aber wie oben schon geschrieben ist JS wohl einfacher...

eaxo

EDIT:
klappt im FF, nur der IE :mrgreen: schreibt die Bildunterschrift auf den Banner

HTML: 
<html>
<head>
</head>
<body>
<div id="gesamtcontainer" style="position:absolute;">
<img src="banner.gif" alt="Angezeigtes Bild">
 <div id="unterschrift" style="position:absolute; right:0px;">
  <div id="blindgrafik" style="float:left;"><img src="blind.gif" width="1" height=10> </div> Das hier ist die Bildbeschreibung, die eigendlich umbrechen sollte wenn sie an das DIV mit dem blind.gif stößt... Es kann aber auch sein das ich da gewaltig auf dem Holzweg bin.
 </div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
hmm ich versteh den fehler irgendwie nicht so ganz.

Du willst also z.B. Links ein Bild haben und direkt darunter eine Bildunterschrift. DANEBEN soll ein x-beliebiger Text stehen. Soweit so klar (oder auch nicht?).

Dann ist das doch relativ einfach:

HTML: 
<div id='umschliessend'>
  <span id='bildchen mit untertitel ;)'>
     <img src='' alt='' /><!-- ggf. mit Umbruch, also <br /> -->
     Dein Unterbildtitel
  </span>
  Restlicher Text ;)
</div>

Sry wenn ich jetzt ganz falsch liege, aber so verstehe ich das...

E: float: left; brauch man ja bei span nicht *gg*^^
 
Zuletzt bearbeitet:
Dank euch schon mal, werd das im Laufe der Woche alles mal testen :D

edit:
@Helo: den manuellen Umbruch will ich vermeiden - der Umbruch soll automatisch auf Bildbreite erfolgen
 
der umbruch ist nur für den untertitel ;)
nicht für den normalen text!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Zicklein444
Umfragen, technisches Problem
Antworten
3
Aufrufe
515
Zicklein444
Zicklein444
domino
Problem bei »Alle Cookies aktivieren.«
Antworten
1
Aufrufe
2K
klamm
klamm
Zurück
Oben