Z-index css
steve-elipz
Messages postés
171
Statut
Membre
-
animostab Messages postés 3003 Statut Membre -
animostab Messages postés 3003 Statut Membre -
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>
A voir également:
- Z-index css
- Code ascii de a à z - Guide
- Index téléphonique - Guide
- Gpu z - Télécharger - Informations & Diagnostic
- Cpu z - Télécharger - Informations & Diagnostic
- Telecharger index - Télécharger - Gestion de fichiers
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
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
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