nicht angemeldet
Aufzählung neben Bild
Hi!
Ich dachte, das waere eine Standardfrage, finde aber irgendwie
nix mit Google...
Wenn ich eine Aufzählung habe (ganz normal mit ul und li,
per CSS nur ein topmargin eingestellt) und diese kommt
neben einem Bild zu liegen (ganz normal mit align=left
und per style ein margin-right eingestellt), dann
- werden die Listenpunkte unter (IE) oder ueber (Mozilla)
das Bild gelegt. Konkret: Der (Standard-) Einzug wird
nicht gemacht, sondern im Gegenteil die Listenzeilen
werden ausgerueckt, so dass sie sich mit dem Bild ueber-
schneiden.
Wie kommt das und was tun dagegen?
Leider kein Beispiel online, Code wie folgt:
***snip***
<P><img align="left" src="hkz.jpg" width="164" height="152" border="0" alt="" style="margin-right:10px" >Das Holzkompetenzzentrum Rheinland setzt sich zur Aufgabe:</P>
<ul>
<li>den Holzabsatz zu fördern;</li>
<li>Programme und Maßnahmen durchzuführen; </li>
<li>Holzanbieter und Verbraucher auf
regionaler Ebene zu vernetzten;</li>
<li>die Öffentlichkeit über die Zusammenhänge
von Wald - Holz - und Naturschutz aufzuklären.</li>
</ul>
***snap***
Herzliche Gruesse
Nicola
-
Hallo Nicola,
workaround: du könntest ja eine <table> zur positionierung versenden, dann dürfte es gehen.
Gruß Martin
-
Hi!
workaround: du könntest ja eine <table> zur positionierung versenden, dann dürfte es gehen.
Jipp, koennte ich. Ich wuerde nur gern wissen, wie
man es denn 'richtig' macht. Es ist nicht das erste
Mal, dass es mir begegnet, meist hab ich die Bilder
einfach nach rechts geschoben in diesen Faellen - so
als 'Workaround' ;-)Aber ich denke doch, dass es auch eine vernuenftige
Methode geben wird, die das Ganze loest?!Herzliche Gruesse
Nicola
-
ich denke hierbei handelt es sich um einen ie bug -> mir ist keine lösung dafür bekannt...
lg
woz
-
Hi!
ich denke hierbei handelt es sich um einen ie bug -> mir ist keine lösung dafür bekannt...
...den Mozilla und Opera brav mitmachen? KANN das wirklich wahr
sein? Und das ist noch bei keinem aufgeschlagen? *megastaun*Herzliche Gruesse
Nicola
-
-
-
-
schon merkwürdig...habs selbst mal ausprobiert
wenn du das bild in eine tabelle ( align="left") packst funktioniert es aber...oder du machst direkt zwei zellen und schiebst die aufzählung in die rechte spalte
-
hi,
- werden die Listenpunkte unter (IE) oder ueber (Mozilla)
das Bild gelegt. Konkret: Der (Standard-) Einzug wird
nicht gemacht, sondern im Gegenteil die Listenzeilen
werden ausgerueckt, so dass sie sich mit dem Bild ueber-
schneiden.
hast du schon mal versucht, alles konsequent mit CSS zu machen (also statt align für das bild, dieses mit float wie gewünscht zu positionieren), und dann margin für die liste anstatt für das bild zu setzen?
gruss,
wahsaga - werden die Listenpunkte unter (IE) oder ueber (Mozilla)
-
Hallo!
Also ganz verstehe ich Dein Posting nicht, aber ich glaube, Du möchtest, daß Deine Liste in etwa so aussieht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
img {width:88px;height:31px;float:left;padding-right:10px;}
ul {padding-left:120px;}-->
</style>
</head>
<body>
<p><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" >Das Holzkompetenzzentrum Rheinland setzt sich zur Aufgabe:</p>
<ul>
<li>den Holzabsatz zu fördern;</li>
<li>Programme und Maßnahmen durchzuführen; </li>
<li>Holzanbieter und Verbraucher auf regionaler Ebene zu vernetzten;</li>
<li>die Öffentlichkeit über die Zusammenhänge von Wald - Holz - und Naturschutz aufzuklären.</li>
</ul>
</body>
</html>Beste Grüße
Viennamade-
Hi!
Also ganz verstehe ich Dein Posting nicht, aber ich glaube, Du möchtest, daß Deine Liste in etwa so aussieht:
JA! Genau so.
Nur: ich kann doch nicht im Stylesheet fuer jedes einzelne Bild und
fuer jede Aufzaehlung, die (das ist ja auch browserabhaengig) grad
mal neben das Bild rutscht ein eigenes Style aufmachen!
Oder bin ich grad extrem begriffsstutzig?Der Hintergrund ist, dass ich momentan versuche, Inhalte in eine
Seite 'huebsch' zu setzen, um Styles zu finden, die dann fuer eine
CMS-gesteuerte Site herhalten muessen. Ich brauche also 'robuste'
Styles und moeglichst auch nicht allzu viele.Hab also ein Bild mal rechts, mal links - soweit ok. Aber die Bilder
werden ja nun nicht immer gleich gross sein und mal wird eine Liste
neben einem Bild stehen, noch oefter aber werden Listen allein
stehen...Ich hab uebrigens ausprobiert, ob align oder float was aendert
an dem Effekt: Noe.
<img style="float:left" src="hkz.jpg" width="164" height="152"
border="0" alt="" style="margin-right:10px" >
ergibt dieselbe Ueberschneidung wie dasselbe mit align="left"Und es geschieht halt auch im Mozilla, dort werden die li-Bullets
halt auf das Bild 'gemalt', im IE (6.0) drunter. Interessanterweise
ist ja auch nur die Liste betroffen, der normale (<p>-)Absatz
rutscht ja korrekt _neben_ das Bild.Also, dass ist doch ein Standardgeschehen in HTML, dass verschiedene
Textabschnitte neben Bilder zu liegen kommen. Da muss es doch eine
Regelung geben, das Listen korrekt mitfliessen. Tatsaechlich macht
die Liste ja auch einen Step zur Seite - nur nicht weit genug(?)Herzliche Gruesse
Nicola
-
so gehts
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head><body>
<img src="" alt="" width="200" height="200" border="0" align=left>
<li>bla bla
<li>bla bla
<li>bla bla</body>
</html>-
hi,
so gehts
quatsch.
<body>
<img src="" alt="" width="200" height="200" border="0" align=left>
<li>bla blaseit wann darf ein <li> ohne vorhergehendes <ul> oder <ol> im body stehen?
gruss,
wahsaga-
hallo,
seit wann "darf" eine liste links in ein bild wandern?
martin-
Hi!
seit wann "darf" eine liste links in ein bild wandern?
Guter Konter! ;-)
Aber im Ernst, ich suche kein Workaround, dann setze ich das Bild wirklich lieber nach rechts. Ich kann einfach nicht glauben, dass es durch alle verbreiteten Browser hindurch ein Bug ist! Ich suche immer noch nach der 'korrekten Methode', die mir belegt, dass ich was falsch mache...
PS: Hab's mir jetzt zuhause mal mit meinem guten Konqui angeguckt und siehe da: Der macht den Bloedsinn nicht, sondern platziert die Liste korrekt _neben_ das Bild (inkl. Einrueckung). Dafuer machen es hier (KDE) Opera und Mozilla ebenfalls falsch ;-(
Herzliche Gruesse
Nicola
-
hi,
seit wann "darf" eine liste links in ein bild wandern?
Guter Konter! ;-)
nicht wirklich.
gruss,
wahsaga
-
-
-
-
-
-
-
Tach,
Wenn ich eine Aufzählung habe (ganz normal mit ul und li,
per CSS nur ein topmargin eingestellt) und diese kommt
neben einem Bild zu liegen (ganz normal mit align=left
und per style ein margin-right eingestellt), dannrichtig wäre die Formatierung per float
- werden die Listenpunkte unter (IE) oder ueber (Mozilla)
das Bild gelegt. Konkret: Der (Standard-) Einzug wird
nicht gemacht, sondern im Gegenteil die Listenzeilen
werden ausgerueckt, so dass sie sich mit dem Bild ueber-
schneiden.
Wie kommt das und was tun dagegen?
http://selfhtml.teamone.de/css/eigenschaften/listen.htm#list_style_position ist das, was du suchst. Und wie du siehst ist outside Standardeinstellung, weswegen, die Browser sich meiner Meinung nach richtig verhalten.
mfg
Woodfighter-
Moin!
http://selfhtml.teamone.de/css/eigenschaften/listen.htm#list_style_position ist das, was du suchst. Und wie du
Kannte ich.
siehst ist outside Standardeinstellung, weswegen, die Browser sich meiner Meinung nach richtig verhalten.
Ich moechte ja gar nicht, dass die Listenpunkte eingerueckt sind, sie sollen schon - normal - ausgerueckt sein - gegenueber dem Listentext. Was ich nur nicht verstehe ist, warum (neben dem Bild und NUR neben dem Bild) die gesamten Zeilen _gegenueber dem gesamten Textblock_ ausgerueckt - und damit IN das Bild geschoben werden:
<img src="http://home.debitel.net/user/geocaching/vorlagen/mozilla.gif" border="0" alt="">
Mozilla (aber IE und Opera machen dasselbe, nur werden die Bullets mal über, mal unter dem Bild gerendert)
Erwarten wuerde ich:
<img src="http://home.debitel.net/user/geocaching/vorlagen/konqui.gif" border="0" alt="">
KonquerorHerzliche Gruesse
Nicola
-
Tach,
Ich moechte ja gar nicht, dass die Listenpunkte eingerueckt sind, sie sollen schon - normal - ausgerueckt sein - gegenueber dem Listentext. Was ich nur nicht verstehe ist, warum (neben dem Bild und NUR neben dem Bild) die gesamten Zeilen _gegenueber dem gesamten Textblock_ ausgerueckt - und damit IN das Bild geschoben werden:
so jetzt habe ich interessehalber mal in der CSS2 Spezifikation (http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap12.html#heading-12.6.2�) nachgeschlagen. Dort heißt es:
outside - Die Markierungs-Box liegt außerhalb der Hauptblock-Box
und genau daß tut Gecko, es legt die Marker nach außerhalb, Konqueror macht es meiner Meinung nach auch nicht unbedingt falsch, bloß die Einrückung ist eine andere; bei Gecko ist sie negativ, bei Konqueror positiv.
Sieht man sich das Beispiel Bild beim w3c an, so sieht es aus wie im Mozilla, d.h. der Marker wird nach links aus dem Textfluß herausgehoben.mfg
Woodfighter-
Tach,
jetzt habe ich nochmal dran rumgespielt, das erwartete Verhalten erreichst du, wenn du dem <ul> Element ein linkes Margin von der Breite des Bildes gibst.
Mein Konqueror (Version 3.2.0) verhält sich übrigens genauso wie die Geckos.
mfg
Woodfighter-
Hi!
jetzt habe ich nochmal dran rumgespielt, das erwartete Verhalten erreichst du, wenn du dem <ul> Element ein linkes Margin von der Breite des Bildes gibst.
Ja, soweit waren wir ja schon anfangs mal. Ich suche
aber nach einer Methode, Listen zu definieren, die
sich gleich verhalten, egal, ob sie links neben einem Bild
zu stehen kommen oder rechts neben einem Bild oder eben
ganz ohne Bild stehen. Es geht ja um eine CMS-gefuetterte
Site. Wenn ich dort ein Style fuer Listen definiere, moechte
ich, dass das auch funktioniert, wenn der bildfuehrende Ab-
satz an einer Stelle mal ganz kurz ist (wie im Beispiel
die obere Zeile) und danach eine Liste folgt.Und ich verstehe einfach nicht den Sinn, dass eine Liste,
die, nehme ich das Bild raus oder nach rechts, ihre Aus-
rueckung (IMO korrekt) _unterhalb_ der Startpositionen normaler
<p>-Absaetze des Abschnittes positioniert im Falle, dass
ein Bild LINKS davon sitzt, die Listenausrueckung IN das
Bild hineinschiebt. Ich verstehe schon ueberhaupt nicht, warum
die Zeilen _ueberhaupt_ in ein Bild hineinragen duerfen (?),
das mit korrekter Bildbreite und float definiert ist. Tatsaechlich
werden die Listen-Zeilen ja im Falle Bild _rechts_ auch _nicht
IN_ das rechts stehende Bild reingerendert, sondern am Bild
umgebrochen. Die Ausrueckung gehoert doch zur Liste dazu, warum
wird die _hinein_gesetzt und prallt nicht sozusagen ebenfalls
am Bildrand ab - wie es der <p>-Absatz ja auch tut? Ich gebe
dem <p>-Absatz ja auch keinen Margin mit, sondern das erledigt
das float+width des Bildes.Mein Konqueror (Version 3.2.0) verhält sich übrigens genauso wie die Geckos.
Vielleicht hast du Mozilla-Rendering eingeschaltet? Meiner 3.1.4
erzeugt eine Liste wie im Bild dargestellt.Also die Anwendung ist doch alltaeglich: Man hat einen Contentblock;
man lockert ihn mit Bildern im empfohlenen Zick-zack-Muster auf -
also gibt es auch mal Bilder links vom Text. Texte enthalten
hin und wieder auch mal Listen. Bei einer größeren Site kann es
also vorkommen, dass eine Liste neben einem links stehenden Bild
zu liegen kommt... WIE macht IHR das denn?Herzliche Gruesse
Nicola
-
Tach,
Die Ausrueckung gehoert doch zur Liste dazu, warum
wird die _hinein_gesetzt und prallt nicht sozusagen ebenfalls
am Bildrand ab - wie es der <p>-Absatz ja auch tut?Solange list_style_position:outside gesetzt ist, gehören die Punkte zum <ul> nicht zum <li> Element; da <ul> block Level Element ist, nimmt es erstmal die gesamte Seitenbreite ein und beginnt somit links am Seitenrand. Die Position der Punkte wird dann als einige Pixel links vom <li> berechnet. Dass da ein anderes Element drüber oder drunter liegt, ist dem Browser egal. Die Einrückung der <li> Elemente, die man sonst sehen kann wird hier nicht sichtbar, da durch das float des Bildes die <li> Elemente ja sogar noch weiter eingerückt werden.
Mein Testfile ist übrigens: http://woodfighter.de/test.html
Hier nochmal als Bild (gelb=<p>, rot=<li>, blau=<ul>, grün=<img>)outside:
<img src="http://woodfighter.de/listen-outside.gif" border="0" alt="">inside:
<img src="http://woodfighter.de/listen-inside.gif" border="0" alt="">Mein Konqueror (Version 3.2.0) verhält sich übrigens genauso wie die Geckos.
Vielleicht hast du Mozilla-Rendering eingeschaltet? Meiner 3.1.4
erzeugt eine Liste wie im Bild dargestellt.Nein, ich gehe eher davon aus, dass man sich dem Rest der Browser angepaßt hat.
mfg
Woodfighter-
Nochmal mit den richtigen URLs, damits auch im archiv erhalten bleibt
Tach,
Die Ausrueckung gehoert doch zur Liste dazu, warum
wird die _hinein_gesetzt und prallt nicht sozusagen ebenfalls
am Bildrand ab - wie es der <p>-Absatz ja auch tut?Solange list_style_position:outside gesetzt ist, gehören die Punkte zum <ul> nicht zum <li> Element; da <ul> block Level Element ist, nimmt es erstmal die gesamte Seitenbreite ein und beginnt somit links am Seitenrand. Die Position der Punkte wird dann als einige Pixel links vom <li> berechnet. Dass da ein anderes Element drüber oder drunter liegt, ist dem Browser egal. Die Einrückung der <li> Elemente, die man sonst sehen kann wird hier nicht sichtbar, da durch das float des Bildes die <li> Elemente ja sogar noch weiter eingerückt werden.
Mein Testfile ist übrigens: http://woodfighter.de/stuffnottodelete/listen.html
Hier nochmal als Bild (gelb=<p>, rot=<li>, blau=<ul>, grün=<img>)outside:
<img src="http://woodfighter.de/stuffnottodelete/listen-outside.gif" border="0" alt="">inside:
<img src="http://woodfighter.de/stuffnottodelete/listen-inside.gif" border="0" alt="">Mein Konqueror (Version 3.2.0) verhält sich übrigens genauso wie die Geckos.
Vielleicht hast du Mozilla-Rendering eingeschaltet? Meiner 3.1.4
erzeugt eine Liste wie im Bild dargestellt.Nein, ich gehe eher davon aus, dass man sich dem Rest der Browser angepaßt hat.
mfg
Woodfighter
-
-
-
-
-
- werden die Listenpunkte unter (IE) oder ueber (Mozilla)