| Autor | Zpráva | ||
|---|---|---|---|
| RKD Profil |
#1 · Zasláno: 23. 12. 2009, 21:52:48
Zdravím,
když floatnu položky menu doleva, v Exploreru šestce položky neleží v jedné řadě, ale vytvoří schody. Pamatuju se, že jsem to před lety řešil, ale už sem zapomněl. Nehodí nekdo rychý tip? |
||
| RKD Profil |
Aháá, zapomněl jsem přetypovat.
li {display: inline;} |
||
| Str4wberry Profil |
#3 · Zasláno: 24. 12. 2009, 00:51:11
Pokud se nepletu, tak se to vyřeší zapnutím hasLayoutu — čili stačí třeba i „zoom: 1“.
|
||
| Bubák Profil |
#4 · Zasláno: 24. 12. 2009, 11:25:22
RKD:
Protože jsi nedodal odkaz ani jsi neukázal problémový kód, pokusil jsem se udělat schodovité menu, ale nepodařilo se mi to. Str4wberry: „Pokud se nepletu, tak se to vyřeší zapnutím hasLayoutu“ Floatovaný element má haslayout. Pomáhá třebas floatování nejen položek LI, ale i odkazů. Deklarovat položky jako inline nepomůže, chyba musela být jinde. * {zoom: 1}Používám při ladění, pokud je layout rozhozený v IE, přidáním téhle deklarace rychle zjistím, zda je příčinou problémů haslayout. Pokud ano, hledám problematický element a zapnu mu haslayout nějakou neškodnou validní CSS deklarací. hasLayout Property |
||
| RKD Profil |
#5 · Zasláno: 25. 12. 2009, 21:38:40 · Upravil/a: RKD
Fíha, to už je doba, co sem kódoval, na hasLayout jsem dočista zapomněl. :-) Dík za připomenutí.
Opravdu to bylo displayem. BUBÁK: Když se ti ty schody nepovedly a kdyby tě to ještě zajímalo, níže máš vypreparovanou inkriminovanou část kódu. Problém se vyskytoval jenom ve standardním módu MSIE 6, vejš už bylo všechno OK. Prázdný spany jsou kvůli jednomu z image replacementů, ale psal jsem to z hlavy, takže asi nebude v klasický podobě, (taky sem teď ustříh konec). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> #menu { width: 464px; height: 72px; position: absolute; right: 88px; bottom: 22px; } #menu li {display: inline; list-style-type: none;} /***** ! */ #menu a, #menu a span { height: 72px; width: 143px; } #menu a { float: left; position: relative; background-color: #5b7329; } .active {background-color: #95a617 !important;} </style> </head> <body> <ul id="menu"> <li> <a href="/" title="1" id="1" class="active">1<span></span></a> </li> <li> <a href="/" title="2" id="2">2<span></span></a> </li> <li> <a href="/" title="3" id="3">3<span></span></a> </li> </ul> </body> </html> |
||
| Bubák Profil |
#6 · Zasláno: 26. 12. 2009, 00:42:15
RKD:
„Prázdný spany jsou kvůli jednomu z image replacementů“ Znám, ale taky bych ho nenapsal zpaměti. Pokud chci položky o konkrétní velikosti, pak položky menu <li> floatuji (příčina schodů) a dávám rozměry už položkám, což ty nemůžeš, protože je máš inline. Také se zjednoduší zadávání rozměrů pro obsah položek, kdy jim dám výšku i šířku 100%, pokud "neblbnu" třebas s orámováním. <!DOCTYPE HTML>
<style>
#menu {
width: 464px;
height: 72px;
}
#menu li {
list-style: none;
float: left;
height: 100%;
width: 143px;
}
#menu a, #menu a span {
height: 100%;
width: 100%; float: left;
}
#menu a {
float: left;
position: relative;
background: lime;
}
#menu a.active span {
background: none;
}
#menu a span {
background: silver;
position: absolute;
left: 0;
}
#menu a:hover {
background: yellow;
}
#menu a:hover span {
background: none;
}
</style>
<ul id="menu">
<li>
<a href="/" title="1" id="1">1<span></span></a>
</li>
<li>
<a href="/" title="2" id="2" class="active">2<span></span></a>
</li>
<li>
<a href="/" title="3" id="3">3<span></span></a>
</li>
</ul>http://teststranek.kvalitne.cz/schody.html Trochu si hraji s pozadím, nechtělo se mi dělat obrázky pro image-replacement a na odladění kódu to stačí. |
||
|
Časová prodleva: 14 let
|
|||
0