Mettre les miniatures en arrière plan

TO LET OPINIONS , QUESTION , REQUEST or JUST FOR LET FRIENDLY MESSAGE

Mettre les miniatures en arrière plan

Postby cmcjma on Wed Mar 18, 2009 8:44 am

Bonjour RAD,
Grand merci pour tes galleries en css, elles m'ont permis des possibilités auxquelles je n'avais pas encore (même) rêvé.
J'ai juste un tout petit problème avec l'affichage.
Sur une même page, j'ai en ligne horizontale différentes (micro) galleries de 1, 2, 3 ou 4 images (souvent une seule ligne voir 2)
Lorque je passe sur l'icône d'une galerie avec une seule image, les galleries qvec 2, 3 ou 4 images apparaissent toujours au premier plan et couvrent donc l'image qui s'affiche. En fait les thumb des plus grandes galleries sont toujours au premier plan des images issues des galleries plus petites.
J'avais partiellement résolu le problème en définissant par défaut toutes les galleries à 4 images. mais ce n'est pas vraiment optimisé et pas esthéthiquement super.
Plus simplement, comment faire que l'image qui sáffiche au passage de la souris sur une thumb soit sytématiquement au premier plan...?
Merci par avance pour ton aide et encore merci de mettre à disposition de tels outils.
L'opérateur humain est l'élément le moins fiable d'un systême, mais le plus essentiel.
User avatar
cmcjma
 
Posts: 3
Joined: Thu Mar 05, 2009 9:01 am
Location: Hong Kong

Re: Mettre les miniatures en arrière plan

Postby RAD on Wed Mar 18, 2009 4:19 pm

SALUT
cmcjma

Tu devrais arriver a regler ca avec le Z index !
expliquation

La propriété de feuille de style css z-index permet de spécifier la position d'empilement d'un bloc par rapport aux autres (notion de profondeur).
La propriété de feuille de style cssz-index est généralement utilisée pour la création de calques (Layer).
Le bloc ayant la plus grande valeur est au dessus.

Exemple de code :

Code: Select all
.thumb{
  position:relative;
  z-index:10;
}

La propriété de feuille de style z-index css peut prendre la valeur de :
- auto, valeur par défaut, le bloc aura un "z-index" plus grand que le bloc précédent déclaré dans le code HTML.
- 0 à +00, nombre positif.
- inherit, hérite de la propriété de son parent (css 2)

La propriété de feuille de style z-index css est applicable sur toutes les balises HTML ou XHTML dont la valeur de la feuille de style position est égale à relative ou absolute.

fais un copie colle du code ci dessous tu vas voir ce que ca donne !

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>RAD ZONE Webcreation
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="http://radservebeer.free.fr" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <style type="text/css">
/*<![CDATA[*/
  div.c2 {
   position: relative;
   left: 10px;
   top: -20px;
   width: 300px;
   height: 60px;
   z-index: 1;
   background-color: green;
}
div.c1 {
   position: relative;
   left: 0px;
   top: 0px;
   width: 300px;
   height: 60px;
   z-index: 10;
   background-color: red;
}
    /*]]>*/
    </style>
  </head>
  <body>
    <h3 class="codetitre">Interprétation du code détaillé de la propriété css z-index par ton navigateur.</h3>
    <p>.calque1{position:relative; left:0px; top:0px; width:300px; height:60px; z-index:10; }<br />.calque2{position:relative; left:10px; top:-20px; width:300px; height:60px; z-index:1; }
    </p>
    <div id="Layer1" class="c1">calque 1 z-index : 10
    </div>
    <div id="Layer2" class="c2"><br />calque 2 z-index : 1
    </div>
  </body>
</html>


A+
RAD

Image La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une.
User avatar
RAD
Administrateur - Site Admin
 
Posts: 532
Joined: Thu Aug 31, 2006 12:02 am

Re: Mettre les miniatures en arrière plan

Postby cmcjma on Wed Mar 18, 2009 5:30 pm

You are fantastic.... Si, si, j'insiste.
Encore merci pour toute cette connaissance partagée.
Cordialement
L'opérateur humain est l'élément le moins fiable d'un systême, mais le plus essentiel.
User avatar
cmcjma
 
Posts: 3
Joined: Thu Mar 05, 2009 9:01 am
Location: Hong Kong

Re: Mettre les miniatures en arrière plan

Postby cmcjma on Thu Mar 19, 2009 3:53 am

Je reviens vers toi, car autre petit problème.
J'avais testé z-index avec Google chrome et cela fomctionne parfaitement bien.
Par contre sur IE7, j'ai des effets aléatoires... avec certaines images les thumbs son cachées, sur d'autres pas. je ne trouve rien qui puisse expliquer cela. je sais que z-index n'est pas censé fonctionner avec IE. Mais les solutions que j'ai trouvées disaient qu'en utilisant position et une de ses valeurs cela fonctionnait.
Ce n'etait pas un problème pour moi, car j'avais défini que lesimages soient systématiquement à une position fixe (voir exmple ci-dessous).
J'ai choisi 100 comme valeur pour être sûr, mais même en changeant les valeurs cela ne corrige pas le problème.

#thumbs1 a:hover img {
border: 3px solid #FFFFFF;
position: fixed;
width: auto;
height: auto;
left: 213px;
top: 25px;
z-index: 100;
}

Peut-être auris-tu une idée?
Merci par avamce.
L'opérateur humain est l'élément le moins fiable d'un systême, mais le plus essentiel.
User avatar
cmcjma
 
Posts: 3
Joined: Thu Mar 05, 2009 9:01 am
Location: Hong Kong

Re: Mettre les miniatures en arrière plan

Postby RAD on Thu Mar 19, 2009 11:59 am

je sais que z-index n'est pas censé fonctionner avec IE


Si cela fonctionne ! il y as parfois des bug avec IE mais ca fonctionne !

tu as bien mis un doctype ??

tu as essaye en mettant des z index 0 aux elements qui doivent etre chevauche ?

cela peut aussi venir d un heritage dans la CSS !

il faudrait voir le code css et html complet

on ce demande quand Microsoft feras un navigateur correct !!!!?

a+
RAD

Image La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une.
User avatar
RAD
Administrateur - Site Admin
 
Posts: 532
Joined: Thu Aug 31, 2006 12:02 am


Return to RAD ZONE FORUM

Who is online

Users browsing this forum: No registered users and 5 guests

cron