28172 sujets

CSS et mise en forme, CSS3

Position "absolute" relatif au conteneur parent, ou au docum

Bonjour,

Tout est dans la question , j'ai l'impression que les navigateur n'interprètent pas le style position:absolute de la même manière :

Je suis en train de faire un site oueb et j'ai grandement besoin de div en position absolute.

<div id="main" style="position:absolute;top:0px;left:200px;width:400px;height : 200px">
<div id="second" style="position:absolute;top:0px;left:200px;width : 200px;height:200px;">
texte de test
</div>

</div>


Alors sous Firefox, mes deux div sont collés, le deuxieme arrive au coin supérieur gauche du premier, les deux div se positionnent par rapport au document.
Sous IE, que neni, le deuxième div se positionne par rapport au premier.
D'où un décalage de 200px sur la droite.

Maintenant que j'ai réussi à identifier le problème, j'ai beau chercher sur google, je n'ai pas encore trouvé l'astuce qui me permette de conserver ce positionnement (firefox) ET de conserver la méthode de positionnement via "absolute positioning"..

En plus ça fait un moment que je cherche....(2 semaines...)

Quelqu'un as t'il trouvé une solution miracle ???? un conseil? un lien? un soutien?


Help!

Pétage de cable en approche.....
Euh, désolé, je me suis légèrement trompé...

Le code qui me pose soucis est le suivant : 


<center>
<div id="main" style="position:relative;width:400px;height : 200px">
     <div id="second" style="position:absolute;top:0px;left:200px;width : 200px;height:200px;">
     texte de test
     </div>
</div>
</center>


j'ai ce sacré décalage, et je ne sais que faire....
Salut,

un élément en absolute se positionne par rapport à son premier ancêtre positionné donc c'est tout à fait normal (au fait : tu as bien un doctype en bonne et due forme ?)

Sinon l'élément CENTER est obsolète et devrait être remplacé par du code css.

Donc à la question :
cooluhuru a écrit :
je ne sais que faire....
La réponse est : (re)lire attentivement le Guide de survie du positionnement CSS. Smiley cligne
Bonjour Heyoan et merci pour ta réponse rapide.

J'ai lu le lien que tu m'a

Tout d'abord mon doctype semble bon : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=7">



Je m'explique pour le code :

Le premier DIV représente le contenu de mon site Oueb : il doit posséder une largeur fixe, j'ai donc utilisé un div et je l'ai centré en utilisant la méthode center.
De plus j'ai essayé avec la méthode
* body{ text-align : center;}

ou alors une autre décrite sur alsacreation, a savoir left:50% et un margin-left négatif...

Mais cela ne régle absolument pas mon problème....


Le deuxième DIV contient des formulaire, ou des message d'erreurs qui souvent seront centré dans la fenètre et qui apparaitront un peu comme des popup virtuelles. J'ai utilisé la librairie JS Jquery, et j'ai posé la bailise <meta http-equiv="X-UA-Compatible" content="IE=7"> pour justement éviter quelques problème de compatibilité javascript liés à cette librairie.

je ne peut changer le positionement absolute, car le site est déjà bien avançé. Et cela m'obligerait à modifier une bonne centaine de pages (plus du code javascript relativement obscur..)

Mais je ne comprend toujours pas cette différence d'affichage entre FireFox et Internet Explorer 7....

Le premier positione mon DIV en Absolute, et prend le "body" en référence, et ce, quelque soit la place de mon div.
Alors que IE7 me prend le DIV conteneur en référence.
Cela me crée un joyeux décalage, et je n'ai pas encore trouvé de solution "amiable".

La seule que j'ai trouvée m'oblige à presque tout recommençer (5 mois de taf.... pas envie...)

j'ai encore perdu 5 ou 6 cheveux aujourd'hui....
cooluhuru a écrit :
Tout d'abord mon doctype semble bon : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=7">
Je suppose que tu voulais dire 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

cooluhuru a écrit :
Le premier DIV représente le contenu de mon site Oueb : il doit posséder une largeur fixe, j'ai donc utilisé un div et je l'ai centré en utilisant la méthode center.
De plus j'ai essayé avec la méthode
* body{ text-align : center;}

ou alors une autre décrite sur alsacreation, a savoir left:50% et un margin-left négatif...

Mais cela ne régle absolument pas mon problème....
Hem... je te soupçonne de ne pas avoir lu très attentivement. Smiley murf
Si tu t'es basé sur cet article la première solution est la plus simple :
div#monid {
   width: 200px;
   margin: 0 auto;
}

cooluhuru a écrit :
je ne peut changer le positionement absolute, car le site est déjà bien avançé. Et cela m'obligerait à modifier une bonne centaine de pages
C'est toi qui vois. Smiley hmm


Edit: à noter que lorsqu'on sépare bien le contenu (pages html) et la présentation (feuille de style css) il n'y a qu'un fichier à modifier et pas 100 pages.
Modifié par Heyoan (13 May 2009 - 19:51)
oui bien sur, je voulais dire : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="fr-FR" lang="fr-FR">
<head>
<? global $_page; ?>
	<title><? echo $_page['titre']; ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="X-UA-Compatible" content="IE=7">
	<!--[if lt IE 8]>
.................



J'ai bien évidemment essayé le code margin-auto.... en premier...
Ce fut un échec...

Concernant la séparation feuille de style / css et Html,
je problème n'est plus le même dès lors de l'intégration de AJAX à grande échelle..
Le deuxième DIV contiendra plétore d'information, avec un contenu très dynamique et pas mal d'animations (ce qui fait que je veux pouvoir le positionner ou bon me semble...).

Malheureusement, je me suis assez mal débrouillé lors de la conception, j'aurai du l'inclure de suite dans le body, et le positionnement aurait été bon...

J'ai ce décalage qui m'embète, je sens que je vais être obligé de passer par Javascript pour contourner cette différence entre les navigateur.



Note : j'ai l'impression d'être le seul a être confronté à ce problème de décalage. En mettant de coté le fait "possible" d'être un très mauvais concepteur.... Existe-t'il une solution en CSS permettant de faire abstraction du positionement du parent pour IE lorsqu'on utilise le paramètre "absolute"?
La question est plutôt claire... La réponse semble bien compliquée.

Note 2 : Sinon je vais utiliser un "hack" en javascript : 

if(browser.msie){
$("#second").css("left",200);
}
else{
$("#second").css("left",200+$("main").findPos().x);
}


Code que je vais bien sur changer dans beaucoup beaucoup de pages JS.(bien illisible, c ma faute ça!)
J'aurai bien aimé ne changer que mon fichier general.css.



Smiley smile
cooluhuru a écrit :
Existe-t'il une solution en CSS permettant de faire abstraction du positionement du parent pour IE lorsqu'on utilise le paramètre "absolute"?

Ce n'est possible pour aucun navigateur, à ma connaissance.

D'ailleurs je ne m'explique pas cette différence de positionnement, si ce n'est à cause d'un rendu des pages en mode Quirks (ce qui expliquerait aussi que les marges automatiques n'aient pas marché pour le centrage). Avec IE6 et dans certains cas IE7, il peut y avoir des imprecisions dans le positionnement absolu d'un descendant lorsque le conteneur positionné en relatif n'a pas le layout. Mais dans le cas présent, si j'ai bien lu, le conteneur positionné en relatif a le layout. Donc bon...

Et sinon... page en ligne? Si c'est confidentiel, une page de test reproduisant le problème a minima sera très bien.
Merci Florent, je vais penser a mettre une démo en ligne demain,
pour le pigeon, je sais que ça vient de Mr Coluche... mais le sketch, c lequel déjà ?...nostalgie....


Le site que je suis en train de faire n'est absolument pas en ligne, car plein de bug.
Dans le meilleur des cas possible et imaginable en supposant être dans un monde idéal sans aléas ni contre temps....., il le sera dans 3 semaines.
J'ai du mal à retracer la devinette de Coluche (qui était peut-être celle de quelqu'un d'autre), que j'avais lue ailleurs, je ne sais plus en quelle circonstance. J'ai cru comprendre que Coluche avait une devinette de ce style (pas forcément avec un pigeon), et qu'il n'y avait pas de réponse.

On trouve plusieurs réponses possibles. La plus courante il me semble est «aucune, il a les deux pattes de même longueur, surtout la gauche». Celle que je connais et préfère est «il ne sait ni voler». Toute personne qui, comme moi, est de formation littéraire, saura reconnaitre la supériorité incontestable de «il ne sait ni voler» sur l'autre réponse. (C'est une histoire de figure de style.)
Sujet clos
Aller à