nicht angemeldet
Bild mit Unterschrift: Div ohne feste width-Angabe;Zeilenumbruch
Hallo liebe Leute,
ich würde mich gerne an euch wenden, weil ich mit meinem Latein am Ende bin:
Ich möchte Ein Bild mit einer Bildunterschrift beglücken, stoße aber dabei auf das Problem, dass ich dem Bild-umgebenden Div-Container keine feste width-Angabe mit auf den Weg geben möchte... Bisher sieht mein css-Code folgendermaßen aus:
.bildLinks, .bildRechts, .bildMaxi {
display:block;
}
.bildLinks {
float:left;
clear:left;
margin:0 6px 6px 0;
}
.bildRechts {
float:right;
clear:right;
margin:0 0 6px 6px;
}
.bildMaxi {
float:left;
clear:both;
margin:6px 0 6px 0;
}
.bildLinks #beschreibung, .bildRechts #beschreibung, .bildMaxi #beschreibung {
background-color:#F4F4F4;
padding:3px;
float:left;
font-size:10px;
border:1px solid #cccccc;
border-top:0;
width:auto;
}
<div class="bildLinks"><img /><span id="beschreibung">Eine lange lange Bildbeschreibung, welche sich nicht umbrechen lässt</span></div>
Es scheint mir, dass ich ohne feste Containergröße keinen Zeilenumbruch im Beschreibungs-span erwirken kann...
Es bringt mich wirklich zur Verzweiflung...
Weiß jemand von euch einen Rat?
Also ich bin guter Hoffnung.
Vielen Dank schonmal,
Gruß Micha
-
Es scheint mir, dass ich ohne feste Containergröße keinen Zeilenumbruch im Beschreibungs-span erwirken kann...
Es bringt mich wirklich zur Verzweiflung...
Weiß jemand von euch einen Rathttp://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
blockverhalten ohne fixe breite und sogar noch mit textumfluss - was will man bei in text eingebettete bilder mehr?und am rande: bildlinks und bildrechts sind keine gute klassenenamen ;)
-
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
blockverhalten ohne fixe breite und sogar noch mit textumfluss - was will man bei in text eingebettete bilder mehr?und am rande: bildlinks und bildrechts sind keine gute klassenenamen ;)
Hallo, danke schonmal für die Antworten.
Also in dem oben angeführten Beispiel hat das <h1>-Element sehrwohl eine fixe Breite...
Der Grund, warum ich dem <div>-Container keine feste Breite geben möchte, ist, dass die Bilder dynamisch erzeugt werden und ich global eine Standard-Bildbreite angegeben habe, falls dem Bilderzeugungsscript keine Breite mitgeteilt wird. Nach dem Erzeugen des Bildes und der Umwandlung von BB-Tags wird der Text fest in eine HTML-Datei geschrieben, heißt, ich könnte nur durch erneutes Erzeugen der Datei, den generierten Text wieder ändern.
Wenn ich nun aber in eben jenem Text meine Bildbreite stehen habe, beschneide ich mich der Möglichkeit, die globale Bildbreitenangabe zu verändern.Hm, ja, ich bemerke gerade, dass meine Erläuterungen glaube ich sehr unverständlich ist ;)
Na wie gesagt, über eine schöne CSS Lösung würde ich mich sehr freuen - falls es eine gibt.
Vielleicht hat ja jemand noch eine Idee.
Ach ja, und warum sind bildLinks und bildRechts keine guten Klassennamen? :)
Vielen Dank für die Hilfe,
Gruß Micha
-
Also in dem oben angeführten Beispiel hat das <h1>-Element sehrwohl eine fixe Breite...
das spielt da eigentlich keine rolle
Hm, ja, ich bemerke gerade, dass meine Erläuterungen glaube ich sehr unverständlich ist ;)
du willst bilder mit bildunterschriften die im textfluss liegen aber durch die variable breite des bilds bestimmt werden?
sowas wie wikipedia zb hat http://de.wikipedia.org/wiki/Hirnmetastase
Na wie gesagt, über eine schöne CSS Lösung würde ich mich sehr freuen - falls es eine gibt.
Vielleicht hat ja jemand noch eine Idee.
<div class="bildbildbox stil1">
<a href="/example.jpg"><img src="/example.png" alt="example" /></a>
<p>lorem ipsum</p>
</div>Ach ja, und warum sind bildLinks und bildRechts keine guten Klassennamen? :)
klassennamen sollen nicht das derzeitige aussehen von inhalten repräsentieren, darum sind left und right nicht gut
definiere die klasse zb "bildbox" der gibts du alle nötigen formatierungen die sie braucht - mit der klasse "stil1" bzw "stil2" definierst du dann den rest, der sie unterscheidet - zb alle stil1 sind mit float: left ausgestattet, stil2 ist float:right und stil3 erzeugt einen eigenen absatz und is über die volle breite mit dem beschreibungstext rechts daneben, stil4 hat den text links daneben usw
----
vorgehensweise: fertige eine beispielseite an mit fliesstext wie du in haben willst, an der stelle wo das bild rein soll, füge den oberen codeschnipsel von mir ein
verlinke die seite hier und zeige dann, woran du scheiterst
-
-
-
Hallo Micha,
ich wüsste so auch keine Möglichkeit wie das rein technsich funktionieren könnte.
Was hält dich davon ab die Größe über style mitzugeben? Selbst wenns dynmisch sein soll, kannst du ja über php z.B., die Bildgrößen auslesen und entsprechend für z.B. style="width: 200px;" dort eintragen lassen...Der Zeilenumbruch kann ja nur anhand von ner Begrenzung erfolgen, so z.B die Breite. span ist ein Inline-Element und richtet sich daher nach der äußeren Umgebung.
-
Hallo Micha,
mit Javascript geht es (hatte mich auch interessiert):
<div id=schmal class='li bo'>
<p><img id=schmal_img src='img/logo.jpg'></p>
Eine lange und sehr ausführliche Bildunterschrift Eine lange und sehr ausführliche Bildunterschrift Eine lange und sehr ausführliche Bildunterschrift
</div>
<p>Und hier umgebender Text Und hier umgebender Text Und hier umgebender Text Und hier umgebender Text
Und hier umgebender Text Und hier umgebender Text Und hier umgebender Text Und hier umgebender Text Und hier umgebender Text
Und hier umgebender Text Und hier umgebender Text Und hier umgebender Text</p><script type="text/javascript">
document.getElementById('schmal').style.width = document.getElementById('schmal_img').width;
</script>class li = links, bo = border
Kalle
-
Hallo,
Tipp: Setze die Breite von der Beschreibung auf 0 und
overflow:visible;. Rahmen oder ähnliches der Beschreibung lassen sich allerdings nicht mehr angeben.Gruß