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: 10 let
|
0