ol css
Ich habe es versucht.
Entweder habe ich ein Brett vorm Kopp oder es ist wirklich so kompliziert:
Bhtml[/B]
[code]
-
Hello World
![Löschen]()
-
Hello World again
Das hier ist mal kein Bild wie weiter oben.
[/code][B]css:[/B]
[code]
- {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
}
#geordnete_liste {
border : black solid 5px;
padding: 20px 0px 20px 20px;
}
#geordnete_liste ol {
margin-left: 20px;
margin-right: 20px;
}
#geordnete_liste ol li {
padding-bottom: 4px; /* Wert ergibt sich aus border-top + border-bottom von #inhalt1 */
margin-top: 10px;
}
#geordnete_liste p {
border: 2px solid black;
}
#geordnete_liste p span {
padding-left: 3px;
}
/clear moderne Browser:/
#geordnete_liste p:after {
display: block;
content: „floatende“;
clear: both;
height: 0;
visibility: hidden;
}
/autoclear IE6:/
- html #geordnete_liste p {
height: 1%;
}
/autoclear IE7:/
- +html #geordnete_liste p {
height: 1%;
color: #AFDA22;
}
/*autoclear IE8:
{
versteht vermutlich :after;
}
*/
/farben und Breiten:/
#geordnete_liste p span {
display: block;
float: left;
width: 12em;
}
#geordnete_liste p .rot {
background-color: red;
}
#geordnete_liste p .gruen {
background-color: green;
}
#geordnete_liste p .blau {
width: 26em;
background-color: blue;
color: white;
}
#geordnete_liste li .bild {
width: 26em;
}
#geordnete_liste li .bild img {
display: block;
}
[/code]Ich bekomme die Listennummerierung für Opera9 und Safarie 3.1 (win) nicht einheitlich hin. In Konqueror 3 habe ich es mir erst gar nicht angesehen (es könnte fürchterlich aussehen). In Firefox 2.0 ud IE7 sieht es recht stabil aus.
Im IE6 tanzen die Items ein wenig aus der Reihe.
Ich würde an dieser Stelle aufgeben und eine
verwenden und für die Nummerierung ein anderes Tag verwenden.
Vielleicht macht eine Definitionsliste (
) auch mehr Sinn. Da es nur zwei „Spalten“ sind, würde sich das zumindest gestalterisch anbieten.
Wenn das ganze nur dazu dient ein Formular zu gestalten würde ich gar keine Liste verwenden sondern und gemeinsam in
einfügen.
Je nach Zweck, würde vielleicht auch
in Frage kommen.Manche Gestalter lassen die Nummerierungen von
für die Bildschirmausgabe einfach weg:
ol {
list-style: none;
}
