| Autor | Zpráva | ||
|---|---|---|---|
| Mati Profil |
#1 · Zasláno: 10. 4. 2013, 09:47:23
Vytvořil jsem si jednoduché menu pomocí seznamu ul. Ale abych mohl použít vlastnost background-color na div, který mi obaluje menu, potřeboval jsem vložit něco, co může mít vlastnost clear:both. Vytvořil jsem div pomocny, který vkládám za seznam. Tohle řešení se mi nelíbí, protože je to něco, co je tam navíc.
Teď jsem narazil na vlastnost content, která spolu s pseudotřídou umožňuje vkládat text, ale z toho co o tom píše Yuhů mi není jasné, jestli to je vhodné použít. Tady je ukázka, kde jsou obě varianty. Mohli by jste mi poradit, zda to bude fungovat ve většině prohlížečů a nebo existuje nějaký lepší způsob, který jsem ještě neobjevil? <!doctype html>
<html>
<head>
<style>
.pomocny {clear:both;}
.menu{background-color: gray;}
.mainmenu1,.mainmenu2 {width: 100%;}
.mainmenu1 ul li, .mainmenu2 ul li {float: left; margin: 1em; display: block; }
.mainmenu2 ul:after { clear:both; display: block; content: ' '; }
</style>
</head>
<body>
<h1>Varianta I</h1>
<div class=menu>
<div class="mainmenu1">
<ul>
<li><a href="" >Položka 1</a></li>
<li><a href="" >Položka 2</a></li>
<li><a href="" >Položka 3</a></li>
</ul>
<div class="pomocny"> </div>
</div>
</div>
<h1>Varianta II</h1>
<div class=menu>
<div class="mainmenu2">
<ul >
<li><a href="" >Položka 1</a></li>
<li><a href="" >Položka 2</a></li>
<li><a href="" >Položka 3</a></li>
</ul>
</div>
</div>
</body>
</html> |
||
| Str4wberry Profil |
#2 · Zasláno: 10. 4. 2013, 09:56:17
No, nebude to fungovat ve starších Explorerech než 8. Jinak
clearovat bez pomocných elementů lze pomocí overflow: hidden.
|
||
| peta Profil |
#3 · Zasláno: 10. 4. 2013, 10:04:12
A co treba to prevest na
inline?
<style>
.menu{background-color: gray;}
.menu ul, .menu li {list-style-type:none; display:inline; margin:0; padding:0;}
.menu li {margin: 1em;}
</style> |
||
| margin Profil * |
#4 · Zasláno: 10. 4. 2013, 10:43:22
Mati:
„nebo existuje nějaký lepší způsob, který jsem ještě neobjevil?“ .menu ul {overflow: hidden;}Tip mimo téma: Možná to je jen kvůli ukázce, ale vhodnější je nedávat margin položkám menu (řádek 8), ale dát padding blokovým odkazům, plocha ke kliknutí je pak větší. Deklarovat položky menu jako blokové, nebo jim odebrat odrážky vyjde nastejno, ale u deklarace list-style: none; je každému zřejmé, co dělá.
.mainmenu1 ul li, .mainmenu2 ul li {float: left; list-style: none;}
.menu a {display: block; padding: 1em; background: #baf;} |
||
| Mati Profil |
#5 · Zasláno: 10. 4. 2013, 15:04:21
Dík za rady, vyzkouším je. Jen úplně nechápu, jak přesně vlastnost overflow: hidden funguje. Nenapadlo by mi ji po přečtení její funkce použít.
|
||
|
Časová prodleva: 11 let
|
|||
0