position absolute

le Jeu Oct 27, 2005 13:13

Bonjour,

Je veux mettre un menu de maniguation dans la colonne de gauche de mon site, j'ai essayé de le placer avec absolute, dans I.E pas de problême mais dans Firefox il sort de la colonne de gauche.

Pouvez-vous m'aider SVP Merci

Code: Tout sélectionner: <style type="text/css">  </style> </head> <body> <div id="page"> <div id="entete"> <h3>ESSAI</h3> </div> <div id="gauche"> <div id="menu"> <ul> <li><a href="#" title="lien1">lien 1</a></li> <li><a href="#">lien 2</a></li> <li><a href="#">lien 3</a></li> <li><a href="#">lien 4</a></li> <li><a href="#">lien 5</a></li> </ul> </div> </div> <div id="contenu"> <h2>TITRE </h2> <p>Et duis, qui illum elit. Diam qui ipsum nulla molestie diam iusto nostrud sed ullamcorper esse erat. Hendrerit delenit nulla nibh eu, delenit eum consequat tincidunt tincidunt blandit suscipit, vulputate. Duis illum, enim, minim nisl consequat molestie at vel in eum dolore magna ullamcorper luptatum. Nulla ea, nulla et exerci, ea vel dolore accumsan. Eros quis ad volutpat feugiat, ut dolore nisl feugait erat odio qui feugait in, ex minim vero ullamcorper. Euismod at vero duis nulla ex ipsum wisi in, luptatum wisi adipiscing consequat exerci. Hendrerit ut suscipit accumsan vel. </div> <div id="piedpage"> <p><a href="#">lien 1</a> • <a href="#">lien 2</a> • <a href="#">lien 3</a> • <a href="#">lien 4</a> • <a href="#">lien 5</a></p> </div> </div>

Code: Tout sélectionner: body { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:small; margin:0; padding:0; text-align:center; color:black; background:white; } /************************************************************************/ /******************* Le cadre de ma page ****************************/ /************************************************************************/ #page {text-align:left; margin:20px auto; width:760px; background:white; } /************************************************************************/ /******************* l'en tete du document ****************************/ /************************************************************************/ #entete{background:url(images/dessus.gif) no-repeat; height:150px;} #entete h3{text-align:center; padding-top:30px; color:white} /************************************************************************/ /******************* menu pour la navigation ****************************/ /************************************************************************/ #gauche {float:left; width:137px; height:400px; background-color:rgb(0,0,255);} #menu {position:absolute; left: 130px; width:100px; } #menu li {list-style:none;} #menu a, #menu a:visited {border:1px solid black; background-color:#FFF; padding:0px; margin:0px; text-decoration:none; font-weight:bold; color:#000; display:block; width:100px; } #menu a:hover {background-color:#000; color:#fff;} /*************************************************************************/ /******************* Contenu du document ********************************/ /*************************************************************************/ #contenu{margin-left:150px; margin-top:0px; margin-bottom:0px; margin-right;10px; background:white; padding-bottom:2-00px; } /*************************************************************************/ /******************* Pied de page du document ****************************/ /*************************************************************************/ #piedpage{clear:both; height:20px; padding-top:10px; background:white; } #piedpage p{ text-align:center; color:black; font-size:90%;} /* le texte en pied de page est plus petit le texte de la page */ #piedpage a {color:red;} #piedpage a:hover{color:white;}

le Jeu Oct 27, 2005 13:50

hum, met une marge gauche de 137px dans contenu

le Jeu Oct 27, 2005 13:51

Le "défaut" de ta page est visible aussi bien sous IE que FF et tous les navigateurs raisonnablement conformes aux standards.

Un élément positionné en absolu se réfère, pour son positionnement, au premier ancêtre positionné en absolu ou relatif (mais pas aux ancêtres positionnés en static).
Dans ton cas aucun ancêtre de #menu n'a ce type positionnement, ce qui implique que la référence pour #menu est la fenêtre du navigateur.

Pour corriger le tir il te suffit d'ajouter position:relative à l'élément #gauche et d'ajuster les marges et le positionnement à ta convenance.

le Jeu Oct 27, 2005 14:10

>> il te suffit d'ajouter position:relative à l'élément #gauche

je ne penses pas que ce soit obligatoire. juste le margin de 137 suffira

le Jeu Oct 27, 2005 14:11

Merci.

J'ai modifié de cette manière et ça fonctionne pour l'emplacement du menu sauf que maintenant je contenu qui est en dessous :

Code: Tout sélectionner: #gauche {position: relative; top: 0px; left: 0px; width:137px; height:400px; background-color:rgb(0,0,255);} #menu {position:absolute; left: -20px; width:100px; }

Y a t-il une solution pour que je puisse insérer ce menu dans la colonne de gauche sans avoir recours au positionnement relatif et absolu ?

le Jeu Oct 27, 2005 14:41

@e-kiwi>

>> il te suffit d'ajouter position:relative à l'élément #gauche
je ne penses pas que ce soit obligatoire. juste le margin de 137 suffira

Non absolument pas, puisqu'il souhaite avoir un body centré dans la page, son menu ne peut pas être absolu par rapport à la fenêtre.

@tanguy>Oui bien sur, ton contenu est en dessous car tu as retiré le float sur #menu, ce qu'il ne fallait pas faire :wink:

Par ailleurs si je peux me permettre, au vu du code que tu as fourni, le position absolute est inutile et tu peux le supprimer, le position relative devient inutile dans ce cas. Enfin le left:-20px n'est pas bon car tu compenses les marges par défaut (variable selon les navigateurs) des éléments ul et li. Pour positionner ce menu je te conseille de travailler avec des marges explicites sur li et ul.

le Jeu Oct 27, 2005 15:23

Merci Fluidex de ton aide.

J'ai supprimé la position relative et absolute et menu est à l'extérieur droite de ma colonne de gauche.

Je ne vois pas comment faire pour le ramener sur la gauche sans utiliser les marges négatives.

Code: Tout sélectionner: #menu { width:100px;} #menu li {list-style:none;} #menu a, #menu a:visited {border:1px solid black; background-color:#FFF; padding:0px; margin:0px; text-decoration:none; font-weight:bold; color:#000; display:block; width:100px; } #menu a:hover {background-color:#000; color:#fff;}

Dans ma feuille de style, tout est bien aligné et lorsque je fais un copier coller dans le code du message c'est tout décalé ?

le Jeu Oct 27, 2005 17:41

Reprenons. Je proposais de positionner ton menu à partir des marges. Voici un exemple de ce menu en haut à gauche de la colonne (marge et padding à 0) :

Code: Tout sélectionner: #menu {width:100px} #menu ul {list-style:none;margin:0;padding:0} #menu a, #menu a:visited { border:1px solid black; background-color:#FFF; text-decoration:none; font-weight:bold; color:#000; display:block; width:100px; }

le Jeu Oct 27, 2005 17:51

Merci beaucoup ça fonctionne.

Il fallait donc juste rajouter margin et padding 0 pour supprimer les marges par défaut ?

Bon, le menu est un peu trop coller au bord gauche de la colonne je vais donc rajouter margin-left: 5px.

le Jeu Oct 27, 2005 18:19

Il fallait donc juste rajouter margin et padding 0 pour supprimer les marges par défaut ?

oui, lorsque tu donnes des valeurs explicites, celles-ci remplacent les valeurs par défaut, c'est vrai pour toutes les propriétés. Pour les margin et padding, ce n'est pas CSS qui fixe ces valeurs, mais les navigateurs (en fait CSS dit que les navigateurs sont libres de faire ce qu'ils veulent). Il y a donc autant de valeurs par défaut que de navigateur pour les margin et padding des différents éléments, et c'est souvent particulièrement pénible pour les ul et li..

Certains (dont je suis) préfèrent fixer explicitement des valeurs par défaut pour tous les éléments et éviter ainsi les divergeances. Par exemple :

Code: Tout sélectionner: * {padding:0; margin:0}

le menu est un peu trop coller au bord gauche de la colonne je vais donc rajouter margin-left: 5px.

Mais oui pourquoi pas.

le Jeu Oct 27, 2005 18:33

Tu es sympa Fluidex et en plus tes explications sont claires.

Pour ma part, dans l'ensemble je me maîtrise pas trop mal les CSS par contre j'ai encore beaucoup de mal à utiliser la position absolute.

En fait, lorsqu'on ne précise pas la position, l'élément est directement mis en relatif, c'est ça ?

le Jeu Oct 27, 2005 18:54

j'ai encore beaucoup de mal à utiliser la position absolute.

Ce positionnement est à utiliser avec parcimonie, car il installe l'élément hors du flux (positionnement naturel des éléments), ce qui peut avoir des conséquences variées, parfois complexes et ne favorise pas l'interopérabilité.

J'ai souvent constaté que les personnes qui débutent avec CSS ont tendance à souvent l'employer, croyant à une meilleure maîtrise du positionnement. Avec le recul force est de constater que c'est un leurre.

lorsqu'on ne précise pas la position, l'élément est directement mis en relatif, c'est ça ?

Non, dans ce cas l'élément est static (valeur par défaut de la propriété position). Et justement ce que tu as découvert avec ton problème c'est qu'un élément static ne peut servir de référence à un élément positionné en absolu.

le Jeu Oct 27, 2005 18:59

Oui c'est juste, c'est le positionnement static qui est mis par défaut.

Jusqu'à présent, je n'ai jamais utilisé la position relative et absolue pour la présentation d'un site.

C'est vrai que je fais plûtot des sites vitrines donc avec des présentations simples.

Est-ce que tu utilises plus la position relative que l'absolute et dans quelle condition ?

le Jeu Oct 27, 2005 19:11

Il faut concevoir sous Firefox, pas sous IE.
Te viendrait-il à l'idée de planter un clou en le frappant avec la pointe d'un tournevis cruciforme au manche tordu ? Non ben là c'est pareil : tu utilises les bons outils qui marchent bien, et APRES tu corriges ce qui ne va pas pour les autres.

le Jeu Oct 27, 2005 19:48

Oui d'accord avec toi mais la plupart des internautes utilisent I.E.

position absolute

position absolute

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne