Autor Zpráva
PerToon
Profil
Mám levý menu. Udělal sem odkazy display: block; takže každý odkaz je na řádku a vlastnost hover nefunguje jen na samotný text, ale na obdélník, který je mnohem větší. Funguje v IE, Mozille a Opeře.
Mám horní menu jako lištu. Chtěl sem udělat to samý, s tím rozdílem, že tady se musí odkazy jako bloky zobrazit v řádku, což sem vyřešil floatováním. Důvodem zde bylo to, aby měly odkazy také větší klikací plochu. Funguje v Opeře a Mozille.
IE spustí hover až při najetí na text, ale potom kupodivu vydrží na celým obdélníku. Ale štve mě, že musím najet až na mrňavej text, aby se mi podsvítil velký obdélník.
Nevím čím to může být, zvlášť když to v IE pro levý menu funguje. Zkuste poradit.
Ještě sem zkusím dát zlomky kódu a CSS, který by s tím mohly mít co dělat.
Petra
Profil
a{width:100%} by to nespravilo?
PerToon
Profil
V HTML se jedná o tohle:
<div id="hotmenu"><div id="inhotmenu">
<a href="">Jeden</a>
<a href="">Druhý</a>
<a href="">Třetí</a>
<a href="">Čtvrtý</a>
<a href="" class="jazyk"><img src="images/cz.gif">Pátý</a>
<div class="vypln">&nbsp;</div>
</div></div>
<div id="leftmenu"><br>
<a href="">Jeden</a>
<a href="">Druhý</a>
<a href="">Třetí</a>
<a href="">Čtvrtý</a>
<br></div>

V CSS se jedná o tohle:
body { margin: 0px;
padding: 0px;}
.vypln {padding: 5px;}
#hotmenu { margin: 30px;
margin-top: 10px;
margin-bottom: 10px;
text-align: left;}
#inhotmenu {margin-left: 5px;}
#inhotmenu a {text-decoration: none;
color: #000066;
padding: 5px;
display: block;
width: 15%;
float: left;
margin: 0px;}
#inhotmenu a:hover {color: #000099;
background-color: #dddddd;}
#leftmenu {margin: 30px;
display: inline;
margin-top: 0px;
margin-right: 0px;
width: 150px;
float: left;}
#leftmenu a {text-decoration: none;
color: #000066;
padding: 10px;
display: block;
width: 130px;
margin: 0px;}
#leftmenu a:hover {background-color: #cccccc;
color: #000099;}
PerToon
Profil
Petra - ale já tam potřebuju víc odkazů a jinou šířku (15%) mám nastavenou.
Radek Hrabůvka
Profil
PerToon Ta potvůrka podivná, zvaná MSIE chce background.
Fred
Profil
PerToon Chybu ti tam dělá ta výplň. Zkus úplně odstranit

<div class="vypln"></div> a bude po problému, stejně se mi nezdá, že by to tam mělo nějaký smysl.
PerToon
Profil
Radku - můžeš trochu víc objasnit? jako nastavit background-color i pro normální odkaz?

Frede - v tý výplni je nedělitelná mezera. A má to smysl, protože potřebuju něco, co bude mít výšku jako ty odkazy, protože jinak má div nulovou výšku a celá stránka se rozhází.
Fred
Profil
PerToon Neříkej mi něco co není pravda. http://xy.wz.cz/PerToon.html
PerToon
Profil
Frede, to sem pořádně nepochopil. Ve zdrojáku viz výše je <div class="vypln">&nbsp;</div>
Všechen ostatní obsah divu inhotmenu je kvůli floatování vyjmut z toku dokumentu a tudíž div inhotmenu nemá obsah. Proto je tam přidaná ta mezera s paddingem, která bude zabírat takovou výšku, jako textový odkaz s paddingem.
Ale s dalším obsahem stránky už se mi to rozhází. Tak to bude procházet krok po kroku, no... A to menu se mi na tom xy.wz.cz zobrazuje vpravo místo vlevo, vidíš?
Fred
Profil
PerToon
vpravo místo vlevo LOL sorry to udělal čistič: http://flumpcakes.co.uk/css/optimiser/ ;-), ještě se na to mrknu.
Fred
Profil
Hm, aha mrkni se tam znovu, nebylo to vyclearovaný. ctrl+r
PerToon
Profil
Přidání background-color pro odkaz způsobilo správnou reakci hover už při najetí na vymezený obdélník!!!!!!!!
Děkuju Radku!!!!!!
Tobě taky Frede!
Fred
Profil
PerToon Hm, ale stejně se tam mrkni a zaktualizuj si to.
PerToon
Profil
Frede, pokud ale budu chtít, aby ten div hotmenu měl pozadí, což chci, tak už mám podle tvýho řešení smůlu, protože ty odkazy jsou z něj vyjmutý. Takže já tam musím mít alespoň nějaký obsah.
Zkus si do tvojí verze přidat
#hotmenu {background-color: #dddddd;
border-style: solid;}
Fred
Profil
PerToon Aha, tady jsem nebyl. Tak jsem to tam opravil http://xy.wz.cz/PerToon.html ten obsah tam fakt mít nemusíš. BTW záleží na obrázku, možná by si to musel překopat z em na pixely.
PerToon
Profil
Frede - teď to mám takhle http://www.mujweb.cz/www/pertoon/tec/kopyto.html
Toto téma je uzamčeno. Odpověď nelze zaslat.

0