28172 sujets

CSS et mise en forme, CSS3

Css3 z-index

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?

<code>

<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>

</code>
j ai ecris ca mais cela ne fontionne pas non plus...

<code>

<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>

</code>
Bonjour steve-elipz,

J'ai du mal à saisir pourquoi tu utilise du JavaScript pour faire 2 liens image distincts.

De plus de mémoire il me semble que Z-INDEX ne supporte pas de valeur négative [de 0 jusque l'au-dela] et ne fonctionne que sur les éléments positionnés.

Je ne sais pas non plus où tu place ces lien dans ton code global mais je peux te proposer ceci :

<!DOCTYPE html>
<HEAD>
<STYLE TYPE="TEXT/CSS">
HTML {
HEIGHT:100%; // Pourquoi ? Inutile !
}
BODY {
HEIGHT:100% // Même remarque, inutile !
WIDTH:100%
MIN-WIDTH:100% // Tu as fixé la largeur à 100% alors pourquoi cette précaution ?
MARGIN:0;
PADDING:0;
FONT-SIZE:0; // Inutile aussi, ton lien est une image et ne génère donc aucun texte
}

#Social {
POSITION:ABSOLUTE;
LEFT:0;
RIGHT:0; right:0 et width:100% ont le même effet mais attention à taille bordures et marges si différentes de 0
TOP:0;
}

FIGURE {
DISPLAY:INLINE-BLOCK; // rend l'objet facilement manipulable
POSITION:ABSOLUTE;
}

#Fig1 {
LEFT:0;
TOP:0;
}

#Fig2 {
RIGHT:0;
TOP:0;
}

FIGURE A {
MARGIN:0;
PADDING:0;
}

</HEAD>

<BODY>
 <DIV ID="Social">
  <FIGURE ID="Fig1">
   <FIGCAPTION>&nbsp;</FIGCAPTION> // pas indispensable...
    <A HREF="LIEN VERS DOCUMENT 1">
     <IMG SRC="Image1">
    </A>
   </FIGURE
  <FIGURE ID="Fig2">
   <FIGCAPTION>&nbsp;<FIGCAPTION>
    <A HREF="LIEN VERS DOCUMENT 2">
     <IMG SRC="Image2">
    </A>
   </FIGURE>

etc multipliable à l'infini

 </DIV>
</BODY>
</HTML>


Bien sûr au lieu d'un positionnement absolu tu peux positionner par flottement (FLOAT) mais ça cause des soucis pour ajuster le conteneur à la hauteur des éléments flottants (faux dans le cas de 3 boites auquel cas tu peux positionner le premier élément flottant à gauche, le second à droite et le troisième, non flottant, au centre ; ce qui aura pour effet d'ajuster la hauteur de ton conteneur à la hauteur de ton élément non flottant)
et
il ne faut pas oublier le CLEAR.

Cette méthode est viable pour 2 éléments à positionner. Pour plus d'éléments je recommanderai soit de passer par des conteneurs séparés soit d'opter pour une flexbox (l'inconvénient de la flexbox étant la compatibilité avec les navigateur d'ancienne génération) voir un élément NAV suivi d'une liste qui apportera un plus en sémantique.

A propos du JavaScript, s'il t'es indispensable d'intégrer du JavaScript dans tes liens, tu peux toujours le faire au sein de cette construction.

Quand à l'utilisation de l'image en background, il te faudra penser à bien renseigner WIDTH et HEIGHT de ta balise IMG avec les valeurs réelle et de renvoyer la source (SRC) vers une image d'un pixel carré transparente. Ainsi tu peux intégrer ton sprite (en no-repeat) dans la balise IMG.
Ce qui t'offre par la suite la possibilité d'user du Hover.


Enfin..., en lisant ton message, c'est ce à quoi ça me fait penser


Bonne journée
Modifié par Greg_Lumiere (27 Aug 2014 - 12:39)
Sujet clos
Aller à