28172 sujets

CSS et mise en forme, CSS3

Probleme d'imbrication

Bonjour,
j'essais de faire apparaitre une image sur une autre image en me servant de css, mais cela ne fonctionne pas.
Voici comment je procède:

.visu1 {
position : absolute;
margin-top : 50px;
margin-right : 0;
}
.visu1 menuV {
position:absolute;
right : 10px;
top : 0px;
}

Et mon dument:

<div class="visu1">
    	<img src="images/visu1.jpg" />
            <div class="menuV">
               <img src="images/visu1.jpg" />
            </div>
</div>

merci de votre aide
Bonjour tu mets position : relative; pour visu1 au lieu du absolute. tu mets après les valeurs top et right convenables pour .visu1 menuV.
Bonjour à toutes et à tous,

tu crées deux images, par exemple l'une rouge "visu1.jpg" et l'autre verte "visu2.jpg" par paint !

Puis ensuite tu appliques le petit code suivant pour positionner correctement tes images dans la boite. Celle-ci devra être plus grande que tes deux images afin de les contenir. En faisant un position, tu sors du flux. Si tu ne donnes pas de dimension à ta boite, celle-ci n'aura aucune épaisseur.

Le z-index indique l'ordre d'empilement de tes images l'un sur l'autre. 1 sera en dessous, 2 par dessus.
<!DOCTYPE html>
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
#boite {
		background-color	: skyblue;
		position			: relative;
		width				: 500px;
		height				: 300px;
}

#visu1 {
		position			: absolute;
		top					: 50px;
		right				: 0;
		z-index				: 2;
}

#visu2 {
		position			: absolute;
		top					: 0;
		right				: 10px;
		z-index				: 1;
}
</style> 
</head> 
 
<body>
<div id="boite">
	<img id="visu1" src="images/visu1.jpg" />
	<img id="visu2" src="images/visu2.jpg" />
</div>
</body> 
</html>
@+
Artemus24 a écrit :
En faisant un position, tu sors du flux. Si tu ne donnes pas de dimension à ta boite, celle-ci n'aura aucune épaisseur.



Pas du tout. Si la div "boite" est en position relative, elle devient "maitre" sur le comportement des div qu'elle contient. de ce fait, ces dernières la "remplissent" de manière "naturelle" (comme si boite avait son propre flux d'affichage) meme si elles sont en position absolute.
Modifié par ptitvincent (13 Jul 2011 - 17:59)
Bonjour Petit Vincent,

si j'ai mis un "position : relative" dans la boite, c'est pour indiquer que les "position : absolute" doivent être pris "relativement" à la boite et non au body du document.

Donc si je désire obtenir une boite ayant une épaisseur, je suis obligé d'indiquer un width et un height sinon je ne vois pas comment obtenir une boite consistante .

Où ai-je commis une erreur ?

Car ma réflexion portait sur l'épaisseur de la boite et non sur le changement de flux.

Donc ne comprenant pas très bien ce que tu veux dire pas là, je voudrais savoir comment, dans cet exemple, donner une épaisseur à ma boite, uniquement à partir de ce que je mets dans cet boite ? Ici, il s'agit de deux images consistantes (400 X 100 pixels).

@+
Faudrait déjà qu'on sache c'est qu'est l'épaisseur d'une boîte. Width (largeur), height (hauteur) on connait, mais l'épaisseur là franchement je vois pas ce que c'est.
Bonsoir à toutes et à tous,

je parle depuis le début de la largeur WIDTH et de la hauteur HEIGHT d'une balise <div> et en particulier celle qui se nomme BOITE et cela relativement à la remarque de Petit Vincent sur l'usage de "position : relative".

@+
Salutation @tous

Voici ma version, une parmis tant d'autres possibilités. L'important à retenir est le positionnement en CSS, qui ouvre vers des possibilités de superposition d'objet.

upload/20350-zZz01.jpg

Les instructions CSS »


body {
 font-family:sans-serif;
 font-size:1.0em;
 margin:0;
 padding:0;
 background:#f5f5f5;
} 
#parent {
 position:absolute;                       
 width:340px;         
 height:227px;
 border:1px solid #000;
 padding:3px 3px 3px 3px;
 margin:25px 25px 25px 25px; 
}
.enfant {
 position:absolute;
 border-top:2px solid #ff0000;
 padding-top:5px;
 width:330px;
 height:auto;
 top:8px;
 left:8px;
}
h1 {
 float:right;
 font-size:.8em;
 color:#000;
 margin:3px 0 0 0;
}
img.avatar {
 border:2px solid #fff;
 width:50px;
 height:50px;
}


Source HTML »


<div id="parent">     
<img src="images/jpg/img_01.jpg" />
<div class="enfant">     
<img class="avatar" src="images/jpg/img_02.jpg" />
<h1>Les paysages de Melbourne</h1>
</div>
</div>


Remarquez que les DIV sont aussi imbriquer. Ce n'est pas obligation mais c'est mieux.

Il y a évidemment plusieur façons de faire. Rien n'est coulé dans le béton en informatique. Seulement quelques techniques de base en CSS seront essentielles.

Comme vous pouvez le voir une seule image est instruite par une classe CSS, il n'est pas nécessaire dans cet exemple d'instruire les deux images.

De même il n'est pas obliger d'instruire sur le z-index (sauf exeception). Un programme est toujours une suite d'instructions exécuté dans l'ordre de son développement. C'est la raison pour laquelle le z-index est inutile pour cet exemple.

Le document est fictif : il ne s'agit pas des paysages de Melbourne
C'est pour l'adaptation uniquement (une improvisation).

..
Modifié par zardoz (14 Jul 2011 - 00:20)
@Artemus24,

Au temps pour moi je ne comprenait pas ton raisonnement.

@Zardoz,

Je suis bien d'accord avec toi, il y a toujours plusieurs façon de procéder.
Cependant tu es trop catégorique quand tu dit

a écrit :
le z-index est inutile pour cet exemple.


Nous devons lui montrer le plus de méthode possible. Tu ne sais pas si, dans l'application qu'il souhaite en faire au final, son environnement sera le même (il a peut être plusieurs images à superposer au même endroit).

Mais je te l'accorde ta réponse correspond le mieux à sa demande il est vrai Smiley smile
Modifié par ptitvincent (14 Jul 2011 - 01:08)
Salutation @tout l'univers » je n'ai oublié personne là ? Smiley langue

Blague à part je disais : z-index (sauf exception), faut relire s'il le faut.
Pour ce qui est de cet (exemple) : je parle de mon exemple à moi, pas celui de l'auteur du topic, et en fonction de mon utilisation.

M'enfin je suis content de voir que ptitvincent comprend pas mal de choses. Tu n'as pas tord de dire que le développement est en fonction de ses besoins perso et mieux, en fonction de nos visiteurs. Ainsi nous adaptons notre écriture.

Le but en CSS (comme en tout autre chose en informatique), est d'offrir un fichier dont l'écriture est au minimum d'instructions avec un maximum de performance.

Dans le cas de Artemus24, instruire sur le z-index aurait un sens si l'intention de base était dynamique (javascript|JQuery ?), sur un clique on change les profondeurs, on change les styles on change tout. Mais en dehors d'une interactivité . . . à quoi bon ?

Je le comprend quand même.

PS : @Artemus24 » il ne s'agit pas d'épaisseur mais de dimension.
Essais d'utiliser un vocabulaire correcte s.v.p » ok ? - Ainsi on và mieux se comprendre. Smiley cligne

..
Modifié par zardoz (14 Jul 2011 - 06:40)
Merci de votre retour à tous..... cette question a bien été développée et servira, je pense à d'autres.

Bonne continuation.
Bonjour à toutes et à tous,

non, non, je ne me suis pas trompé de mot. Par le mot "épaisseur", je voulais signifier le résultat de son apparence dans le navigateur et non les valeurs de la dimension de la boite, c'est à dire WIDTH et HEIGHT qui ont été ou pas attribuées dans la feuille de styles.

Si vous ne faites pas la distinction entre le résultat à obtenir dans le navigateur et la déclaration des propriétés dans la feuille de styles, on n'arrivera pas à se comprendre.

Pour être encore plus explicite sur la remarque de Petit Vincent, je disais que si je ne précisais pas les dimensions dans la feuille de style de la balise <div id="boite">, celle-ci n'avait aucune épaisseur dans le navigateur (je parle de son apparence). Or sa remarque concernait les effets de la propriété "position : relative" appliqué dans la feuille de styles sur la balise <div id="boite"> ?

Je constate que si je ne précise pas les dimensions de la boite, dans la feuille de style, la propriété "position : relative" n'aura aucun effet sur l'apparence de ma boite, et je précise à nouveau sur l'épaisseur, c'est à dire sur l'apparence de la boite dans le navigateur.

La boite a un comportement aberrant, dans le navigateur, comme si elle n'avait pas de consistance et en principe, aurait dû contenir sans débordement, les deux images qui y sont placées !

Donc, où ai-je commis une erreur ?

Pour revenir sur l'autre sujet de la discussion, celle concernant la ou les solutions possibles possibles à une question posé, en principe, vous devez tenter de répondre à la question posée en essayant de suivre la logique de l'utilisateur.

Vous ne devez pas imposer une solution que vous avez adopté depuis longtemps, même si a vos yeux, elle est parfaite, mais bien de suivre la logique de l'utilisateur, même si elle est bancale. Car c'est en commettant des erreurs que l'on apprend.

Donc dans notre exemple, l'utilisateur utilise deux images au niveau de la body. L'usage des deux z-index était une réponse à son problème. En aucun cas, j'aurai fait ceci, mais je ne peux pas lui imposer une solution, surtout si elle nécessite de réécrire une énorme partie de son code. Son choix est de placer les images dans le body alors j'ai respecté se choix. Personnellement, j'aurai placé une image en tant que BACKGROUND-IMAGE dans la feuille de styles et l'autre dans le body.

Donc je suis resté dans la logique de l'utilisateur !

@+
Modifié par Artemus24 (14 Jul 2011 - 17:52)
Sujet clos
Aller à