CSS vraagje
padding-bottom: 12px;
background: url('images/gallery_title.gif') no-repeat 29px 80px;
}
kan ik van dat achtergrondplaatje ook een link maken? ik wil dat als iemand daar op klikt je naar mijn fotoalbum gaat.
dus
<div id="portfolio" onclick="window.location.href='iets.php'">je tekst</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="portfolio">
<a href="iets.php">Portfolio</a>
<!-- ik neem aan dat er meer komt? Anders kan je net zo goed 1 a-tag neerzetten! -->
</div>
div#portfolio
{
padding-bottom: 12px;
}
div#portfolio a
{
display: block;
width: 180px; /* breedte van afbeelding */
height: 180px; /*hoogte van afbeelding */
background: url('images/gallery_title.gif') no-repeat 29px 80px;
text-indent: -9999px;
font-size: 1%;
}
<a href="iets.php">Portfolio</a>
<!-- ik neem aan dat er meer komt? Anders kan je net zo goed 1 a-tag neerzetten! -->
</div>
div#portfolio
{
padding-bottom: 12px;
}
div#portfolio a
{
display: block;
width: 180px; /* breedte van afbeelding */
height: 180px; /*hoogte van afbeelding */
background: url('images/gallery_title.gif') no-repeat 29px 80px;
text-indent: -9999px;
font-size: 1%;
}
Zo zet je gewoon een link erin.
Die bepaald het formaat van de div.
De tekst wordt onzichtbaar gemaakt, maar Google leest het wel.
Als er alleen die link komt kan je de div net zo goed laten vervallen en geef je de a-tag het id="portfolio".
Dit werkt altijd, ook bij oudere versies.
En waar Javascript uitstaat. En is dus (theoretisch) iets sneller omdat je geen Javascript gebruikt.
Font-size: 1% wordt volgens mij overal wel ondersteund. Je kan ook 0 proberen, maar ik weet niet of dat werkt. Zo ja: dan dan de text-indent weg ;).
Manier van Eddy is inderdaad sneller, zoekmachinevriendelijker (omdat Google de tekst inderdaad leest, maar ook de link kan volgen) en is altijd beter ondersteund dan javascript.
Zet javascript maar eens uit, dan werkt onclick niet meer.
Die font-size: 1% gebruik ik trouwens niet. De text-indent alleen is genoeg.
Of wanneer het dynamisch is. In alle andere gevallen kun je dit het beste oplossen met een background-image in css.
Ik kijk altijd naar de website die ik heb ontwikkeld met css aan en uit.
Wanneer de css uitstaat moet de site goed te lezen zijn en niks geen overbodige afbeeldingen en dergelijke bevatten. De keuze moet de ontwikkelaar dus zelf maken.