High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

De l'absolu dans du relatif en css

Dernière réponse le 21 sep 2008 à 11:29:45 nickleus, le 20 sep 2008 à 19:23:39 
 Signaler ce message aux modérateurs

Bonjour,

Est-il possible de d'avoir une balise div A qui est en relatif (en css) par rapport a BODY et de mettre en absolu une balise B qui est dans la balise A. Sachant que le point 0 est celui de la balise A ?

c'est a dire que si la balise A bouge, la B bouge avec la A.

Je sais que c'est pas évidant mais j'espère m'être expliqué correctement. Il n'y a pas de problème, il n'y a que des solutions

Configur­ation: Windows Vista
Firefox 3.0.1

Meilleures réponses pour « de l'absolu dans du relatif en css » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Posez votre question Répondre

1

nickleus, le 21 sep 2008 à 09:24:47

Personne ne peut répondre à ma question ??? Il n'y a pas de problèmes, il n'y a que des solutions

   
Répondre à nickleus

2

kryoportail, le 21 sep 2008 à 10:01:35

Salut !

Disons que c'est pas très clair ! lol

En fait, en utilisant un positionnement absolu, tu sors l'élément du flux... Cela signifie qu'on ne positionne plus l'élément par rapport à son parent (comme en relatif), mais à partir du document.

Donc si tu positionnes ton bloc enfant en relatif, il va se positionner par rapport à son parent (son conteneur si tu préfères), et ce, peu importe que son parent soit positionner en relatif ou absolu.

Essaye tu verras :

<div style="position: absolute; top: 200px; left: 50px; width: 200px; height: 200px; background-color:#000099;"><div style="position: relative; top: 50px; left: 50px; width: 50px; height: 50px; background-color:#FF0099;"></div></div>

ou

<div style="position: relative; top: 200px; left: 50px; width: 200px; height: 200px; background-color:#000099;"><div style="position: relative; top: 50px; left: 50px; width: 50px; height: 50px; background-color:#FF0099;"></div></div>

Cela revient au même...

Si tu veux en savoir plus, je te conseille cette page : http://css.alsacreations.com/... (c'est très bien expliqué et technique)...


Amicalement,
S@M...
http://kryoportail.ath.cx

   
Répondre à kryoportail

5

PhP, le 21 sep 2008 à 10:36:53

Bjr

En fait, en utilisant un positionnement absolu, tu sors l'élément du flux... Cela signifie qu'on ne positionne plus l'élément par rapport à son parent (comme en relatif), mais à partir du document.


Non ! Un élément absolu est postionné par rapport à son élément parent qui n'est pas forcément le document.

Le problème étant que le parent d'un tel élément n'est pas forcément son conteneur direct ! En fait il s'agit du premier conteneur (en supposant par ex qu'il existe N conteneurs imbriqués) positionné en absolu ou relatif ...

PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

3

PhP, le 21 sep 2008 à 10:11:13

BJR

Evidemment que tu peux ;-)

Il faut bien comprendre que par défaut, même sans préciser explicitement "position= ...", toutes les balises imbriquées sont déjà positionnées de manière relative (mais pas au sens css ;-) par rapport à leur élément parent.

Même un élément dit static (positionnement par défaut) est positionnée de façon relative ... C'est pourquoi je trouve que l'utilisation du terme relative en css n'est pas judicieuse du tout ! Positionnement ajustable ou local aurait été préférable ...

En effet spécifié relative indique que l'élément peut être positionné par rapport à la position normale ou statique qu'il occupe dans le flux : sa position est donc relative non pas directement au coin au gauche de l'élément parent mais à sa position statique calculée dans l'élément parent nuance !
Note que du point de vue des éléments suivants, l'élément relatif "occupe" toujours la même place dans le flux même si tu le déplaces à l'aide de left ou top. Deux éléments peuvent donc se chevaucher.

Un élément positionné en absolu est placé de façon "relative" (quand je disais que le terme était mal choisi !) par rapport au coin au gauche de son élément parent. Attention ici l'élément parent n'est pas forcément l'élément qui contient directement l'élément enfant (pourquoi faire simple quand on peut se faire ch... !) : il faut remonter jusqu'au premier parent positionné en relatif ou absolu ou à défaut le document lui même.

Ex ici la balise divB se positionne par rapport au document car le conteneur divA est déclaré en static 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Positionnement</title>

<style>

*
{
	font-family : arial;
	font-size : 12pt;
}

body
{
	margin : 8px;
	padding : 0px;
}


.classA
{
	position : static;
	left : 20px;
	top  : 50px;
	background-color : #F0F0F0;
	width : 300px;
	height : 500px;
}

.classB
{
	position : absolute;
	left : 50px;
	top  : 0px;
	background-color : #FF0000;
	width : 20px;
	height : 150px;
}


</style>


</head>
<body>
<div id="divA" class="classA">
	<div id="divB" class="classB">
	</div>	
</div>
</body>
</html>



Ici le divB, bien qu'il soit positionné de façon absolue, se positionne bien de façon relative au containe divA ! 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Positionnement</title>

<style>

*
{
	font-family : arial;
	font-size : 12pt;
}

body
{
	margin : 8px;
	padding : 0px;
}


.classA
{
	position : relative;
	left : 20px;
	top  : 50px;
	background-color : #F0F0F0;
	width : 300px;
	height : 500px;
}

.classB
{
	position : absolute;
	left : 50px;
	top  : 0px;
	background-color : #FF0000;
	width : 20px;
	height : 150px;
}


</style>


</head>
<body>
<div id="divA" class="classA">
	<div id="divB" class="classB">
	</div>	
</div>
</body>
</html>


-
-

PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

   
Répondre à PhP

4

kryoportail, le 21 sep 2008 à 10:31:15

Re,

ERRATUM !

Vi, Bjr à bien fait d'agrémenter mon premier post, voir même de le corriger car je ne me rappelais plus de cette subtilité !

Alors en résumé et pour que tout soit clair !

Relatif = positionné par rapport à la place qu'il aurait du avoir si on ne l'avait pas retiré du flux.

Absolu = positionné par rapport à son parent c'est à dire le coin haut-gauche (et non pas par rapport au document comme je l'avais affirmé).

tsss... et dire que je suis webmaster !... lol
Bjr, tu confirmes !??

Amicalement,
S@M...
http://kryoportail.ath.cx

   
Répondre à kryoportail

6

PhP, le 21 sep 2008 à 10:43:55

Oui je confirme ! Et dire que je suis pas webmaster ... ;-)


Mais à condition de choisir le bon élément parent ... T'Oh !

En fait j'en arrive à me demander si le positionnement static n'est pas une grosse connerie et qu'au final je devrais pas utiliser exclusivement des éléments relatifs et absolus. Au moins qu'en j'imbrique un tag dans un autre je sais qui est son parent : celui qui dans le code est moins indenté d'un tabulation :-)



PS : mon pseudo c'est PHP
Bjr c'est pour dire Bonjour !!! LOL

PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

7

kryoportail, le 21 sep 2008 à 11:18:55

Re,

Lol, je crois que je vais arrêter de parler....
J'en ai assez fait ce matin !...

Milles excuses à PhP...
et bonjour à Bjr ! lol

Bonne journée à tout les 2, moi je vais me coucher ! c'est plus sage....

Amicalement,
S@M...
http://kryoportail.ath.cx

   
Répondre à kryoportail

8

 nickleus, le 21 sep 2008 à 11:29:45

Oh la la. Merci pour toutes ses réponces c'est tout de suite plus claire ;)

D'ailleur vu que vous avez l'air d'être calé sur le sujet (et sans vouloir abuser) je vous laisse un autre post.

http://www.commentcamarche.net/forum/affich 8522485 creer un kit graphique

merci pour tout !!!! Il n'y a pas de problème, il n'y a que des solutions

   
Répondre à nickleus
Posez votre question Répondre
Ils ont besoin de votre aide