Image link werkt niet.

**John Bouma** · 01-12-2012, 16:27

voor een opdracht van school ben ik weer eens even aan de slag gegaan met html/css.
Ik probeer een link te maken van een image. meestal geen enkel probleem mee.
Ik doe naar naar mijn idee niks fout. maar als als ik een class aan de img wil toewijzen.
om de buttons individueel te positioneren werkt de link niet meer ?

De code om het te verduidelijken.

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Title</title>

<title>test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />

</head>

<img src="img/bg.jpg" class="bg">
    
    <div id="container">
    
        <div class="header">

            <a href="index.html"> <img src="img/home.gif"></a>
            
            <a href="index.html">
            <img class="videos" src="img/home.gif">
            </a>
            
            <a href="html.html">
            <img class="twitter" src="img/home.gif">
            </a>
            
            <a href="html.html">
            <img class="overmij" src="img/home.gif">
            </a>

        </div>    
 <knip>

De css

PHP Code:


/* Background */

img.bg
{
min-height: 100%;
min-width: 1024;

width: 100%;
height: auto; 

Position:fixed;
top:0;
left: 0;
z-index: -1; 
} 
@media screen and (max-width: 1024px) { 
    img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}

/* Einde Background */


div#container
{
Width: 1024x;
height: 1000px;
margin:auto;
z-index: 1;
}

/* Einde container */


/* Begin Header */
.header
{
background-image:url('img/header.png');
height:345px;
Width: 1141px;
margin:auto;
margin-top: -10px;
}

/* Einde Header */

/* Begin menu */

img.home
{
margin-left: 700px;
margin-top: 150px;
position:absolute;
z-index: -1;
}
img.videos
{
margin-left: 750px;
margin-top: 140px;
position:absolute;
z-index: -1;
}
img.twitter
{
margin-left: 800px;
margin-top: 120px;
position:absolute;
z-index: -1;
}
img.overmij
{
margin-left: 850px;
margin-top: 110px;
position:absolute;
z-index: -1;
}
/* Einde menu */

/* Doorzichtige content */

#content 
{
background-image:url('content.gif');
height:270px;
Width: 922px;
margin:auto;
margin-top: 40px;
margin-left: 230px;
 opacity:0.2;
  filter:alpha(opacity=20); /* voor ie 8 en lager */
}

/*  einde Doorzichtige content */

/* begin onder kant content! */

.content-bottom
{
background-image:url('img/content-top.gif');
height:20px;
Width: 922px;
margin-left: 230px;
margin-top:0px;
}

een afbeelding om het hopelijk te verduidelijken
http://i47.tinypic.com/2nv8l87.jpg

het gaat om de home afbeeldingen.
ik krijg het niet voor elkaar om daar een klikbare link van te maken.
als de class verwijder is het wel mogelijk maar dan kan ik ze niet meer individueel positioneren.
hoop dat het zo een beetje duidelijk is en iemand een idee heeft wat ik fout doe ?

**BaukR** · 02-12-2012, 12:03

kun je de boel ff uploaden ofzo zodat ik live kan zien wat er mis gaat?

**John Bouma** · 02-12-2012, 13:08

kun je de boel ff uploaden ofzo zodat ik live kan zien wat er mis gaat?

Het probleem is kortgezegd. de z-index maakt mijn link dood.
heb al geprobeerd om de header een hogere z-index te geven.

zoals hier:

PHP Code:


#header
{
background-image:url('img/header.png');
position:absolute;
height:345px;
Width: 1141px;
z-index:4;
}

.home
{
margin-left: 700px;
margin-top: 150px;
position:relative;
z-index: 2;

}

Dat werkt ook gewoon de rode vlaggetjes komen onder de header.
Maar de link werkt dan nog niet.
heb geprobeerd om de img tag in een div te doen zelfde probleem.

Heb momenteel niet de mogelijkheid om het snel te uploaden helaas.
dus ik hoop dat het duidelijk is ;)

**Thomas De Jonghe** · 03-12-2012, 12:09

Het probleem zit hem inderdaad in de z-index. Die van je header is hoger als van je knoppen. Hierdoor liggen de knoppen er dus poneert en kan je er niet op klikken. Probeer maar om de index van je knoppen op 5 te zetten. Nu zal je er wel op kunnen klikken.

Het design zal dan wel niet meer juist zijn, maar dit is wel de reden je waarom het nu niet werkt.

Image link werkt niet.