TORU Foorum

Probleem CSS'i ja Listidega

dmg - 25.10.2010 19:48

Probleem borderitega, nimelt oleks vaja alumist borderit, parempoolst ja ainult esimese listi elemendile vasakpoolset borderit

<ul>
<li><a href="#">nupp</a></li>
<li><a href="#">nupp2</a></li>
<li><a href="#">nupp3</a></li>
<li><a href="#">nupp4</a></li>
</ul>

hetkel css järgmine

ul{
list-style-type:none;
}
li{
display:inline;
}
a{
text-align: center;
float:right;
padding-right: 4px;
padding-left: 4px;
text-decoration:none;
color:#181818;
font-weight:bold;
background:#FFFFFF;
border-right: 2px solid #181818;
border-bottom:2px solid #181818;
}
a:hover{
background:#4096EE;
}

[Muudetud: 25.10.2010 dmg]

[Muudetud: 25.10.2010 dmg]

Arguru - 25.10.2010 19:54

border-bottom: 1px solid #värv (kui värvi tahad) alumine
border-right: 1px solid #värv parem
border-left: 1px solid #värv vasak

Lisa ise, ma ei viitsi.

dmg - 25.10.2010 20:26

Hetkel on
border-right: 2px solid #181818;
border-bottom:2px solid #181818;
kui lisan vasaku borderi border-left: 2px solid #181818;
siis tekivad topelt ääred | Nupp || Nupp2 || Nupp3 || Nupp4 |
Kood:
<ul> <li><a href="#">nupp</a></li> <li><a href="#">nupp2</a></li> <li><a href="#">nupp3</a></li> <li><a href="#">nupp4</a></li> </ul>

JAnx - 25.10.2010 20:30

li:first-child{border-left: 2px solid #181818;}
li{border-right: 2px solid #181818;border-bottom:2px solid #181818;}

See muidugi uuematel brauseritel.

DonQ - 25.10.2010 20:38

Pane teemale inimlik pealkiri, muidu liigub kasti.
Njah, reaktsioon oli kiire ja hulga parem sai; järgmisel korral loodame mitte vahele segada :)

[Muudetud: 25.10.2010 DonQ]

dmg - 25.10.2010 20:49

Niimoodi kirjutas: JAnx  
li:first-child{border-left: 2px solid #181818;}
li{border-right: 2px solid #181818;border-bottom:2px solid #181818;}

See muidugi uuematel brauseritel.


Kas muid alternatiive oleks ka välja pakkuda?

Timukas - 25.10.2010 21:22

Esimesele listi elemendile lisa mingi klass ja kasuta seda li:first-child asemel.