CSS - link achter plaatje

[Verwijderd]

Hiermee tover ik een plaatje op mn webpagina:


#header{
background:url(images/koningmindreaver.jpg) left no-repeat #FFF;
}

Maar ik wil achter dat plaatje ook nog een link. Dus, als ik op dat plaatje klikt gaat ie bv. naar mn homepage. Hoe moet dat (in het css bestand)?

[ Voor 3% gewijzigd door Verwijderd op 20-10-2007 20:51 ]

[Ramon]

Neem een transparante gif, zet hem als img-tag over je #header waar je wil dat het klikbaar is en gaan.

Of je zet je plaatje gewoon als img-tag in de html?

[chem]

maak de a een block, en verstop de tekst. bijvoorbeeld:

HTML:

<a href="joehoe.html" id="hatsee">beschrijvende tekst</a>

Cascading Stylesheet:

#hatsee {
display: block;
width: 123px;
height: 0px;
padding-top: 321px;
overflow: hidden;
}

Of maak een span in de a die je weer verstopt (display: none / visibility: hidden)

[Verwijderd]

hm, kan je mss een voorbeeldje geven hoe ik een transparante gif als img-tag over mn #header zet? dus, hoe moet ik dat typen? (ben nog niet zo goed met css)

[_Thanatos_]

Ramon schreef op zaterdag 20 oktober 2007 @ 20:52:
Neem een transparante gif, zet hem als img-tag over je #header waar je wil dat het klikbaar is en gaan.

Of je zet je plaatje gewoon als img-tag in de html?

Zou ik niet doen. Buiten het feit dat de main header die hier #header heet, eigenlijk een <h1> moet zijn, vererger je het probleem door <img> tags te gebruiken waar geen image hoort (de header is een header en geen img dus) en al helemaal waar geen image is (transparante "spacer" gifs zijn nog van 1998 ofzo).

Ik zou een <a> binnen je <h1> (zoals het hoort) zetten en die linken naar je homepage. Zo is het accessible en semantisch.

[Pendaco]

_Thanatos_ schreef op zondag 21 oktober 2007 @ 21:55:
Ik zou een <a> binnen je <h1> (zoals het hoort) zetten en die linken naar je homepage. Zo is het accessible en semantisch.

Idd de beste oplossing maar dat gaat met enkel een achtergrondafbeelding niet werken in IE6

[Verwijderd]

bedankt voor jullie hulp, ik ga het eens proberen.

[RM-rf]

_Thanatos_ schreef op zondag 21 oktober 2007 @ 21:55:
[...]

Zou ik niet doen. Buiten het feit dat de main header die hier #header heet, eigenlijk een <h1> moet zijn, vererger je het probleem door <img> tags te gebruiken waar geen image hoort (de header is een header en geen img dus) en al helemaal waar geen image is (transparante "spacer" gifs zijn nog van 1998 ofzo).

Ik zou een <a> binnen je <h1> (zoals het hoort) zetten en die linken naar je homepage. Zo is het accessible en semantisch.

sorry hoor.... maar een H1 of A-tag gebruiken zònder feitelijke content erin, heeft imho weinig meer met semantiek te maken, maar is mogelijk nog fouter dan de HTML-struktuur waartegen je je afzet.

In jouw voorbeeld degradeer je de H1-tag tot enkel een loos visueel element in de website zonder dat de H1 gebruikt wordt waarvoor hij eigenlijk bedoelt is, nl. semantische informatie geven over de content (text of andere markup) die hij omsluit.

Semantiek betekent het geven van een 'betekenis' aan bepaalde inhoud (beelden of vormen)... zonder die inhoud, kan semantiek niet bestaan ..
semantiek betekent niet het toepassen van een H1 (ipv een DIV bv, zoals voorheen domme mensen beweerden dat je 'div's moest gebruiken ipv tabellen'); maar juist het kijken naar je inhoud, en op basis van de waarde van je inhoud kijken welke tag deze moet omsluiten.

ikzelf zie niet wat er tegen is op:

HTML:

<a href="link" id="Header"><img src="koningmindreaver.jpg" alt="Koning Mind Reaver"></a>

[ Voor 5% gewijzigd door RM-rf op 22-10-2007 12:38 ]

[Geert.H]

@RM-rf
In dit geval is de link ook de header van de pagina als ik het goed begrijp. Zelf zou ik dan ook geneigd zijn om eerst een H1 element te gebruiken, ook omdat ik kijk naar de inhoud.
Aan de andere kant heb ik zijn website bekeken en is in dit geval "header" een groot woord dus kan je net zo goed <a><img></a> gebruiken.

Uiteindelijk maakt het in dit geval ook niet zo heel veel uit denk ik.

[RM-rf]

Geert.H schreef op maandag 22 oktober 2007 @ 18:36:
Uiteindelijk maakt het in dit geval ook niet zo heel veel uit denk ik.

precies daarom ageer ik een beetje tegen het aanvoeren van 'semantische argumenten' om een totaal lege H1 op een pagina te zetten....

het maakt juist niets uit, de betreffende tag heeft géén inhoud en er bestaat dus geen inhoud waar semantiek iets over te zeggen heeft, hooguit is er een 'visuele waarde', maar H-tags zijn juist niet bedoelt voor 'lege visuele blokken', daarvoor is eigenlijk eerder de DIV gedacht, of beter is het eigenlijk proberen te voorkomen lege elementen enkel voor de 'layout' op je pagina te plaatsen.

[_Thanatos_]

om een totaal lege H1 op een pagina te zetten

Er moet ook een tekst in staan, duh. En die tekst kun je dan hiden met bijv text-indent:-9999px. Dan klopt de pagina semantisch, en kan een browser voor blinden keurignetjes aan de gebruiker melden dat het de header van de site betreft.

[MoietyMe]

chem schreef op zaterdag 20 oktober 2007 @ 20:56:
maak de a een block, en verstop de tekst. bijvoorbeeld:

HTML:

<a href="joehoe.html" id="hatsee">beschrijvende tekst</a>

Cascading Stylesheet:

#hatsee {
display: block;
width: 123px;
height: 0px;
padding-top: 321px;
overflow: hidden;
}

Of maak een span in de a die je weer verstopt (display: none / visibility: hidden)

Dit is denk ik de beste oplossing, zo zou ik het iig doen.

[Verwijderd]

Of op je header een onclick="window.location='link'"

[_Thanatos_]

Of op je header een onclick="window.location='link'"

Onclicks altijd vermijden als ze ook anders kunnen. En dan nog, een event in je html-code hoort daar niet. Die hoort in een losse javascript file, waar je dus el.onclick=function(){...} kunt gebruiken.

Ik zou nog steeds zoiets maken:

HTML:

<h1><a href="/">Mijn homepage!</a></h1>

Cascading Stylesheet:

h1 {
  background: transparent url(image.png) no-repeat;
}
h1 a {
  display: block; 
  width: 90%; 
  height: 80px; 
  text-indent:-9999px;
}

_{disclaimer: niet getest}

[RM-rf]

_Thanatos_ schreef op zaterdag 27 oktober 2007 @ 18:48:
[...]

Er moet ook een tekst in staan, duh. En die tekst kun je dan hiden met bijv text-indent:-9999px. Dan klopt de pagina semantisch, en kan een browser voor blinden keurignetjes aan de gebruiker melden dat het de header van de site betreft.

Is dat niet net zo'm lumineus idee als

code:

<IMG SRC="spacer.gif" ALT="Dit is een verder nutteloos spacer gifje dat verder geignoreerd kan worden">

en dan denken dat de blinden je dankbaar zijn omdat je daarmee je site 'toegankelijk' zou hebben gemaakt?

Wat hebben die blinden er nu aan om te 'weten' of er een verder visuele header boven de pagina staat die voor hen geen belang heeft?

ik blijf erbij dat dit hele verkeerde ideeen zij die juist haaks staan op het idee dat Semantiek is, nl het definieren van de betekenis van de content...
ipv daarvan gaan hier mensen maar 'lege' en eigenlijk niksbetekende content toevoegen, zodat deze de visuele weergave van de site beter zou representeren

[Kiphaas7]

Als ik in het dan zo doe ( en zo doe ik het bijna altijd)

HTML:

<h1><a href="home.html">Beschrijvende en duidelijke titel van mijn site</a></h1>

En dan met css de text verberg, maar een visueel "spetterende" header met in essentie dezelfde boodschap laat zien.


heb je er dan nog bezwaar tegen?

RM-rf schreef op zaterdag 27 oktober 2007 @ 22:07:
[...]


Is dat niet net zo'm lumineus idee als

code:

<IMG SRC="spacer.gif" ALT="Dit is een verder nutteloos spacer gifje dat verder geignoreerd kan worden">

en dan denken dat de blinden je dankbaar zijn omdat je daarmee je site 'toegankelijk' zou hebben gemaakt?

Wat hebben die blinden er nu aan om te 'weten' of er een verder visuele header boven de pagina staat die voor hen geen belang heeft?

ik blijf erbij dat dit hele verkeerde ideeen zij die juist haaks staan op het idee dat Semantiek is, nl het definieren van de betekenis van de content...
ipv daarvan gaan hier mensen maar 'lege' en eigenlijk niksbetekende content toevoegen, zodat deze de visuele weergave van de site beter zou representeren

[_Thanatos_]

Wat hebben die blinden er nu aan om te 'weten' of er een verder visuele header boven de pagina staat die voor hen geen belang heeft?

De browser kan aan de blinde gebruiker duidelijk maken dat het een header is. Of zou je als blinde persoon liever hebben dat je browser ieder spacer.gif plaatje gaat voorlezen?

Heb je eigenlijk weleens gezien hoe zo'n browser werkt?...

[RM-rf]

_Thanatos_ schreef op zondag 28 oktober 2007 @ 19:56:
[...]

De browser kan aan de blinde gebruiker duidelijk maken dat het een header is.

En het nut daarvan is?

Waarom zou een blinde gebruiker iedere pagina weer te horen moeten krijgen dat er bovenaan de pagina een header met visueel 'spetterend' plaatje staat?


Dat is de fout die mensen hier maken, die denken dat 'semantiek' zou zijn dat je de visuele website geheel gaat 'vertalen' naar opleesbaar geheel, en dat alle visuele elementen een direkt equivalent zouden moeten hebben...


zulk een header heeft echter geen enkel nut in een reader-versie en zou waarschijnlijk vooral de benutting van een website via een reader hinderen omdat het geen inhoudelijke waarde heeft.

mensen die bv denken 'text te moeten gaan toevoegen aan een H1 tag en die vervolgens te gaan 'verstoppen' zijn bezig met weinig geapprecieerde SEO-trucjes.. die niks te maken hebben met daadwerkelijke 'semantiek'.

[_Thanatos_]

Moet je maar een tekst beginnen te lezen dat geen titel heeft. Dan ben je pas na een paar zinnen erachter waar het over gaat (een blinde kan een tekst nml niet scannen zoals zienden dat wel kunnen). In het geval van een H1 is het de titel van de pagina (dat kan dus iets anders zijn dan de <title>). Als de gebruiker dat element op de volgende pagina's wil overslaan, dan kan dat vast wel.

En als je het echt goed wilt doen, heb je zo ver mogelijk bovenin je pagina een link "skip to content" om de accesibility nog verder ten goede te komen.

Maar om semantiek SEO-truukjes te noemen is wel een beetje vergezocht. Tuurlijk, een semantische website doet het goed in een zoekmachine, maar dat wil nog niet zeggen dat het een excuus voor betere zoekresultaten is. Ik denk dat je oorzaak en gevolg omdraait.

[RM-rf]

Thanatos, je lijkt niet te begrijpen wat ik probeer uit te leggen...

Semantiek is erg goed, maar dat is iets anders dan 'extra' H1-tags gaan toevoegen aan een pagina en opeens daar een stukje tekst 'bijverzinnen' voor blinden, die je kennelijk niet in de visuele weergave van de pagina nodig hebt....

Je slaat op een verkeerde manier door, zeker als je óók nog eens een 'skip alle onnodige extra elementen die de designer kennelijk nodig vond toe te voegen om arme blindjes lastig te vallen'-linkje boven gaat plaatsen...

met alle respect, maar wààr ben je dan mee bezig, als je je pagina dusdanig gaat 'dicht-plamuren' met allerlei extra toegevoegde 'accessibility'-items die vooral kennelijk nodig zijn om andere accessibility-elementen te omzeilen?

[_Thanatos_]

Je kunt het wenden of keren hoe je wilt, maar een header is een header. Je hebt de keuze tussen een loos linkje+plaatje, of gebruikmaken van een element dat aanduidt dat het om een header gaat. In Word ga je toch ook niet iedere kop een fontsize geven? Die geef je ook een style, zodat de document outline klopt. Dat hoort in HTML ook zo.

En "skip to content", eerst even nadenken voordat je begint af te breken. Waar staat meestal de navigatie? Bovenaan ja. "zet em dan onderaan" hoor ik je al denken, maar dan moet je weer een linkje "skip to navigation" maken. En ja ja ja, ik weet het, natúúrlijk moeten we <nl> gebruiken, maar XHTML 2.0 is nou eenmaal nog niet ingeburgerd.

Dus tot die tijd (en daarna nog steeds) moeten we elementen gebruiken die zoveel mogelijk aansluiten bij de semantiek om iedereen die niet alleen maar de muis en de ogen gebruikt, een handje te helpen.

[RM-rf]

Thanatos... ik héb het hier over Semantiek: het geven van Betekenis aan text-inhoud die gericht is op de 'inhoudelijke betekenis' van elementen.

en met alle respect, maar een Visuele Header, mét 'spetterend' plaatje maar zonder text, is, als je kijkt naar semantische waarde zeker géén H1-element.

- Gaat het om de 'titel van een pagina', voldoet de TITLE-tag in de HEAD uitstekend daarvoor
- Gaat het om een afbeelding welke een 'verklarende tekst zou moeten krijgen, dààrvoor is de ALT-attribuut gedacht
- Gaat het om een 'Home-link' zou een 'meta-navigatie' onderop de pagina ook kunnen voldoen, met nette Acceskeys, óf kun je kiezen voor een LINK REL="Home" in de Head

Een 'Skip navigation' is een prima idee als je de hoofdnavigatie wel bovenaan wilt plaatsen.. maar het is geen uitvlucht om het bovenste deel van een pagina verder helemaal vol te plempen met totaal overbodige elementen...
helemaal als je dan ook nog 'semantiek' en 'accesibility' gaat aanhalen als 'reden' daartoe en beweert 'dat dat voor blinden handig is', terwijl je eigenlijk gewoon SEO-trucjes bedoelt.

Ik wil je overigens geheel niet afkraken... maar ben het eerlijk gezegd absoluut niet eens met jouw interpretatie van wat 'Semantiek' zou inhouden

[ Voor 4% gewijzigd door RM-rf op 31-10-2007 09:07 ]

[Verwijderd]

De oplossingen die aangedragen zijn lijken mij vrij compleet. Ikzelf heb meerdere discussies gehad met collega's over het gebruik van de H1 tags; onze conclusie was toch dat we deze niet voor een logo of header zouden moeten gebruiken. Het logo of de header dient vaak inderdaad als bedrijfsnaam, terwijl de inhoud van de pagina vaak over iets specifiekers gaat dan alleen de bedrijfsnaam. Indien je het logo of de header een H1 zou geven, zou de titel van de pagina dus een H2 worden > wat qua SEO weer een stuk minder wenselijk is. Dient een header puur der decoratie gebruik ik css om een achtergrond aan de header mee te geven. Gaat het om een logo, gebruik ik een img.

[Geert.H]

ok, als we dan toch bezig zijn met het uitwisselen van gedachten.
Hoe zit het met de volgende case:

HTML:

<body>
  <h1 id="header">
   <!-- Logo -->
     <a href="home.php"><img src="logo.jpg" alt="Logo bedrijf"></a>

   <!-- Menu -->
     <a href="home.php"><img src="home.jpg" alt="Home"></a>
     <a href="anders.php"><img src="home.jpg" alt="Anders"></a>
     <a href="derdepag.php"><img src="home.jpg" alt="Derde Pagina"></a>
  </h1>

In dit geval heeft de header een achtergrond afbeelding, in de header zelf wordt echter ook een logo geplaatst en een menu gedefinieerd.Volgens mij is dit semantisch correct of heb ik het verkeerd? Ik voeg namelijk geen tekst toe in deze header maar plaats er wel alles in wat officieel in de header van de pagina hoort.

[Grijze Vos]

Een menu is geen onderdeel van een header. Je header is "waar gaat deze pagina / deze paragraaf over", dat staat los van je navigatie.

[RM-rf]

Geert.H.. mijn idee zou zijn dat je een H1 toepast waar die niet voor bedoeld is.
en allrminst wat er officieel in een header hoort; je lijkt ideeen over 'syntax' van een pagina (de syntax bepaald de structuur an sich zonder zich te bemoeien met betekenis van elementen) te verwarren met semantiek, wat erover gaat wàt precies de waarde en betekenis is van bepaalde informatie en elementen in je pagina.


de H1 in de specificatie:
http://www.w3.org/TR/html401/struct/global.html#edef-H1

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Nergens zie ik dat terug in je opzet, de enige content is een lijstje navigatie-links, die echter beter in een UL geplaatst kunnen worden of bv in een DIV-sectie.