| Autor | Zpráva | ||
|---|---|---|---|
| Tomáš123 Profil |
#1 · Zasláno: 17. 5. 2014, 15:57:47
Zdravím, vytvoril som si takýto web. V pravom a ľavom dolnom rohu navigácie mám okrúhle rohy. Avšak potreboval by som vedieť, ako takéto chovanie docieliť bez toho, aby som musel prvej a poslednej položke priradzovať triedy a následne im nastavovať border-radius samostatne. Skúšal som aj :firstchild, ale bezúspešne.
Vyzerá to tak, že akonáhle príde nová položka, prekryje tú pod ňou a aj keby mala spodná border-radius 2kilometre, tak na hornej to neuvidím. z-index nepomáha. Prosím pomôžte mi s týmto problémom. Pridám aj kus kódu: CSS: (niekde sú border-radiusy zbytočne, ale všetko je to v testovacej verzii a vymazať ich nerobí problém) .nav {
width: 100%;
border-radius: 8px 8px 8px 8px;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li a {
margin: 0;
padding: 0;
display: inline-block;
width: 200px;
background: url(../images/nav-li.png) repeat-x 0 0 #5f5f5f;
text-align: center;
float: left;
line-height: 40px;
}
.nav ul li+li a {
border-left: 1px solid black;
}
.nav ul li a {
color: #fff;
text-decoration: none;
}
.nav li.first a {
border-radius: 0 0 0 8px;
}
.nav li.last a {
border-radius: 0 0 8px 0;
}
.nav ul li a:hover {
background: url(../images/nav-li-hover.png) repeat-x 0 0 #900;
}<div class="nav">
<ul>
<li class="first"><a href="#">O mne</a></li>
<li><a href="#">Referencie</a></li>
<li><a href="#">Kontakt</a></li>
<li class="last"><a href="#">Objednať</a></li>
</ul>
</div> |
||
| Str4wberry Profil |
#2 · Zasláno: 17. 5. 2014, 16:08:13
Jestli jste zkoušel
:firstchild, tak to logicky nefungovalo, protože je to :first-child.
|
||
| Tomáš123 Profil |
#3 · Zasláno: 17. 5. 2014, 16:12:05
Str4wberry:
ďakujem, už to funguje. |
||
| Str4wberry Profil |
Jinak by šlo nastavit
border-radius přímo pro společného rodiče + overflow: hidden, ale nefunguje to ve staré Opeře 12.
Živá ukázka |
||
| Tomáš123 Profil |
#5 · Zasláno: 17. 5. 2014, 16:23:22
Str4wberry:
Teoreticky by šlo aj to, a tí čo majú ešte operu 12, sa budú cítiť ako v IE8. Uvidím ako to spravím. Teraz trochu mimo veci, opýtal som s kamaráta, či sa mu páči stránka, a vraj sa mu nepáči menu. Čo si o menu myslíš ty? Ďakujem za názor. |
||
| Bubák Profil |
#6 · Zasláno: 17. 5. 2014, 16:44:57
Tomáš123:
„ďakujem, už to funguje“ Ale doporučuji obejít se bez :last-child, nemá takovou podporu, jako :first-child
http://kod.djpw.cz/rhdb http://kod.djpw.cz/rhdb- |
||
| Tomáš123 Profil |
#7 · Zasláno: 17. 5. 2014, 16:53:19
Bubák:
Ak sa môžem opýtať...tento selektor: .nav ul li:first-child+li+li+li a {
border-radius: 0 0 8px 0;
} |
||
| Bubák Profil |
#8 · Zasláno: 17. 5. 2014, 17:04:42
Tomáš123:
„vyberie iba každý štvrtý element <li>?“ To je problém vyzkoušet? Třebas na něčem jednoduchém: http://kod.djpw.cz/thdb http://kod.djpw.cz/thdb- Selektor ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li v ukázce je dost šílený a pokud k tomu není důvod, jako třeba třebas nemožnost úpravy HTML, raději bych použil třídu.
|
||
| Tomáš123 Profil |
#9 · Zasláno: 17. 5. 2014, 17:08:54
Bubák:
„To je problém vyzkoušet?“ Aha, prepáč, vôbec mi to nenapadlo, ďakujem veľmi pekne za vysvetlenie. |
||
|
Časová prodleva: 12 let
|
|||
0