18041 sujets

Questions générales et questions de débutants

Superposition de div : z-index, opacité ou autres solutions?

Bonjour,
Je travaille sur un design et n'arrive pas à trouver la façon idéale ou plutôt optimale pour sa conception html/CSS. J'ai bien quelques solutions mais elles me semblent perfectibles.

Bref voici le problème. Une image de fond qui apparait uniquement en haut de page. Un conteneur principal partant du haut et occultant partiellement l'image de fond, du fait d'une opacité partielle.
Ma première idée (mauvaise) était de placer l'image de fond en css background puis de mettre un <div> pour le conteneur principal avec un background également. Ce <div> aurait une opacité permettant de voir l'image de fond. Mais tous les éléments contenus dans ce <div> hériteraient alors de l'opacité de ce dernier. Pas bon, à moins qu'il y ait moyen de "déshériter" ces éléments.
Bref je patine un peu.
Pour illustrer le problème voici un croquis :
upload/15746-div.jpg

Espérant avoir été assez clair dans mes explications. D'avance merci.
Salut,

Si ce texte n'est pas censé être mobile lors d'agrandissement ou réduction de la fenètre du navigateur, mais qu'il doit toujours être placé pareil par rapport au conteneur, ce qui est bien souvent le cas, il est tout aussi simple de n'avoir qu'une seule et même image de ton mot en fond, intégrant la transparence de vert par dessus ce mot au niveau de la zone du conteneur Puis de placer toute cette image en background pour qu'elle soit calée parfaitement avec le conteneur.
Mikachu a écrit :
Salut,

Si ce texte n'est pas censé être mobile lors d'agrandissement ou réduction de la fenètre du navigateur, mais qu'il doit toujours être placé pareil par rapport au conteneur, ce qui est bien souvent le cas, il est tout aussi simple de n'avoir qu'une seule et même image de ton mot en fond, intégrant la transparence de vert par dessus ce mot au niveau de la zone du conteneur Puis de placer toute cette image en background pour qu'elle soit calée parfaitement avec le conteneur.


Je suis pas sur de comprendre.
La transparence du vert n'induit-elle pas la transparence des éléments contenus dans le conteneur, puisque le vert est le background du conteneur?
Salut,

Pardon même dans ma tête c'était pas clair, j'ai peu dormi et ça s'en ressent...

Voilà ce que je t'entendais :
upload/3681-essai15746-.jpg

Le cadre bleu correspond à une image que tu vas placer en background de <body> Il suffit juste que l'image contienne les parties visibles à l'extérieur du contenu. Mais tu peux avoir l'intégralité de la surface avec le mot "exemple" sans que cela gène, ca pèsera juste un poil plus lourd.

Le cadre orange correspond à une image que tu vas placer en background de ton <div id="conteneur">, ou d'un <div id='header"> qui sera à l'intérieur de ce conteneur lui même avec la couleur verte en fond.

Donc au final L'image "xempl" sur fond vert sera visible car située sur le fond vert du conteneur. L'image"E e" sur fond jaune sera visible autour et la partie centrale sera masquée par l'image "xempl". J'espère que c'est plus clair. Smiley smile
Ok merci pour tes explications.
Mais si j'ai bien compris le cadre orange avec l'image en backgroung, ça signifie que tu envisages un <div id='header"> avec l'image "exemple" et le fond vert transparent donc puis à la suite un <div id="conteneur"> avec comme backgroung le fond vert? Mais deux <div> pour accueillir les éléments (texte, image..) c'est ce que je voudrais éviter justement.
Salut,

Non non tu n'as pas compris, tu te bats pour avoir une transparence dans ton fichier html, alors que je te suggère tout simplement de faire une image qui simule cette transparence ! Dans ton cas précis, une image sera bien plus légère que la gestion de la transparence via le navigateur.

L'image "xemple (cadre orange) n'est pas nécessairement dans un <div id="header"> et peut être simplement en image de fond du conteneur
background: #XXXXXX url(../image/xemple.png) no-repeat top left;


J'ai juste suggéré le <div id="header"> car vu sa position c'est généralement une partie d'entête de site. Mais tout dépend de ton projet que je ne connais pas bien évidemment.
Si ensuite tu veux mettre à l'intérieur de ce <div> un ou plusieurs paragraphes <p>, rien ne t'en empêche non plus. Smiley cligne
Mikachu a écrit :


Si ensuite tu veux mettre à l'intérieur de ce <div> un ou plusieurs paragraphes <p>, rien ne t'en empêche non plus. Smiley cligne


Oui mais dans ce div (qui contient l'image xemple.png), si je mets des éléments (<p> ou autre) à un moment ils vont déborder de l'image de fond. Le pb c'est qu'à ce moment là je voudrais qu'ils aient comme background uniquement le fond vert.
Oulaaah, absolument pas !
Si tu donne à ton <div> une largeur correspondant à la largeur du fond vert sur ton image, tout ce qui se trouveras à l'intérieur n'en dépassera pas !

Je pense qu'il faudrait que tu révise un peu le positionnement en CSS, car tu me semble avoir quelques lacunes en la matière. Smiley smile
J'ai surement des lacunes mais je pense que dans ce cas elles sont pas encore atteintes. Smiley cligne (Je parle de hauteur et non de largeur).

Je crois qu'on se comprend pas. Ton image "xemple" va être placée au top (et en no repeat) en background d'un <div>. Jusque là ok.
A l'intérieur de ce <div>, je mets les éléments que je veux. Là aussi ok.
Mais imaginons que l'image fasse 100px de hauteur. Que ce passe-t-il dans mes éléments ayant remplis les 100 premiers px du div, vont continuer à remplir au dela? Ils n'auront plus de background...
Modifié par lodemars (13 Jan 2010 - 13:38)
Sujet clos
Aller à