Listen formatieren - Aufzählunspunkte nicht einrücken
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
anhauen
beitrag
bild
element
erfolgen
erkennung
explorer
gedacht
geschehen
gewissen abstand
hilfe
listen
margin
navigation
opus
schiffsdiesel
tag
zeilenumbruch
zweck
-
Hallo,
ich bin gerade dabei, an der Homepage unseres Schuljahrgangs zu werkeln. F?r die tag/navigation">Navigation hatte ich mir ?berlegt, dass ich die Untermen?s mit Hilfe von Listen aufbaue. Wenn ich allerdings eine Liste erstelle, wird diese - also die Bullets - immer in einem gewissen Abstand vom linken Seitenrand erstellt, was wohl bei 'normalen' Listen gut, n?tzlich und ?bersichtlich sein mag, f?r meine Zwecke allerdings v?llig unpassend ist.
Wenn ich die <ul>-Tags weglasse und die Liste alleine aus <li>-Tags aufbaue, wird es so angezeigt, wie ich es haben m?chte, allerdings ist es dann nicht m?glich per css eine eigene bullet-grafik einzubinden, weil dies ja ?ber den <ul>-Tag geschehen muss.
Kennt also jemand eine M?glichkeit, mit der man die bullets DIREKT am linken Rand platzieren und gleichzeitig den <ul>-Tag behalten kann, um eine andere bullet-grafik zu verwenden? Mit CSS habe ich mittlerweile alles, was mir so eingefallen ist mit margin, padding usw. ausprobiert - ohne erfolg
bis dann
aldi -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Setze mal padding und margin von <ul> auf 0px.
Dann sollte es eingetlich gehen.
MfG Lucas -
Hallo,
ich bin gerade dabei, an der Homepage unseres Schuljahrgangs zu werkeln. F?r die Navigation hatte ich mir ?berlegt, dass ich die Untermen?s mit Hilfe von Listen aufbaue. Wenn ich allerdings eine Liste erstelle, wird diese - also die Bullets - immer in einem gewissen Abstand vom linken Seitenrand erstellt, was wohl bei 'normalen' Listen gut, n?tzlich und ?bersichtlich sein mag, f?r meine Zwecke allerdings v?llig unpassend ist.
Wenn ich die <ul>-Tags weglasse und die Liste alleine aus <li>-Tags aufbaue, wird es so angezeigt, wie ich es haben m?chte, allerdings ist es dann nicht m?glich per css eine eigene bullet-grafik einzubinden, weil dies ja ?ber den <ul>-Tag geschehen muss.
Wo jetzt genau an den margins/paddings geschraubt werden muss, wei? ich auf Anhieb auch nicht. Aber, als ich mein Style-Sheet f?r unsortierte Listen mit eigener Grafik gebastelt habe, hab ich einfach zur Probe "ul" und "li" mit jeweils unterschiedlich farbigen borders versehen, in etwa so:
ul {
border: 1px red dashed;
}
ul li {
border: 1px blue dotted;
}
Auf die Art kann man beim Probieren mit "margin-left" und "padding-left" sowohl bei "ul" als auch bei "li" auf Anhieb erkennen, wo welcher Abstand sich ?ndert. Der Abstand vom Inhalt zum Rand ist "padding", und der Abstand vom Rand zum ?u?eren Element ist "margin" ... (nur mal so nebenbei^^)
Kennt also jemand eine M?glichkeit, mit der man die bullets DIREKT am linken Rand platzieren und gleichzeitig den <ul>-Tag behalten kann, um eine andere bullet-grafik zu verwenden?
Nach meinem Wissensstand gibt es sowas derzeit nicht. Sobald du eigene Bullet-Grafiken benutzt, stellen die Browser die Abst?nde unterschiedlich dar. Ich hab das so gel?st, dass ich (?ber PHP) versuche, den Opera (7.08/15) zu erkennen und diesem ein spezielles zus?tzliches Style-Sheet unterzuschieben. Der Firefox (1.0.schlagmichtot) bekommt das normale CSS-File. Der M$FT IE (6.irgendwas) stellt die Listen in etwa so wie der FF dar -- aber der IE interessiert mich sowieso nicht.
Mit CSS habe ich mittlerweile alles, was mir so eingefallen ist mit margin, padding usw. ausprobiert - ohne erfolg
Wenn ich mich recht erinnere, muss irgendwie die Breite der Bullet-Grafik ber?cksichtigt werden. In einigen F?llen funktionieren auch negative Werte.
-
hallo,
erst einmal thx @ lucas & alopex...
Ich habe gerade den gro?teil von dem, was ihr geschrieben habt (ausser die php-variante), einmal ausprobiert und wie alopex schon sagte, bepinkeln sich da s?mtliche browser auf unterschiedlichste weise:
wenn ich es f?r opera und inet-explorer passend mache mit den negativen margins der <li>s , dann streikt der firefox und umgekehrt - bei allen bullets.
Ich habe jetzt eine zwar weniger elegante, aber vielleicht universellere M?glichkeit angewandt und zwar:
<div style="float:left;width:4px">
<img src="graf/arrowri.gif">
</div>
<div style="float:right;text-align:left;width:126px">
<a href="linkadresse">link</a>
</div><br>
(innerhalb eines 130px gro?en divs)
da werde ich jetzt noch die css-eigenschaften auslagern und das mit ids machen und dann 'ich habe fertig'. Ist vielleicht eher der Schiffsdiesel statt nem modernen benziner, aber vielleicht auch nicht so anf?llig (welch ein vergleich ;) ) ..... jedenfalls wird dieses fabrikat in IE, FF und Opera gleich angezeigt o_O
bis dann
aldi
Beitrag ge?ndert am 25.05.2006 22:56 von aldistammkunde -
OMG!
Das hat dann aber nichts mehr mit einer semantisch korrekten HTML-Liste zu tun ...
Mir ist ?brigens noch was eingefallen: Du k?nntest dir auch mal das Pseudo-Tag ":before" anschauen. Wenn du die Bullet-Grafik ganz wegl?sst, und daf?r in "li:before" wieder als "content:" einf?gst, k?nnte es ja sein, dass sich die Browser da eher einig werden. Hab ich aber noch nicht ausprobiert. Werd ich aber mal machen, da mir meine Opera-Erkennung auch nicht gef?llt. -
OMG!
Das hat dann aber nichts mehr mit einer semantisch korrekten HTML-Liste zu tun ...
hatte ich das behauptet? :D
Mir ist ?brigens noch was eingefallen: Du k?nntest dir auch mal das Pseudo-Tag ":before" anschauen. Wenn du die Bullet-Grafik ganz wegl?sst, und daf?r in "li:before" wieder als "content:" einf?gst, k?nnte es ja sein, dass sich die Browser da eher einig werden. Hab ich aber noch nicht ausprobiert. Werd ich aber mal machen, da mir meine Opera-Erkennung auch nicht gef?llt.
nun gut...aber das mag der Internet Explorer wieder nicht -.- ...SEHR ?tzend
ich hab jetzt ersteinmal quittiert...meine schiffsdiesel-l?sung erweist sich auch als nicht ideal (wer haette es gedacht :D)
Ich habe jetzt einfach die Bullets komplett weggelassen und die links ganz einfach per zeilenumbruch auf die zeilen verteilt...bei gelegenheit l?sst sich das ja nochmal ?ndern -.-
bis dann
aldi -
warum muss es eigentlich unbedingt eine liste sein???
warum setzt du nicht das bild was du als bullet haben m?chtest vor deinen text... ohne liste...!!!?
so bleibt dir alles einfach erspart.
MfG
Beitrag ge?ndert am 26.05.2006 20:25 von ct2004 -
Eine Navigation ist im Allgemeinen eine Linkliste. Und wie stellt man eine Linkliste semantisch korrekt dar? Richt??g: Mit einer Liste!
Das zeugt dann n?mlich von der Professionalit?t des Webdesigners.
Aber notfalls gehts nat?rlich auch mit <p></p> und :before oder anderen Kr?cken ...
Oder mit Definitionslisten? "dl/dt" und "dt:before" ... -
warum muss es eigentlich unbedingt eine liste sein???
warum setzt du nicht das bild was du als bullet haben m?chtest vor deinen text... ohne liste...!!!?
so bleibt dir alles einfach erspart.
Eine Solche l?sung hat er sich doch auchschon einfallen lassen. Das war das hier:
<div style="float:left;width:4px">
<img src="graf/arrowri.gif">
</div>
<div style="float:right;text-align:left;width:126px">
<a href="linkadresse">link</a>
</div><br>
Warum da jetzt noch die Div's rum m?ssen verstehe ich allerdings nicht. Geht
<img src="graf/arrowri.gif"><a href="linkadresse">link</a>
nicht genau so gut? Schlie?lich willst du ja offenbar keine Abst?nde haben. Und so sind sie alle inline elemente, hat auch vorteile. Ist aber immernoch eine "notl?sung", die nicht so ganz sauber ist.
Als Alternative zum :before mit CSS h?tte ich ncoh folgende L?sung vorzuschlagen:
<li><img src="graf/arrowri.gif"><a href="linkadresse">link</a></li>
Dann nat?lich bei den Listenpunkten ohne Symbol davor (list-style-type:none;). -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
