Z-index css
bonjour a tous, j'essaye de mettre une image en haut a droite de la page avec un lien sur cette image (sociaux.png) seulement l image est en dessous du background... quelqu un pourrait m indiquer comment faire svp?
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
height:100%;
width:100%;
min-height:100%;
margin:0;
padding:0;
font-size:0;
}
#gauche {
display:inline-block;
width:50%;
height:100%;
background: url(background2.png);
background-size:cover;
}
#droite {
display:inline-block;
width:50%;
height:100%;
background: url(background3.png);
background-size:cover;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function() {
document.getElementById("gauche").onclick = function() {
document.location.href="test1.html";
};
document.getElementById("droite").onclick = function() {
document.location.href="test2.html";
};
}
</script>
<div id="gauche"></div>
<div id="droite"></div>
</body>
</html>
3 réponses
-
j ai essayé ca mais.... rien a faire
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
height:100%;
width:100%;
min-height:100%;
margin:0;
padding:0;
font-size:0;
}
#gauche {
display:inline-block;
width:50%;
height:100%;
background: url(background2.png);
background-size:cover;
}
#droite {
display:inline-block;
width:50%;
height:100%;
background: url(background3.png);
background-size:cover;
}
#facebook {
background-image: url(sociaux.png);
position:absolute;
width:50%;
height:100%;
z-index:-1;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function() {
document.getElementById("gauche").onclick = function() {
document.location.href="test1.html";
};
document.getElementById("droite").onclick = function() {
document.location.href="test2.html";
};
}
</script>
<div id="gauche"></div>
<div id="droite"></div>
<div id="facebook"></div>
</body>
</html> -
re salut
pour que z-index fonctionne il faut
que les les éléments concernés soit positionné.
donc rajoute position:relative; et z-index:1; a #gauche et #droite
dans #facebook mets
z-index:10;
top:0;
left:0;
la valeur la plus grande de z-index se positionne par dessus les valeurs inférieures
pense que ta div facebook à des dimensions qui recouvrent entièrement la moitié de ta page donc il sera impossible de cliquer sur #gauche
voila voila -
le soucis est que l image facebook n est pas dans l'image ni en haut a droite... voici mon code comme vous l'avez suggérez
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
height:100%;
width:100%;
min-height:100%;
margin:0;
padding:0;
font-size:0;
}
#gauche {
display:inline-block;
width:50%;
height:100%;
background: url(background2.png);
background-size:cover;
position:relative;
z-index:1;
}
#droite {
display:inline-block;
width:50%;
height:100%;
background: url(background3.png);
background-size:cover;
position:relative;
z-index:1;
}
#facebook {
background-image: url(facebook.png);
position:relative;
width:154px;
height:25px;
z-index:10;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function() {
document.getElementById("gauche").onclick = function() {
document.location.href="test1.html";
};
document.getElementById("droite").onclick = function() {
document.location.href="test2.html";
};
}
</script>
<div id="gauche"></div>
<div id="droite"></div>
<div id="facebook"></div>
</body>
</html>-
déjà tu n'as pas mis #facebook avec position:absolute
en fait ton image facebook il faudrait la mettre dans la div facebook et réduire la taille de la div a celle de l'image
comme cela par exemple
<div id="facebook"><a href="http://mapagefacebook.com"<img src="facebook.png" alt="facebook" height="25" width="154"></a></div>
et le css
#facebook {
position:absolute;
top:0;
left:0;
width:154px;
z-index:10;
}
il ne faut pas mélanger les images de background qui sont pour le design (donc css) et les images de contenu qui sont pour le contenu
-
