Automatisch Textumbruch erzeugen

MasterOfDsaster

Guten Abend!

Hier mal ein Screenshot des Problems:
http://img3.imagebanana.com/img/e9rl6228/problem.jpg

Ich hätte gerne, dass der Text nach der Breite des Bildes umgebrochen wird, also eine neue Zeile anfängt. Die Bilder sind unterschiedlich groß.

Ausschnitt aus dem HTML-Abschnitt:

Code

Betracht. Man fand van Gogh am nächsten Morgen, bewusstlos und geschwächt vom Blutverlust. Gauguin benachrichtigte Theo und fuhr nach Paris.</p>
<div id="g">
  <div id="gallery_lt""><img src="img/1888_die_bruecke_von_langlois_in_arles_mit_dame_mit_regenschirm_small.jpg" /></div>
  <div id="gallerycontent">Die Brücke von Langlois in Arles mit Dame mit Regenschirm, 1888</div></div>
<p>Der Vorfall gilt als erste Manifestation einer Erkrankung, die damals, wohl fälschlich, als Epilepsie diagnostiziert wurde.

Ausschnitt aus dem CSS-Abschnitt:

Code

#g {
    border:2px solid #6a97a6;
    padding:5px;
    float:left;
    margin-right:10px;
    margin-bottom:10px;
}


#galleryimg {
    border:none;
    padding:0px;
    float:block;
    margin-right:0px;
    margin-bottom:0px;
    width:100%;
}


#gallerycontent {
    border:none;
    padding:0px;
    float:block;
    color; #000;
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
}

Alles anzeigen

Würde mich sehr über eure Hilfe freuen!

Mfg, Jonas

sejuma

Da gibt es sicher verschiedene Ansätze.

Du könntest den Text manuell umbrechen, indem du im Quelltext an der entsprechenden Stelle ein <br> bzw. je nach Doctype ein <br /> einfügst.

Zsweite Variante:
Du schreibst den Text in einen Absatz und definierst für diesen eine Klasse mit Breitenangabe, z.B. so:
CSS:

Code

.breite250 {width: 250px;}

HTML:

Code

<p class="breite250">Text...</p>

Eine automatisierte Lösung in Abhängigkeit zur Bildbreite ist möglicherweise mit PHP machbar. Da kenn ich mich aber nicht mit aus.

synaptic

mmh also mir fällt da akut ne javascript-lösung zu ein, in der du die bildbreite ermittelst und dem div des textes diese breite mitgibst..

MasterOfDsaster

Vielen Dank für eure schnellen Antworten!

sejuma:
Manuell wäre für mich nur ne Notlösung

synaptic:
Diese Lösung würde mich sehr interessieren! Kann leider null Javascrypt, wie würde der Code denn aussehen?

Mfg, Jonas

synaptic

Code

<script type="text/javascript">
    function sizeIt(){
var parent = document.getElementById("gallery_lt");
var target2 = document.getElementById("gallerycontent");
var picsize = parent.childNodes[0].width;
target2.style.width= picsize +"px";
}
    </script>
</head>


<body onload="sizeIt();">

Alles anzeigen

ersetz mal das start-tag vom body mit dem script und dem start-tag mit eventhandler

koslowski

Moin,

Zitat von MasterOfDsaster

synaptic:
Diese Lösung würde mich sehr interessieren! Kann leider null Javascrypt, wie würde der Code denn aussehen?

warum willst du irgendwas anwenden von dem du null Ahnung hast, dann weißt du ja gar nicht was du tust.
Zumal JS nicht überall zur Verfügung steht.

Manuell kannst du nicht im Ernst als Notlösung betrachten, es ist das Einfachste und hinsichtlich der Usability das Beste.

Zitat

float:block;

Was soll das denn für eine Eigenschaft sein??

Alle gefloateten Elemente werden durch das Floaten automatisch zu Blockelementen, weil Float eine der Eigenschaften ist, die einen [url=http://www.communitymx.com/content/article.cfm?cid=6BC9D]Block Formatting Context[url] erzeugen.

Vielleicht solltest du dir erstmal die Basics aneignen, wenn du die nicht beherrscht steht dein Wissen auf tönernen Füßen.

koslowski

Tags