SELFHTML Forum
SELFHTML Forumsarchiv
2003
November
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: Jürgen Berkemeier, 04. 11. 2003, 10:22
Hallo,
ich habe mit
<ul style="list-style-image:url(/Physik/img/sign_link.gif)">
das Listensysmbol durch eine eigene Grafik ersetzt. Leider hängt das Bild im IE am oberen, im MOZ am unteren Textrand. (Siehe auch http://www.uni-muenster.de/Physik/UL_mit_Bild.html. Wie kann ich die Lage des Bildes zum Listentext beeinflussen?
Gruß, Jürgen
-
Die folgende Nachricht zum Thema stammt von: apstrakt, 04. 11. 2003, 10:50
Hallo,
»» ich habe mit
»» <ul style="list-style-image:url(/Physik/img/sign_link.gif)">
»» das Listensysmbol durch eine eigene Grafik ersetzt. Leider hängt das Bild im IE am oberen, im MOZ am unteren Textrand.
Das Bild wird im MOZ doch sogar noch abgeschnitten.
»» Wie kann ich die Lage des Bildes zum Listentext beeinflussen?
Gar nicht. :(
Darüber habe ich mich auch schon x-mal geärgert. Du kannst wahrscheinlich nur mit Tricks versuchen, das Problem zu umgehen: an der Zeilenhöhe schrauebn, ggf. den Listeninhalt in einem DIV containern und diesen mit geeigneten margins versehen, u.U. mußt Du die Grafik (von der Höhe her) auch nochmal anpasssen...
Tschau,
apstrakt
-
http://www.cafe-abstrakt.de
Die folgende Nachricht zum Thema stammt von: wahsaga, 04. 11. 2003, 11:37
hi,
»» ich habe mit
»» <ul style="list-style-image:url(/Physik/img/sign_link.gif)">
»» das Listensysmbol durch eine eigene Grafik ersetzt. Leider hängt das Bild im IE am oberen, im MOZ am unteren Textrand. (Siehe auch http://www.uni-muenster.de/Physik/UL_mit_Bild.html. Wie kann ich die Lage des Bildes zum Listentext beeinflussen?
die browser reagieren hier leider sehr unterschiedlich.
am einfachsten umgehst du das problem, in dem du list-style-image:none benutzt, und dann die listenpunkte als hintergrundbild in die <li> einbindest (wiederholung des hintergrundbildes abschalten, positionieren, paddings definieren).
gruss,
wahsaga
Die folgende Nachricht zum Thema stammt von: Heiko Jägle, 04. 11. 2003, 12:08
Huhu!
»» hi,
»» am einfachsten umgehst du das problem, in dem du list-style-image:none benutzt, und dann die listenpunkte als hintergrundbild in die <li> einbindest (wiederholung des hintergrundbildes abschalten, positionieren, paddings definieren).
Diese Lösung hat den Nachteil, dass beim Drucken die Listenpunkte nicht mehr zu sehen sind. Oftmals werden beim Drucken alle Hintergründe weggelassen.
Aber wer's nicht braucht, kann es so machen.
»» gruss,
»» wahsaga
Grüsse zurück
Heiko
Die folgende Nachricht zum Thema stammt von: CarstenP, 04. 11. 2003, 13:31
Hallo,
»» Diese Lösung hat den Nachteil, dass beim Drucken die Listenpunkte nicht mehr zu sehen sind. Oftmals werden beim Drucken alle Hintergründe weggelassen.
Dafür kann man ja ein extra print-Stylesheet einbinden, in dem z.B. die normalen Listenpunkte wieder eingeblendet werde.
Viele Grüße
Carsten
Die folgende Nachricht zum Thema stammt von: Jürgen Berkemeier, 04. 11. 2003, 13:36
Hallo,
das ist hier kein Problem, da die Liste (Navigation) beim Drucken ausgeblendet wird.
Gruß, Jürgen
-
Die folgende Nachricht zum Thema stammt von: Jürgen Berkemeier, 04. 11. 2003, 12:19
Hallo,
hab ich probiert, sieht aber auch nicht besser aus.
http://www.uni-muenster.de/Physik/UL_mit_Bild.html
Die Bilder hängen jetzt in beiden Browsern ganz oben, die Listen rücken noch weiter nach rechts, und der MOZ ignoriert negative angaben bei margin-left.
Gruß, Jürgen
-
Die folgende Nachricht zum Thema stammt von: wahsaga, 04. 11. 2003, 12:58
hi,
»» hab ich probiert, sieht aber auch nicht besser aus.
»» http://www.uni-muenster.de/Physik/UL_mit_Bild.html
»» Die Bilder hängen jetzt in beiden Browsern ganz oben
erweitere den css-code mal um eine angabe zur positionierung des hintergrundbildes, left center.
gruss,
wahsaga
Die folgende Nachricht zum Thema stammt von: Jürgen Berkemeier, 04. 11. 2003, 13:28
Hallo,
das wird ja immer besser. Vielen Dank schon mal.
Jetzt besteht aber immer noch das Problem, dass die Liste im MOZ/NN immer noch sehr weit nach rechts geschoben ist.
»»
»» gruss,
»» wahsaga
Gruß, Jürgen
-
Die folgende Nachricht zum Thema stammt von: CarstenP, 04. 11. 2003, 13:43
Hallo Jürgen,
»» und der MOZ ignoriert negative angaben bei margin-left.
Zum Thema marign und padding bei ul/ol und li: Da hat so ziemlich jeder Browser seine eigenen Vor(ein)stellungen
http://www.subotnik.net/style/list-box-test.html
http://devedge.netscape.com/viewsource/2002/list-indent/
Viele Grüße
Carsten
Die folgende Nachricht zum Thema stammt von: Jürgen Berkemeier, 05. 11. 2003, 08:52
Hallo,
danke an alle. Leider konnte ich nur lernen, das mit CSS noch nicht alles geht und ein Verzicht auf Tabellenlayouts nicht so einfach möglich ist, es sei denn, man nimmt Layoutänderungen in Kauf.
Die in meinen Postings angegebene Testseite werde ich löschen, daher hier noch einmal fürs Archiv der Inhalt:
<ul style="list-style-image:url(Bild1.gif)">
<li>Punkt 1<br>Punkt 1b</li>
<li>Punkt 2</li>
</ul>
<ul style="list-style-image:url(Bild2.gif)">
<li>Punkt 1<br>Punkt 1b</li>
<li>Punkt 2</li>
</ul>
<ul style="list-style-type:none;margin-left:0px">
<li style="background-image:url(Bild1.gif);
background-repeat:no-repeat;
padding-left:15px">
Punkt 1<br>Punkt 1b</li>
<li style="background-image:url(Bild2.gif);
background-repeat:no-repeat;
padding-left:15px">
Punkt 2</li>
</ul>
<ul style="list-style-type:none;margin-left:0px">
<li style="background-image:url(Bild1.gif);
background-position:0px 5px;
background-repeat:no-repeat;
padding-left:15px">
Punkt 1<br>Punkt 1b</li>
<li style="background-image:url(Bild2.gif);
background-position:0px 5px;
background-repeat:no-repeat;
padding-left:15px">
Punkt 2</li>
</ul>
Gruß, Jürgen
-
Die folgende Nachricht zum Thema stammt von: Thomas Luethi, 05. 11. 2003, 10:49
Hallo,
»» Die in meinen Postings angegebene Testseite werde ich löschen, daher hier noch einmal fürs Archiv der Inhalt:
Whow - vorbildlich! Sehr vorausschauend von Dir!
»» <li style="background-image:url(Bild2.gif);
»» background-position:0px 5px;
»» background-repeat:no-repeat;
»» padding-left:15px">
»» Punkt 2</li>
Vielleicht hast Du es aus "didaktischen" Gruenden so
ausfuehrlich geschrieben, vielleicht kennst Du auch
die Kurzschreibweise ("shorthand") noch nicht.
Es geht auch viel kuerzer:
background:url(Bild1.gif) no-repeat 0 5px;
padding-left:15px;
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background
http://selfhtml.teamone.de/css/eigenschaften/hintergrund.htm#background
Gruesse,
Thomas
© 1998-2008 
Impressum, Software: Classic Forum
(CSS)