Seznamy s čísly nebo odrážkami

Pro dnešek jsem se rozhodla probrat takovou základní věc a to seznamy. Možností, jak si změnit odrážky je hned několik. Od základních až po složitější a propracovanější. Takže se pustíme do toho a doufám, že se někomu bude tento návod líbit :-)

Můj návod.

Kopírovat se zdrojem!

Následující kódy vkládáte do css, tedy nad ] ] ></b:skin>

Typy odrážek - nečíselné

Jednou z možností je mít místo odrážek obrázky. Stačí si nějaký najít nebo vytvořit (doporučuji velikost okolo 16 x 16 px). Do šablony v css vložíte kód níže a místo tučného vložíte adresu k uloženému obrázku. A pak můžete mít odrážky například jako já na obrázku, které používám na blogu...

margin-left ... určuje vzdálenost odrážky od okraje stránky

.post ul li {list-style-image: url('adresa obrázku'); margin-left: 30px;}

Pokud chcete mít odrážky klasické, zvolíte si typ disc...

.post ul li {list-style-type: disc; margin-left: 30px;}

Jiným typem odrážky je toto kolečko...

.post ul li {list-style-type: circle; margin-left: 30px;}

V další variantě lze použít čtvereček...

.post ul li {list-style-type: square; margin-left: 30px;}

Číselné odrážky

Klasický číselný seznam...

.post ol li {list-style-type: decimal; margin-left: 30px;}

Malá římská čísla...

.post ol li {list-style-type: lower-roman; margin-left: 30px;}

Velká římská čísla

.post ol li {list-style-type: upper-roman; margin-left: 30px;}

Malá písmena...

.post ol li {list-style-type: lower-alpha; margin-left: 30px;}

Velká písmena...

.post ol li {list-style-type: upper-alpha; margin-left: 30px;}

Speciální odrážky - číselné

.post ol li
{
list-style-type: none;
padding-left: 30px;
margin-left: 60px;
margin-right: 60px;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: left;
border-radius: 2em;
}

padding-left: 30px; - vzdálenost textu od okraje
margin-left: 60px; margin-right: 60px; - vzdálenost okraje barevného pozadí z levé a pravé strany. V podstatě tím určujete šířku odrážky s pozadím...
color: #fff; - barva textu
background: #ee778e; - barva pozadí

.post ol li
{
list-style-type: none;
padding-left: 30px;
margin-left: 60px;
margin-right: 60px;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: left;
}

Čtvereček se šipkou...

.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 4.5em;
}
.post ol li:before{
color: #fff;
content: counter(li);
counter-increment: li;
position: absolute; 
left: -30px;
top: 50%;
margin-top: -1em;
background: #ee778e;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
left: -5px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #ee778e;
}

background: #ee778e; - barva pozadí
border-left:8px solid #ee778e; - barva malého trojúhelníčku, co tvoří šipku

Čísla v kolečku...

.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}

I čtvereček má své kouzlo...

.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
transition: all .3s ease-out;
}

background: #ee778e; - barva čtverce

Odrážka jako kolečko se šipkou...

.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
.post ol li:after{
position: absolute;
content: '';
left: 35px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #ee778e;
}

background: #ee778e; - barva pozadí
border-left:8px solid #ee778e;  - barva šipky

Čísla jsem jen oddělila malou šipkou...

.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
.post ol li:after{
position: absolute;
content: '';
left: 35px;
margin-top: -.5em; 
top: 50%;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left:6px solid #ee778e;
}

border-left:6px solid #ee778e;   - barva šipky

Na této stránce si můžete vybrat jakýkoli jiný symbol a vložíte jeho číslo za obrácené lomítko, nebo můžete vložit i text....

post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
.post ol li:after{
position: absolute;
content: '\26af';
left: 35px;
}

Našla jsem tuto velice pěknou verzi číselných seznamů. V tomto případě je šířka přes celou stránku.

.post ol{
counter-reset:li;
list-style-type: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #ee778e;
background:#FBD9DF;
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#fff;
text-align:left;
background:#ee778e;
text-indent:6px;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #ee778e;
}

border-bottom:1px solid #ee778e; - barva spodní linky, takové podtržení
background:#FBD9DF; - pozadí textu
background:#ee778e; - pozadí čtverečku s číslem
border-color: transparent transparent transparent #ee778e; - barva malého trojúhelníku, který dodavá pocit, že je pozadí čísla lehce prostorové

Stejná verze jako výše, ale doplněná o styl, kdy je seznam od obou stran posunut, takže je kratší...

.post ol{
counter-reset:li;
list-style-type: decimal;
margin-left:0;
padding-left:80px;
padding-right:80px;
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #ee778e;
background:#FBD9DF;
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#fff;
text-align:left;
background:#ee778e;
text-indent:6px;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #ee778e;
}

padding-left:80px; - odsazení zleva
padding-right:80px; - odsazení zprava

Stejné jako předchozí, tentokrát místo čtverců kolečka...

.post ol{
counter-reset:li;
list-style-type: decimal;
margin-left:0;
padding-left:80px;
padding-right:80px;
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
background:#FBD9DF;
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#fff;
text-align:left;
background:#ee778e;
text-indent:6px;
border-radius: 2em;
}

To je pro dnešek vše. Pokud mě napadne nějaká zajímavá varianta, určitě ji doplním. Pokud sami máte návrh, sem s ním :-) Některé odrážky jsou moje pokusy, kdy jsem testovala možnosti, některé jsou inspirované typy na této stránce...