Autor Zpráva
Lukyn
Profil *
Zdravim,potřeboval bych poradit s klikacim logem. Mám zaodkazovanou pouze část loga,ale potřeboval bych celé. Jedná se o stránku www.crusader-stronghold.ic.cz
Prosím,poraďte :)
Taps
Profil
Lukyn
co tak to celé obalit pomocí <a href></a>
gisen
Profil *
<div id="logo">
<h1><a href="index.php" title="Na titulní stránku">Stronghold crusader</a></h1>
</div>

CSS
-------
header h1 a {
display:block;
width:kolik potřebuješ;
height:kolik potřebuješ;
text-indent: -9999px;
}

Takhle to dělám já, ale možná je ještě lepší řešení.
gisen
Profil *
CSS
-------
logo h1 a {
display:block;
width:kolik potřebuješ;
height:kolik potřebuješ;
text-indent: -9999px;
}

Takhle to dělám já, ale možná je ještě lepší řešení.[b][/b]
krteczek
Profil
<h1><a href="index.php" title="Na titulní stránku"><span>Stronghold crusader</span></a></h1>

css:
h1 a {
display:block;
width: 770px;
height: 200px;
background: url('images/header.png') no-repeat;
}
h1 a span {
display:none; //tím se schová text
}
tiso
Profil
krteczek - to je neprístupné riešenie, radšej:
<h1><a href="index.php" title="Na titulní stránku">Stronghold crusader<span><!--img--></span></a></h1>
a pozadie dať span-u napoziciovanému pred odkaz
shaggy
Profil
No hej, lenže... ako to urobíš, keď chcem použiť hover na ten image?

To riešenie totižto až tak neprístupné nie je. Každý kto má vypnuté css (napr. používa čítačku obsahu), ten text uvidí. Takže je to určite menšie zlo ako ho tam nedať vôbec.
Bubák
Profil
To je o kousek těžší:
<style>
#logo {
width: 200px;
height: 40px;
position: relative;
}
a {
width: 100%;
height: 100%;
border: 1px solid #ccc;
display: block;
overflow: hidden;
}
a:hover {
visibility: visible; /* pro IE */
}
#logo a span {
background: lime;
position: absolute;
width: 100%;
height: 100%;
}
#logo a:hover span {
background: transparent;
}
</style>

<h1 id="logo">
<a href="#"><span></span>Přístupný text</a>
</h1>
</div>

V příkladu měním barvu na "transparent" jako simulaci vypnutých obrázků. V praxu se použije background-image a background-position.
tiso
Profil
shaggy - a toto poznáš?
a:hover span{background: ...}

Inak narážal som na neprístupnosť pri vypnutých obrázkoch (a zapnutom CSS), čo je situácia ktorá pri pomalom pripojení bežne nastáva - kým sa stiahne obrázok...
habendorf
Profil
Bubák

Máš tam chybu. Zkus si na ni přijít.
Bubák
Profil
habendorf
Funguje to a chybu nedokážu najít.
<ot>A pak, že nemáš "určité odborné znalosti".</ot>
habendorf
Profil
Bubák

Tak chyba je silné slovo, je to chyba spíše teoretická, jasně že to v praxi funguje.

Ale předpokládám, že to píšeš ve standardu a jaký potom bude rozměr linku?

width: 100%;
height: 100%;
border: 1px solid #ccc;
shaggy
Profil
Áno, poznám takéto riešenia, len mi išlo o to, že v IE6 sa mi ani za boha nezmení kurzor myši ako keby to bol odkaz. Takže keď hovoríme o "prístupnosti", je jedno či sa zobrazí text kým nie je načítaný obrázok - pretože neskúsený užívateľ nebude vedieť, že na to má kliknúť. Bude si myslieť, že to je len pekne meniaci sa obrázok.
tiso
Profil
shaggy cursor funguje
Bubák
Profil
IE6 sa mi ani za boha nezmení kurzor myši
Potulelně jsem čekal, jestli se to tady objeví, ale předpokládal jsem, že CSS vlastnost cursor je velmi dobře známa.

Pro zajímavost, Opera zase nemění kurzor na JS hoverech, ale taly tam jde nadeklarovat.
shaggy
Profil
Priznávam - mne CSS vlasnosť cursor známa nie je, takže sa ospravedlňujem (neprišiel som s tým nikdy do styku), tento jav v IE6 som si všimol až nedávno, keďže ho nepoužívam.
Lukyn
Profil *
No a pánové jak byste to vyřešili na stránce www.slamiczek.ic.cz ??? Tam jsem zkoušel všechno co sem tu našel a nic nepomohlo.
shaggy
Profil
Tak na tej stránke by som to riešil tak, že by som ju celú zmazal a vymyslel niečo normálne.
800x600 obrázok ako klikacie logo? Ty nie si normálny.
Měsíček
Profil
Nevím jestli se to tu už opakovalo, ale není problém to dát přece do odkazu :

<a href="Index.php"><div id="hlavicka">Žabí omáčka web :-)</div></a>
Railbot
Profil
Měsíček
Sémanticky to není správně. Blokový prvek obaluješ řádkovým.
shaggy
Profil
Stáči to urobiť takto:
<a href="Index.php"><span id="hlavicka">Žabí omáčka web :-)</span></a>
(neviem čo ten div/span robí, tak som ho tam nechal)
alebo takto:
<h1 id="hlavicka"><a href="Index.php">Žabí omáčka web :-)</a></h1>

a bude to správne :-)
tcladin
Profil
ahoj možná sem mimo. ale klikací obrázek je tohle:
<a href="http://proc.linux.cz/"><img alt="Proč používat Linux" title="Proč používat Linux" style="border:none; width:88px;height:31px" src="http://proc.linux.cz/img/plc-88x31-box.png" ></a>
Railbot
Profil
tcladin
Taky. Ale tady šlo spíš o image replacement.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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