Autor Zpráva
Rendy
Profil
Na stránkách mám menu, vytvořené pomocí obrázků, kterým se mění barva při přejetí myši. Když však do tohoto menu vložím obrázek bez odkazu, tedy stránka, která je zrovna aktivní, rozjede se mi celý div a vznikne mezi těmito obrázky bílé místo (šířka má být stejná jako u ostatních), přitom v XHTML to fungovalo správně, nemá někdo nápad, co s tím? Validátor žádnou chybu nenašel.



Zápis HTML:
<div class="sidebar">
    <p><a href="stranka"><img src="button1s.gif" width="440" height="30" alt="provadene prace" /></a><img src="but2on.gif" width="220" height="30" alt="cenik" class="sidebar2"/><a href="reference.php"><img src="button3s.gif" width="440" height="30" alt="reference oprav" /></a> a tak dale...</p>
</div>

Třídy CSS:
.sidebar {
    width: 220px;
    margin-top: 35px;
        text-align: right;
}
.sidebar2 {
    width: 220px;
        border-bottom-width: 2px;
    border-bottom-style: outset;
    border-bottom-color: #000000;
}
.sidebar a:hover {text-indent: -220px;}
.sidebar a {display: block; width: 220px; height: 30px;    overflow: hidden; border-bottom-width: 2px; border-bottom-style: outset; border-bottom-color: #000000; }
Fisir
Profil
Reaguji na Rendyho:
Prosím o odkaz na živou ukázku, na testovací stránce uvedený problém nepozoruji.
Mimochodem, příště bych zvolil jednotné formátování kódu a pokud používáš HTML (ne XHTML), tak nahraď /> za >. Takto řešené menu je absolutně nesémantické, použij raději menu pomocí seznamu.
Rendy
Profil
původně to bylo psáno v XHTML, ale kvůli plug-inu FB, který házel chyby jsem dal DOCTYPE html a taky jsem si říkal, že by člověk měl jít tak trochu s dobou :-D ale jiný význam to nemá..
testovací stránka: http://www.servispchk.cz/cenik2.html
Chamurappi
Profil
Reaguji na Rendyho:
původně to bylo psáno v XHTML
Prohlížeče nerozlišují XHTML od HTML podle <!doctype> deklarace, to dělá jen tebou používaný validátor (v rozporu s doporučením lidí z W3C). Používáš stále HTML. Verze se také nerozlišují, prohlížeč má na HTML jen jeden parser.
Deklarace <!doctype> ale ovlivňuje vykreslovací režim, v tomto případě jsi nejspíš narazil na jediný rozdíl mezi režimem standardním a skoro-standardním.
Fisir
Profil
Reaguji na Rendyho:
Horní margin definuješ v CSS (.sidebar2). Takže:
margin-bottom: 0;
vertical-align: middle;
(Bez nastavení vertical-alignu by se ti pod obrázkem vytvořila další mezera.)
Rendy
Profil
Chamurappi:
Alespoń je zase člověk o něco chytřejší, já jsem jenom samouk amatér a popravdě 90% těch málo věcí, ktere vím, jsou jen díky tomuto webu, za to při té příležitosti velké díky autorovi

Fisir:
tím mi to pomohlo odstranit spodní mezeru, ale bohužel vrchní stále zůstává.. ačkoliv původně tam nebyla až po tom, co jsem si hrál se zápisem, který je nakonec stejný, jak byl předtím
jefitto44
Profil
Keď už chceš ísť tak silno s dobou, prečo nepoužiješ html5 tág <nav> a do neho neumiestniš menu? Bolo by to určite semantickejšie ako len tak narucané obrázky. Okrem toho, máš tam také obrázky, ktoré ani nemusia byť obrázky, pretože ich vykreslenie v CSS je otázka dvoch riadkov.
Color: black;
Background: orange;

Pozri si toto: http://www.w3schools.com/html/html5_semantic_elements.asp

Áno áno, ja viem... Ale sú to nové elementy a ja ich používam.

Dosť by ma inak zaujímalo, ako riešiš ten hover. Máš tam obrázok natvrdo, čiže hover musí riešiť javascript. A čo ak má užívateľ vypnutý javascript?
Kubo2
Profil
jefitto44:
html5 tág <nav>

Aký tág? Narozdiel od peta síce aspoň používaš diakritiku, ale zato ju strkáš aj tam, kde netreba.
Bubák
Profil
jefitto44:
Máš tam obrázok natvrdo, čiže hover musí riešiť javascript.
Není vždy nutné mít obrázek naměko.
Nemusí, koukni třebas na Živá ukázka pseudotřídy :hover
Je tam "obrázek natvrdo".
Ukázka, že na odkázané stránce je v HTML opravdu obrázek natvrdo:
<a href="#P"><img src="K.46.hover"></a>
jefitto44
Profil
Jj, ale nie je to zbytočná robota? Nie je jednoduchšie ten obrázok narvať do backgroundu a pri hoveri iba vymeniť obrázok za druhý?
Bubák
Profil
jefitto44:
Před chvíli ses oháněl, jak používáš sémantické tága, takže jsem předpokládal, že rozdíl mezi obrázkem a obrázkem na pozadí ti je znám.
Rendy
Profil
No ty obrázky tam jsou hlavně kvůli písmu, protože to není běžný font, když jsem zjištoval, jestli jde dát vlastní font, tak mi přišlo jednodušší to udělat takhle
jefitto44
Profil
Tento font mi nepripadá ničim zvláštny... kľudne by som tam dal verdanu, alebo helveticu, bežný užívateľ by si rozdiel nevšimol (môj názor). Pridať vlastný font nie je žiaden problém. Ak sa nachádza na google fonts, tak už vôbec žiadny
Fisir
Profil
Reaguji na jefitta44:
prečo nepoužiješ html5 tág <nav>
Protože mu ve starších Explorerech bez nějakého speciálního JavaScriptu nepůjde nastylovat. To raději použít element <menu>, který je taktéž sémantický a podporuje ho i stařičký Explorer 5.
Rendy
Profil
Jinak problém vyřešen, byla tam dvakrát stejná třída, v jedné byl nastaven margin-top. To menu bych už nijak dál nekomplikoval, funguje teď všude stejně, jak jsem měl původně v plánu.
Bubák
Profil
Rendy:
byla tam dvakrát stejná třída, v jedné byl nastaven margin-top
Pokud bys používal nějaký vývojářský nástroj, postačuje i zabudovaný v prohlížeči, tak bys příčinu odhalil během chvilky.
http://jecas.cz/vyvojarske-nastroje
Rendy
Profil
JJ, mám tu Dreamweaver,ale tyhle dodělávky už ladim v poznámkovym bloku, ale asi něco jednoduššího stáhnu.. díky za odkaz :-)
Fisir
Profil
Reaguji na Rendyho:
Prohlížeč pravděpodobně máš, to stačí úplně. Stiskni F12.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: