Problem mit automatischem Zeilenumbruch

C

chriss_2oo4

Erfahrenes Mitglied
Ich stelle in einer Tabellenspalte Informationen in folgendem Format dar (Leerzeichen anstatt Punkte)

[BILD] [TEXT]
...[BILD] [TEXT]
......[BILD] [TEXT]


In HTML habe ich das einfach wie folgt gemacht:

<div> <img/> text </div>

Wenn der Text nun zu lang für die Spalte ist, wird ja automatisch die Zeile umgebrochen. Leider fängt der Text dann in der nächsten Zeile unterhalb des Bildes und nicht unterhalb des Textbeginns an.


Bei mir:

[BILD] [TEXT IST ZU
LANG] (punkte sollen nicht angezeigt werden)
...[BILD] [TEXT]
......[BILD] [TEXT]


anstatt (so wie's sein soll):

[BILD] [TEXT IST ZU
..............LANG]
...[BILD] [TEXT]
......[BILD] [TEXT]

Wie kann ich soetwas bewerkstellingen?

Beste Grüße
chriss
 
Zuletzt bearbeitet:
Du könntest es mit Paragraphen lösen und den Abstand, denn du bisher mit Leerzeichen erzeugt hast, mit einer Definition des Außenrandes (links) ersetzen. Somit verschachtelst du die Paragraphen und erzeugst somit immer mehr Abstand zur linken Seite. Schau mal hier nach!
 
Hi,

deine Wunschvorstellung lässt sich nicht mit der Auszeichnungssprache HTML realisieren, dafür aber mit der Formatierungssprache CSS.

Hierfür erhält das Bild die CSS-Eigenschaft float:left, damit es vom nachfolgenden Element rechtsseitig umflossen wird, und der Text wird z.B. in ein <p>-Element eingebettet, das einen linken Außenabstand margin-left erhält, der mindestens der Breite des Bildes entspricht. Soll zwischen Bild und Text noch ein Abstand bestehen, erhöht sich der margin-left-Wert entsprechend.

mfg Maik
 
Eleganter wäre eine Möglichkeit mit Aufzählungen: Hier. Da kann man auch eigene Bilder als Aufzählungszeichen definieren. Das bezieht sich auf die HTML-Elemente ul, bzw. ol.
 
Hi,

vielen Dank für eure sehr flinke Hilfe :).

Muss ich dann aber nicht irgendwie das float: left wieder "beenden".

Gedacht hab ich's mir etwa so:


Code: 
<div id="x">
  <img width="16" height="16".../> 
  <p id="y"> text </p>
</div>


Code: 
div#x
{
  float: left;
}

p#y
{
  margin-left: 20px;
}

Funktionieren tut's leider nicht, weil nun alle einträge nebeneinander sind!?


Grüße
Chriss
 
Setz es mal so um:

HTML: 
<div class="x">
  <img width="16" height="16".../> 
  <p class="y"> text </p>
</div>
CSS: 
div.x {
clear:left; /* möglichen Umfluß wegen float:left abbrechen */
}
div.x img {
float:left;
}
div.x p.y {
margin-left:20px;
}

Deine ID-Bezeichner hab ich hier gegen Klassenbezeichner getauscht, da ein ID-Bezeichner im HTML-Dokumentbaum nur einmal vergeben werden darf, du aber das <div>- u. <p>-Element darin mehrfach verwendest.

mfg Maik
 
Sorry, ich bin bisher garnicht dazugekommen deinen Vorschlag auszuprobieren. Habs gerade versucht und es funktoniert auch fast :).

Der Zeilenumbruch ist korrekt, leider werden die Leerzeichen vor dem Bild nicht mehr angezeigt, d. h. es wird einfach alles Linksbündig angezeigt.

Ich hab versucht die Spaces vor dem div zu plazieren und innerhalb des divs, egal wie es wird immer alles linksbündig angezeigt.

Die leerzeichen füge ich über ein Funktion, die mir die passende anzahl von Leerzeichen (&nbsp) zurück gibt, ein.


Wie kann man das Problem lösen?



Best Grüße
Chriss
 
Hi,

nutze einfach entweder margin-left (linker Außenabstand) für das <img>-Element, oder padding-left (linker Innenabstand) für das umschliessende <div>-Element.

Dann klappt's auch mit dem Einrücken des Grafikelements, das durch die float:left-Regel nun "Block-Level-Charakteristika" besitzt, in seinem Verhalten also einem Block-Element ähnelt, und sich daher durch die geschützten Leerzeichen (&nbsp;) nicht mehr, wie noch zuvor als "reines" Inline-Element, im Textfluß verschieben lässt.

mfg Maik
 
Hi,

so habe ich mir das auch gedacht, aber da jedes element einen dynamischen Abstand (also eine unterschiedliche Anzhal von leerzeichen) hat, geht das nicht mit dem statischen Aussenabstand.


Grüße
Chriss
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück