nicht angemeldet
schlicht: Textumfluss bei Bildern
Gunnar Bittersmannhallo!
beim vorbeilaufen lassen von etwas fliesstext an bilder bin ich auf ein hindernis gestossen. Ein kurzes Beispiel:
- Bild ~ Text
+++ ~~~~~~~~~~~~~
- + ~~~~~~~~~~
+++ ~~~~~~~~~~~
+++ ~~~~~~~~~~~
- + ~~~~~~~~~~
+++ ~~~~~~~~~~~~
unterschiedliche breite bilder und trotzdem soll der text an einem gleichem x wert anfangen.
* links gefloated sind zwar die bilder bündig im fliesstext, aber ich bekomme den abstand zum text nicht hin. durch die unterschiedliche breite wird der text ja mit nach rechts bzw. links verschoben.
* mit abenteurlichen padding/margin kombinationen habe ich schon erfolglos gespielt. ich bekomme die bilder nicht aus dem fluss heraus.
eine hürde ist dabei, dass die imgs innerhalb der p-tags liegen:
<p class="vertikal">
<img src="gfx/bild.gif" width="65" height="76" />text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
tabelle könnte ich auch machen der einfachheit halber, aber ich möchte ja lernen!
wie kann ich die bilder in den einzelnen p-tags linksbündig positionieren und dabei eine achse für den text erhalten?
-
hi,
unterschiedliche breite bilder und trotzdem soll der text an einem gleichem x wert anfangen.
dann wäre es m.E. am einfachsten, den text selber in ein weiteres element zu packen, und dieses mit margin-left entsprechend auf abstand zu halten.
eine hürde ist dabei, dass die imgs innerhalb der p-tags liegen:
entweder <img><p>...</p>, oder <p><img><span>...</span></p> wären m.E. geeignete strukturen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi
dann wäre es m.E. am einfachsten, den text selber in ein weiteres element zu packen, und dieses mit margin-left entsprechend auf abstand zu halten.
eine hürde ist dabei, dass die imgs innerhalb der p-tags liegen:
entweder <img><p>...</p>, oder <p><img><span>...</span></p> wären m.E. geeignete strukturen.
danke für deinen hilfeversuch. bedingung war aber ohne weitere (sinnfreie?) tags auszukommen =)
habs jetzt so, dank gunnar, gelöst:
.vertikal { margin-left: 126px; } .vertikal img { position: absolute; left: 230px; }
-
-
Hi dante,
wie kann ich die bilder in den einzelnen p-tags linksbündig positionieren und dabei eine achse für den text erhalten?
p { margin-left: 100px; /* an max. Bildbreite anpassen */ } p img { position: absolute; left: 10px; }Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
p {
margin-left: 100px; /* an max. Bildbreite anpassen */
}
p img {
position: absolute;
left: 10px;
}> wow. danke. damit klappt das super. die absolute positionierung hebt die bilder aus dem dokumentfluss. ~~~css .vertikal { margin-left: 126px; } .vertikal img { position: absolute; left: 230px; }-
wow. danke. damit klappt das super. die absolute positionierung hebt die bilder aus dem dokumentfluss.
Das macht float auch. Deswegen hätte ich die Bilder floaten lassen, nachdem ich sie VOR den Textabsatz gestellt hätte (wie wahsaga das schon vorschlug) und den Absätzen einfach mit margin-left einen Abstand zum linken Rand gegeben hätte.
-
Das macht float auch. Deswegen hätte ich die Bilder floaten lassen, nachdem ich sie VOR den Textabsatz gestellt hätte (wie wahsaga das schon vorschlug) und den Absätzen einfach mit margin-left einen Abstand zum linken Rand gegeben hätte.
Hi Efchen,
Dazu müsste man aber die Dokumentstruktur ändern. Wenn die Bilder zum Absatz gehören, sollten sie doch ruhig auch innerhalb des Absatzes stehen. Zumal sie außerhalb evtl. gar nicht direkt erlaubt wären:
~~~html <body>
<img/>
<p/>
<img/>
<p/>
</body>ist nicht Strict. (Womit nicht die fehlenden Attribute gemeint sind.) Gibt es irgendwelche Probleme mit der von mir vorgeschlagenen absoluten Positionierung? Ist es so, dass alle UAs bei fehlender Angabe zu top das Element nur horizontal verschieben, es in der Vertikalen dort belassen, wo es ohne absolute Positionierung auch wäre? Ergänzt werden sollte für die Textabsätze eine min-height-Angabe in Höhe der jeweiligen Bildhöhe plus gewünschtem Minimalabstand. So wird die bei Schriftgrößen-/Textabstzbreiten-Kombinationen evtl. auftretende Überlappung der Bilder vermieden, in Browsern[tm] jedenfalls. Live long and prosper, Gunnar -- „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Gibt es irgendwelche Probleme mit der von mir vorgeschlagenen absoluten Positionierung?
getestet habe ich es jetzt in alle mayor-browsern und seh da kein prob.
Ist es so, dass alle UAs bei fehlender Angabe zu top das Element nur horizontal verschieben, es in der Vertikalen dort belassen, wo es ohne absolute Positionierung auch wäre?
was ist nen UA?
die vertikale startposition der elemente bleibt erhalten, die horizontale position ist verschoben. ob das _offiziell_ richtig ist wenn keine top angabe gemacht wurde, weiss ich nciht.Ergänzt werden sollte für die Textabsätze eine min-height-Angabe in Höhe der jeweiligen Bildhöhe plus gewünschtem Minimalabstand. So wird die bei Schriftgrößen-/Textabstzbreiten-Kombinationen evtl. auftretende Überlappung der Bilder vermieden, in Browsern[tm] jedenfalls.
mmh. ne "sicherung" falls die texte in den absätzen zu kurz sind um die bildhöhe auszufüllen. gute idee.
lg
dante-
Hi dante,
mayor-browsern
Bürgermeister?
was ist nen UA?
user agent, hier also auf neudeutsch Browser.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
was ist nen UA?
user agent, hier also auf neudeutsch Browser.Auch laut der von Dir verlinkten Seite "Client". Nicht "Browser" :-)
-
user agent, hier also auf neudeutsch Browser.
Auch laut der von Dir verlinkten Seite "Client". Nicht "Browser" :-)
Hi Efchen,
Du hattest das „hier“ überlesen? ;-)Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Du hattest das „hier“ überlesen? ;-)
Oh. :-)
Sieht so aus, ja.Das sind, zugegeben, diese pauschalen Meckerantworten. Die verteidige ich aber damit, dass so viele Leute denken, es gäbe nur Browser. ;-)
-
-
-
-
-
-
-
-