Autor Zpráva
Tomáš123
Profil
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;
    }
HTML:
<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>
Ďakujem za pomoc všetkým snaživým.
Str4wberry
Profil
Jestli jste zkoušel :firstchild, tak to logicky nefungovalo, protože je to :first-child.
Tomáš123
Profil
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
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
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
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;
}
vyberie iba každý štvrtý element <li>? Ďakujem za ukážku hore, aj za odpoveď.
Bubák
Profil
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
Bubák:
To je problém vyzkoušet?
Aha, prepáč, vôbec mi to nenapadlo, ďakujem veľmi pekne za vysvetlenie.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0