28172 sujets

CSS et mise en forme, CSS3

[Résolu] Superposé deux divs et être auto-extensible en hauteur

Bonjour,

Pour un besoin , je dois superposé deux div l'une par dessus l'autre, pour après appliquer un effet jQuery d'opacité.


<body>
    <div id="site">
        <div id="container"></div>

        <div id="content">
           Test
        </div>
    </div>
</body>




#site {
    width: 960px;
    margin: auto;
    background: red;
    position: relative;
}

#container {
    background: blue;
    width: 100%;
    height: 100px;
    position: relative;
}

#content {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 940px;
    background: brown;
}


Le problème c'est que ma div #container n'est pas autoextensible vu que je dois lui mettre une hauteur fixe...ma question est: est-il possible de faire que ma div #container soit autoextensible en hauteur suivant le contenu de ma div #content?

Merci d'avance
Modifié par Blogger (19 Nov 2010 - 13:15)
Yo,
#site { 
width:960px; 
margin:0 auto;  
position:relative;
background:red; } 
 
#container { 
z-index:1;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:blue; } 
 
#content { 
z-index:2;
position:relative;
background:brown; }
Les dimensions de #container sont calées sur celles de #site, et celles de #site dépendent de #content, ce qui indirectement fait correspondre la taille de #container à celle de #content. C'est ce que tu voulais ?

On peut aussi faire ça avec une ligne de jQuery sinon.

EDIT :
Blogger a écrit :
je dois superposé deux div l'une par dessus l'autre, pour après appliquer un effet jQuery d'opacité.
Euh... T'es obligé de superposer deux <div> pour faire ça ? Smiley sweatdrop

T'as un exemple de ce que t'aimerais faire à montrer ?
Modifié par BeliG (19 Nov 2010 - 09:51)
Salut,

Nice, ça fonctionne avec ton code, en l'adaptant un peu j'ai réussi à obtenir ce que je voulais Smiley smile j'avais pas penser à faire cette façon...merci.


BeliG a écrit :
On peut aussi faire ça avec une ligne de jQuery sinon.


Quelle code en jQuery permet de faire cela?

Sinon à la base j'aimerais mettre une opacité à une div, j'ai tester ce code jQuery:


$('#ma-div').animate({
    opacity: 0.40
});


Mais le problème (dans mon cas) c'est que ça applique l'opacité à toute la div et y compris son contenu, pour mon cas texte et image, alors que j'aimerais seulement que ce soit le fond de ma div qui devient en opacité et que le contenu reste normal Smiley smile

Si c'est possible de le faire en jQuery je suis preneur Smiley smile

Merci
Oui c'est bien ce qu'il me semblait, tu ne voulais pas une simple opacité mais une animation en opacité.

En fait tu dois avoir une image d'arrière-plan dans #container que tu souhaites faire apparaitre progressivement derrière le contenu du site au chargement de la page, c'est ça ?

Blogger a écrit :
Si c'est possible de le faire en jQuery je suis preneur
En fait non oublie, j'ai parlé trop vite. La solution que tu as actuellement est beaucoup plus souple.

Mais juste pour info, en jQuery tu peux faire un truc comme ça :
var content_height = $("#content").height(); /* hauteur de #content */
$("#container").height(content_height); /* on donne à #container la hauteur de #content */
Pas besoin de ça ici, dans tes CSS le height:100% de #container fait tout le boulot.
BeliG a écrit :

Oui c'est bien ce qu'il me semblait, tu ne voulais pas une simple opacité mais une animation en opacité.

Heu si j'aimerais une simple opacité, j'ai utiliser .animate() parce c'est ce que j'ai trouvé, mais si il y a une aure façon de faire je suis toujours preneur, je mis connais pas trop en jQuery Smiley smile

BeliG a écrit :

En fait tu dois avoir une image d'arrière-plan dans #container que tu souhaites faire apparaitre progressivement derrière le contenu du site au chargement de la page, c'est ça ?

Non non, j'ai une image de fond sur le body et dans ma div de contenu qui à une couleur(exemple gris), j'aimerais y mettre une opacité pour voir un peu l'image de fond, mais mettre une opacité que sur le fond de la div pas sur le texte, d'ou mon topic pour superposé deux div Smiley smile
Ah bah pas besoin de jQuery, ni de #container ! Un peu de CSS3 et le tour est joué :
<body> 
    <div id="site"> 
        <div id="content"> 
           Test 
        </div> 
    </div> 
</body>
div#site {
background-color: rgb(..., ..., ...); /* Pour les vieux navigateurs */
background-color: rgba(..., ..., ..., 0.4); /* Pour les autres */ }
Tu dois juste trouver le code RGB correspondant avec ton logiciel de dessin ou un convertisseur en ligne.
Modifié par BeliG (19 Nov 2010 - 12:17)
C'est exactement ce qu'il me faut Smiley smile sauf que il faut que ce soit compatible avec IE7, c'est pour ça que j'utilise jQuery...

Sous IE7, il prend même pas en compte le rgb...il me met un fond blanc...quel daube ce navigateur...

Mais mon soucis est résolu avec ta solution plus haut, merci à toi Smiley smile

Toutes ces magouilles...alors que une seule ligne suffirait...
Modifié par Blogger (19 Nov 2010 - 13:04)
Dans ce cas il te reste tout de même d'autres alternatives :
- Utiliser une image d'arrière-plan qui intègre l'opacité (au moins pour IE)
- Utiliser un filtre propriétaire Microsoft

Plus d'infos dans le lien que je t'ai donné juste au dessus.

J'espère que tu te sers de jQuery pour autre chose que ça dans ton site, parce que charger un script de presque 80ko (sans compter les lignes de code en plus côté HTML / CSS) juste pour une opacité, c'est vraiment moyen...
Merci pour ces alternatives, mais je vais rester avec mon jQuery. Oui oui t'inquiète je l'utilise pour d'autres effets sur le site et je vais aussi l'utiliser pour la validation du formulaire de contact coté client Smiley smile

En tout cas merci pour ton aide.
Sujet clos
Aller à