nicht angemeldet
Farbige "Kästen" vor Aufzählungen ähnlich wie <ul>
0 
Gernot Back
0
Farbige "Kästen" vor Aufzählungen ähnlich wie <ul>
Moin ihr,
ich habe hier eine Weltkarte, in der einige Bereiche farblich eingefärbt sind. Nun soll unten drunter eine Legende stehen: Text in regulärer Schriftfarbe und davor oder danach ein Kasten, der die entsprechende Farbe des Bildes erhält. Es kann auch ein anderes Symbol sein, ein Kasten wäre jedoch am schönsten. Das Aufzählungssymbol von Listen ist aber zu klein.
Ich habe diverse Dinge ausprobiert, die zwar funktionieren, mir aber irgendwie "hingestückelt" erscheinen. Die einfachste Variante (im Sinne von kaum Quelltext) ist bisher diese hier:
<span style="background-color:#999;"> </span> Text<br>
Kennt jemand eine einfache, glatte Lösung für diese Sache?
Gruß,
Conny
-
Hallo Conny,
ich habe hier eine Weltkarte, in der einige Bereiche farblich eingefärbt sind. Nun soll unten drunter eine Legende stehen: Text in regulärer Schriftfarbe und davor oder danach ein Kasten, der die entsprechende Farbe des Bildes erhält. Es kann auch ein anderes Symbol sein, ein Kasten wäre jedoch am schönsten. Das Aufzählungssymbol von Listen ist aber zu klein.
Dann mach dir doch ein größeres list-style-image!
Ich habe diverse Dinge ausprobiert, die zwar funktionieren, mir aber irgendwie "hingestückelt" erscheinen. Die einfachste Variante (im Sinne von kaum Quelltext) ist bisher diese hier:
<span style="background-color:#999;"> </span> Text<br>Alternativ kannnst du auch mit einer entsprechend ausgerichteten nicht-wiederholten Hintergrunfgrafik arbeiten. Den Text hinderst du dann mit Padding am Verdecken der Grafik.
Gruß Gernot
-
Hi Gernot,
Dann mach dir doch ein größeres list-style-image!
Ich würde gerne auf Grafiken verzichten. Gibt es da keine anderen Möglichkeiten?
Conny
-
Hallo Conny.
Dann mach dir doch ein größeres list-style-image!
Ich würde gerne auf Grafiken verzichten. Gibt es da keine anderen Möglichkeiten?
Durchaus. Aber im IE funktioniert es wieder einmal nicht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Farbige Listenpunkte</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> [code lang=css]ul{list-style-type:none;margin:0;padding:0;} li#foo:before{content:"■ ";color:red;} li#bar:before{content:"■ ";color:blue;} li#baz:before{content:"■ ";color:green;} li#qux:before{content:"■ ";color:purple;}</style>
</head>
<body>
<ul>
<li id="foo">Foo</li>
<li id="bar">Bar</li>
<li id="baz">Baz</li>
<li id="qux">Qux</li>
</ul>
</body>
</html>[/code]Einen schönen Montag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software] -
HI,
also Du könntest ja mit border-left: 2em; oder so experimentieren.
Ich würde mal den <a>-Tag mit display: block; formatieren und dann einen dickeren farbigen linken Rand anlegen.vg melanie
-
Hallo Melanie,
das mit border ist eine klasse Idee. Es sind jeweils <p>s, also ganz einfach zu lösen.
Dank dir,
ConnyHI,
also Du könntest ja mit border-left: 2em; oder so experimentieren.
Ich würde mal den <a>-Tag mit display: block; formatieren und dann einen dickeren farbigen linken Rand anlegen.vg melanie
-
Hallo Mel.
also Du könntest ja mit border-left: 2em; oder so experimentieren.
Gute Idee; versteht sogar der IE.
Ich würde mal den <a>-Tag mit display: block; formatieren und dann einen dickeren farbigen linken Rand anlegen.
Hierfür ist display:block aber nicht erforderlich.
Einen schönen Montag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hi Ashura,
ja Du hast recht. Das eine schliesst das andere zwar nicht aus, ist aber nicht zwingend nötig ;)
danke für den Hinweis
vg melanie
-
-
-
-
-
Nimm bilder oder spans