5 svar · 498 visningar · startad av Mattias Nordin
Går det att sätta en bakgrundsfärg bakom siffran i en <ol> <li> xxx</li> ... lista?
<style>
ol{
background-color:#666666;
color:#336699;
}
</style>
Koden ovan ersätter färgen bakom xxx och inte bakom siffrorna. Jag vill alltså att 1) 2) 3) ska ha en bakgrundsfärg men inte xxx texten.
Du kan flytta in listans numrering eller bullets(ul) med css
list-style-postition: inside;
Mattias Nordin skrev:
Jag vill alltså att 1) 2) 3) ska ha en bakgrundsfärg men inte xxx texten.
- xxx
- xxx
- xxx
Här är en variant som bygger på att siffrorna så att säga hamnar i marginalen för li när man kör med defaulten på list-style-position, samtidigt som marginalinställningarna för listan görs om till att använda en padding på ul som indrag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Ett av jarvklos exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
ol {
background-color:#ccc;
color:#336699;
margin:0;
padding-left: 40px;
}
li {
background-color:#fff;
color:#336699;
margin:0;
padding-left: 0;
}
</style>
<ol>
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
<li>Fum</li>
</ol>
hoppsan, jag läste visst inte igenom inägget ordentligt :r
Strålande Jarvklo!
En följdfråga:
Går det att sätta olika färger på bullet listan och texten? I koden nedan blir allt rött.
ol {
background-color:#ccc;
color:green;
margin:0;
padding-left: 40px;
}
li {
background-color:#fff;
color: red;
margin:0;
padding-left: 0;
}
Nope.
http://www.w3.org/TR/CSS21/generate.html#lists sez:
The list properties describe basic visual formatting of lists: they allow style sheets to specify the marker type (image, glyph, or number), and the marker position with respect to the principal box (outside it or within it before content). They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box; these may be derived from the principal box.
Härute i verkligheten krävs det alltså lösningar liknande t.ex. den att HTML-mässigt ta till en <span> inuti varje <li> för att kunna få till just den effekten.
Man får helt enkelt tji av CSS2.1