Anzeige - [Interessiert an einer Anzeige?]
(?) Tags raten (?) (edit)
 
Reply to this topicStart new topicStart Poll
> Liste mit Background
easymoments
Geschrieben am: Di 13.05.2008, 13:03
Report PostQuote Post

AyomRank 2
****

Gruppe: Member (aktiv)
Beiträge: 21
Mitglied seit: 14.01.2007


Hallo.

Ich möchte eine Liste realisieren.

list-style: decimal.

Allerdings soll unter den Zahlen, die die Liste ja automatisch fortlaufend macht ein farbiges Quadrat erscheinen.

Hat jemand eine Ahnung wie ich dies realisieren kann?
Top
PMEmail Poster
Top
 
 
easymoments
#2 Geschrieben am: Sa 17.05.2008, 15:04 (+4d 02:01)
Report PostQuote Post

AyomRank 2
****

Gruppe: Member (aktiv)
Beiträge: 21
Mitglied seit: 14.01.2007


hat niemand ne ahnung wie man die listen punkte formatieren kann?

ich hab gehört dass es mittels java script gehen soll, aber bisher noch nix dazu gefunden... ;o/
Top
PMEmail Poster
Top
 
jAuer
Jürgen Auer - freiberufl. Programmierer
#3 Geschrieben am: Sa 17.05.2008, 17:34 (+02:29)
Report PostQuote Post

AyomRank 9
Group Icon

Gruppe: Experten Entwicklung
Beiträge: 2082
Mitglied seit: 4.02.2006


Ich hatte schon neulich gedacht, daß es da eigentlich keine Lösung geben könne.

Jetzt habe ich nochmals herumgespielt - mit reinem Html scheint das jedenfalls nicht zu gehen.

Die Nummern (list-style-type:decimal; ) gehören zum ol - Element. Wenn man da ein list-style-image ergänzt, dann verschwindet die Nummer - entweder Nummer oder Bild, nicht beides.

Wenn man dem ganzen ol ein Hintergrundbild verpaßt und das meinetwegen mit repeat-y auf eine vertikale Spalte beschränkt, dann steht das 'links', die Nummer stehen rechts davon. Versucht man, über ein Herumspielen an margin/padding für ol das nach links zu kriegen, verschwinden die Nummern.


Bäh - Korrektur - mit einer passenden Grafik scheint das doch zu gehen: Zusätzlich das li - Element mit margin-left:-24px nach links verschieben, bis Nummer und Bild übereinander sind.

CODE
<html>
<head>

<style type='text/css'>
ol  { list-style-type:decimal;  background:url(ext-link.gif) repeat-y; }

li { list-style-type:decimal;  background: #ff0000; margin-left:-24px; }

</style>

</head>



<body>

<ol>
<li>Eins</li>
<li>Zwei</li>
</ol>

</body>
</html>


Funktioniert aktuell allerdings nur im FireFox, nicht im IE6.

Die Grafik muß die Höhe einer Zeile haben. Außerdem ist damit natürlich die übliche Einrückung des ol-Elements weg.


--------------------
Web-Anwendung 3.0: Ein Online-Kalender für Termine vieler Filialen.

server-daten: Web-Datenbanken als Online - CRM - Lösung.
Konzentrieren Sie sich auf Ihr Kerngeschäft - nutzen Sie eine schlanke, schnelle Online-Datenbank von verschiedenen Standorten.
Top
PMEmail PosterUsers Website
Top
 
Thema wird von 0 Benutzer(n) gelesen (0 Gäste und 0 anonyme Benutzer)
0 Mitglieder:
Trackback-Url: http://www.ayom.com/track/t/24409

Topic Options Reply to this topicStart new topicStart Poll

 


> Ähnliche Themen
Liste mit 5000 Städtenamen telefon 152 3 Mo 16.06.2008, 12:43
Besuchertausch Liste Alain Aubert 196 1 Do 5.06.2008, 00:11
(S) MEdikamenten Liste firstlevel 134 1 Do 8.05.2008, 19:49
Liste englischsprachige Webverzeichnisse Kabir 174 0 So 9.12.2007, 14:13
Liste von online Warenhäuser Ronald Nickel 314 3 Sa 17.11.2007, 01:11
Background ändern bei aktivem Link? Simi 398 8 Fr 19.10.2007, 10:37
Liste von Webkatalogen martinm79 299 5 Mi 19.09.2007, 07:38
CSS Problem Liste freakx0 299 5 So 26.08.2007, 22:01
[S] Software Todo-Liste St. Ansgar Böttcher 895 8 Mi 11.07.2007, 08:08




Anzeige - [Interessiert an einer Anzeige?]



Anzeigen




cyon Webhosting



[Interessiert an einer Anzeige?]