| Autor | Zpráva | ||
|---|---|---|---|
| LeTiim Profil * |
#1 · Zasláno: 1. 1. 2011, 21:05:33
Dobrý den, snažím se vytvořit horizontální menu (za použití ul a float se podařilo). Jde o to, že opětovnou aplikací float na položky podmenu, se nepodařilo dosáhnout zamýšleného efektu, tedy horizontálního podmenu. Prohlížeč prostě ignoruje můj zápis viz. níže. Otázka se kterou potřebuji poradit je proč?
Je to snad tím, že tag ul v podmenu má nastaveno position:absolute a seznam je tak vyjmut z dokumentu a jeho položky už nemohou plavat? ...anyway po smazání víše zmíněného stejně nefunguje, navíc k mému údivu, se podmenu vysouvá na správném místě. html:
<ul class="menu uroven1">
<li class="polozka1"><a href="${dir}info/">Základní informace</a>
<ul class="menu uroven2">
<li class="polozka2"><a href="#cshp">Spolek </a></l
i>
<li class="polozka2"><a href="#iml">International Mountain Leader</a></li>
<li class="polozka2"><a href="#uimla">Union of Mountain Leader Association
s</a></li>
</ul>
</li>
<li class="polozka1"><a href="${dir}info/">  Členství</a></li>
<li class="polozka1"><a href="${dir}poradame/">  Pořádáme</a>
<ul class="menu uroven2">
<li class="polozka2"><a href="">Aktuální akce 1</a></li>
<li class="polozka2"><a href="">Aktuální akce 2</a></li>
<li class="polozka2"><a href="">archiv</a></li>
</ul>
</li>
</li>
<li class="polozka1"><a href="${dir}clenove/">  Registrovaní průvodc</a></
li>
<li class="polozka1"><a href="${dir}dokumenty/">  Dokumenty ČSHP</a></li>
<li class="polozka1"><a href="${dir}uchazeci/">  Pro uchazeče</a></li>
</ul>
css:
/*################################ horizont menu ###########################*/
.menu {
padding: 0;
margin: 0;
}
.menu a {
text-decoration: none;
color: #333;
display: block;
width: 100%;
text-align: center;
}
.menu ul, .menu li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.uroven1 li.polozka1 {
float: left;
position: relative;
top: -15px;
font-weight: bold;
background: #fff url('./pic/menu_button.png') center center no-repeat;
padding: 0em 0em;
margin: 0;
height: 2.2em;
width: 137px;
_width: 1px; /* IE */
}
ul.uroven2 {
position: absolute;
top: 2em;
_top: 1.6em; /* IE */
width: 137px;
background: #adf;
visibility: hidden;
padding: 0;
}
ul.uroven2 li.polozka2 {
width: 137px;
height: 2.2em;
padding: 0em 0em;
margin: 0;
background: #8bd;
_width: 1px; /* IE */
}
ul.uroven2 li.polozka2 a {
font-weight: normal;
text-align: left;
padding: 0;
margin: 0;
}
ul.uroven2 li.polozka2 a:hover {
background: #8bd;
}
.menu a:hover {
text-decoration: underline;
}
ul.uroven1 li.polozka1 {
behavior: url(hover.htc);
}
ul.uroven1 li.polozka1:hover, ul.uroven1 li.polozka1Hover {
}
ul.uroven1 li.polozka1Hover ul.uroven2, ul.uroven1 li.polozka1:hover ul.uroven2
{
visibility: visible;
}
Zdá se mi, podle výsledků při hledání na google.cz, že se tato konstrukce moc nepoužívá, přesto ji potřebuji. Děkuji za pomoc a omlouvám se za případnou nesrozumitenost...začínám. |
||
| LeTiim Profil * |
#2 · Zasláno: 1. 1. 2011, 22:23:00
Ojoj napsala jsem chybu v css souboru. Správně tam má být:
ul.uroven2 li.polozka2 {
float: left;
width: 137px;
height: 2.2em;
padding: 0em 0em;
margin: 0;
background: #8bd;
_width: 1px; /* IE */
}
Právě to float:left |
||
| LeTiim Profil * |
#3 · Zasláno: 3. 1. 2011, 01:00:58
Ani po dlouhém namáhání se mi nepodařilo najít chybu v kódu.
Podívala jsem se lépe na seznam hotových menu na intervalu.cz a světe div se, našla přesně to které jsem potřebovala. Světe už se divit nemusíš ale jen pro úplnost, menu funguje. Závěr: Třikrát se dívej a jednou předělávej. |
||
| Chamurappi Profil |
#4 · Zasláno: 3. 1. 2011, 11:25:52 · Upravil/a: Chamurappi
Reaguji na LeTiim:
„Závěr: Třikrát se dívej a jednou předělávej.“ … a chceš-li od někoho poradit, dodej raději odkaz na živou ukázku než hromadu zdrojového kódu. |
||
|
Časová prodleva: 14 let
|
|||
0