V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
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>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?
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.
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
Zobrazeno 7 zpráv z 7.