NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:9.11.2016 13:10

Dobrý den.

Jak docílím toho, abych mohl mezi té klikatelné kruhy dát větší mezeru?

.klikatelnyKruh {
     border-radius: 50%;
     width: 90px;
     height: 90px;
     position: relative;
     background: white;
     display: inline-block;
     border: 1px solid black;
}
<ul>
    <li>
        <a href="/o-mne" class="klikatelnyKruh"><img src="uzivatel.png" alt="O MNĚ">O MNĚ</a>
    </li>
    <li>
        <a href="/projekty" class="klikatelnyKruh"><img src="vrstvy.png" alt="PROJEKTY">PROJEKTY</a>
    </li>
    <li>
        <a href="/kontakt" class="klikatelnyKruh"><img src="obalka.png" alt="KONTAKT">KONTAKT</a>
    </li>
</ul>
Odpovědět
9.11.2016 13:10
Neaktivní uživatelský účet
Avatar
jakubho
Člen
Avatar
jakubho:9.11.2016 13:55

Ahoj, mezeru mezi prvky můžeš nastavit vlastností margin (pro vnější hranici) a případně padding (pro vnitřní hranici) :-)

Nahoru Odpovědět
9.11.2016 13:55
Chyba-Jediná jistota v životě programátora.
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na jakubho
Neaktivní uživatel:9.11.2016 14:48

Díky, ale netuším, kam to mám dát.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li img {
    display: block;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
}

li a {
    display: block;
    padding: 1px 10px;
    text-align: center;
    text-decoration: none;
    border: 1px;
}

.klikatelnyKruh {
     border-radius: 50%;
     width: 90px;
     height: 90px;
     position: relative;
     background: white;
     display: inline-block;
     border: 1px solid black;
}
<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">
    <meta name="author" content="Jan Novák">

    <link rel="stylesheet" type="text/css" href="navigacni-menu.css">

</head>


<body>
    <ul>
        <li>
            <a href="/o-mne" class="klikatelnyKruh"><img src="uzivatel.png" alt="O MNĚ">O MNĚ</a>
        </li>
        <li>
            <a href="/projekty" class="klikatelnyKruh"><img src="vrstvy.png" alt="PROJEKTY">PROJEKTY</a>
        </li>
        <li>
            <a href="/kontakt" class="klikatelnyKruh"><img src="obalka.png" alt="KONTAKT">KONTAKT</a>
        </li>
    </ul>
</body>


</html>
Editováno
Nahoru Odpovědět
9.11.2016 14:48
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:9.11.2016 14:49

li můžeš nastavit padding nebo nastavit marginy "klikatelnýmu kruhu". Víš že selektor li a a .klikatelnyKruh najdou v tvém případě stejné prvky?

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
9.11.2016 14:49
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:9.11.2016 14:58

Díky, ale zároveň mi to kmitá od rohu stránky, zarovnám to tam jak?
Napadlo mě top.

O tom vím, ale rozdělil jsem to na 2 části pro svoji přehlednost.

Nahoru Odpovědět
9.11.2016 14:58
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:9.11.2016 15:58

A jak bych to zarovnal na střed?

Nahoru Odpovědět
9.11.2016 15:58
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:9.11.2016 17:55

Zarovnání na střed můžeš udělat třeba tak, že li sebereš float, dáš jim display: inline-block a ul dostane text-align: center

Nahoru Odpovědět
9.11.2016 17:55
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.