Klikací logo-jak na něj?

Lukyn
co tak to celé obalit pomocí <a href></a>

<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í.

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]

<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
}

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

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.

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.

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...

Bubák

Máš tam chybu. Zkus si na ni přijít.

habendorf
Funguje to a chybu nedokážu najít.
<ot>A pak, že nemáš "určité odborné znalosti".</ot>

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;

Á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.

shaggy cursor funguje

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.

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.

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.

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>

Měsíček
Sémanticky to není správně. Blokový prvek obaluješ řádkovým.

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 :-)

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>

tcladin
Taky. Ale tady šlo spíš o image replacement.