28172 sujets

CSS et mise en forme, CSS3

[Résolu] Masquer une div

Bonjour,

J'aimerais masquer une div mais laisser les autres div qui sont dedans visible, je m'explique :

[code=html]
<div id="fond">
   <div id="site">

   </div>
</div>


Dans ma div #fond, j'ai un style css background-image pour avoir une image de fond, la div #site est le contenu du site, j'aimerais cacher mon image de fond pour la faire ré-apparaitre en fondu avec un effet javascript.
Pour l'effet j'utilise jQuery, je fais donc un


$("#fond").hide();


pour cacher ma div, mais ça cache aussi ma div #site, ce qui est logique...simplement je sais pas comment faire pour que ma div #site reste afficher Smiley smile

Pouvez-vous m'aider ?

Merci d'acance
Modifié par Blogger (25 Mar 2010 - 16:55)
Le plus simple, c'est peut-être plutôt de changer ton background ?
mais je ne suis pas sûr que tu puisses faire le fondu comme ça...
Salut,

J'aimerais pas changer mon background, j'aimerais juste y appliquer un effet jQuery, simplement je ne sais pas comment trop faire...des idées ?

Merci
Bonjour,

A ma connaissance il n'est pas possible de faire un fondu sur un background CSS avec JS. En fait, jQuery (ou autre) peut modifier en live les valeurs de tes propriétés CSS, mais pas y ajouter un effet de transition entre 2 valeurs.

Une solution qui pourrait convenir dans ton cas revient à dissocier tes deux <div> et à les superposer l'une sur l'autre :
<div id="global">
     <div id="fond"></div>
     <div id="site">
          <!-- Contenu -->
     </div>
</div>
div#global{
width:...; /* largeur de ton site */
position:relative; /* référence pour les enfants positionnés en absolu */
min-height:...; /* hauteur de ton image au cas où ton contenu est vide */ }

div#fond {
width:...; /* largeur image */
height:...; /* hauteur image */
position:absolute;
top:...;
left:...;
z-index:1; /* en dessous*/ }

div#site {
position:relative; /* pour utiliser z-index*/
z-index:2; /* au dessus */}
Et maintenant tu peux faire fonctionner ton hide(). Smiley smile

Ce code est à adapter en fonction des dimensions de ton site et de ton image (je pense notamment au centrage horizontal). Un peu plus d'infos me permettrait de t'aider d'avantage (croquis graphique, lien vers image de fond, etc.). Smiley cligne
Modifié par BeliG (24 Mar 2010 - 19:22)
Blogger a écrit :
Mon image de fond est une image qui fait 2000*627px (oui j'ai bien dit 2000), le site est 960px de large et est centrer, l'image de fond s'élargit si la personne a une grande résolution
Ok donc pas de problème.

Code complet :
<div id="fond"></div>
<div id="site"> 
     <!-- Contenu --> 
</div>

div#fond { 
width:100%; /* toute la largeur du viewport */ 
height:627px; /* hauteur image */
background:url(img.jpg) no-repeat center; /* image de fond centrée horizontalement */
position:absolute; 
top:0; 
left:0; 
z-index:1; /* en dessous*/ } 
 
div#site { 
width:960px; /* largeur du site */
margin:0 auto; /* centrage horizontal du gabarit */ 
position:relative; /* pour utiliser z-index*/ 
z-index:2; /* au dessus */}
Plus besoin de #global parce que la <div> qui contient ton background doit rester "fluide" (sa largeur dépend de la résolution de l'utilisateur).

Tiens au courant. Smiley cligne
Yes ça fonctionne comme ça, super, merci.
Encore une question : je vois que pour tes style tu met : div#site, quel est la différence entre div#site et #site ?

Merci beaucoup
Blogger a écrit :
……quelle est la différence entre div#site et #site ?
Il n'y a pas de différence. BeliG utilise cette notation parce que c'est plus compréhensible pour l'exemple. Il y aurait une différence s'il s'agissait d'une classe car elle pourrait être appliquée à différents éléments.
Salut Aureance, Smiley cligne

Aureance a écrit :
Il n'y a pas de différence.
En fait si, il y en a. Smiley langue

La première est purement esthétique et me permet de coder mes CSS plus confortablement. Par exemple, si j'ai ça : 
div#element_1 { ...}
ul#element_2 { ... }
p#element_3 { ... }
Je vois en un coup d'œil que #element_1 est une <div>, mon element_2 une liste et mon element_3 un paragraphe.

C'est beaucoup plus parlant que ça : 
#element_1 { ...}
#element_2 { ... }
#element_3 { ... }
Donc première différence : code plus lisible et gain de temps lors des mises à jour.

Il y a une 2ème différence, technique cette fois-ci. En effet, au niveau de la priorité des sélecteurs, div#element a un "poids" plus important que #element.

Par exemple :
<div id="element">Kikoo !</div>
div#element { color:red; }
#element { color:blue; }
Affichera à l'écran : 
[#red]Kikoo ![/#]
La classe ! Merci.

Si j'ai :


<ul id="menu">
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
    <li><a href="#">Lien</a></li>
</ul>


Pour accéder à l'élément "a" avec ta technique


a#menu li a {...}


ça ne fonctionne pas, y-a-t-il une alternative ?

J'ai encore une question qui me traverse l'esprit, la différence d'affichage sur un navigateur PC et un navigateur MAC, généralement l'écriture est plus "gras" sur MAC, comment avoir la même écriture partout ?

Merci les gens
Blogger a écrit :
J'ai encore une question qui me traverse l'esprit, la différence d'affichage sur un navigateur PC et un navigateur MAC, généralement l'écriture est plus "gras" sur MAC, comment avoir la même écriture partout ?
En fait elle n'est pas plus "grasse" mais "lissée". Et non, pas possible d'avoir la même chose partout, cela dépend du navigateur, du système d'exploitation, de la résolution, etc.

Sinon Heyoan t'a donné la réponse pour ton problème de sélecteur. Smiley cligne
Modifié par BeliG (25 Mar 2010 - 15:11)
Y'a pas moyens en mettant une police standard (exemple "Trebuchet MS" qui est dispo sur MAC et WIN) d'avoir le même rendu ?

C'est quand même pénible ça, mais d'un coté c'est ça qui fait la beauté du métier, trop facile sinon Smiley smile

Merci
Blogger a écrit :
Y'a pas moyens en mettant une police standard (exemple "Trebuchet MS" qui est dispo sur MAC et WIN) d'avoir le même rendu ?
Je t'ai répondu : non.

<lol>Sinon y a les images ou le full flash...</lol>
Sujet clos
Aller à