Z-index css

Fermé

steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018 - Modifié par steve-elipz le 26/08/2014 à 19:58
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 26 août 2014 à 21:38

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
Z-library - Accueil - Services en ligne
Excel trier de a à z ne fonctionne pas - Guide
Gpu z download - Télécharger - Informations & Diagnostic

3 réponses

Réponse 1 / 3

steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
26 août 2014 à 20:30

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>

Réponse 2 / 3

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
26 août 2014 à 20:57

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

Réponse 3 / 3

steve-elipz Messages postés 148 Date d'inscription mercredi 4 avril 2012 Statut Membre Dernière intervention 7 avril 2018
26 août 2014 à 21:17

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>

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
26 août 2014 à 21:38

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

Discussions similaires