position absolute

tanguy · 27 Octobre 2005

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:

<style type="text/css">
<!--
@import url("design.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:

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;}

e-kiwi · 27 Octobre 2005

hum, met une marge gauche de 137px dans contenu

Fluidex · 27 Octobre 2005

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.

e-kiwi · 27 Octobre 2005

>> 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

tanguy · 27 Octobre 2005

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:

#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 ?

Fluidex · 27 Octobre 2005

@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.

tanguy · 27 Octobre 2005

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:

#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é ?

Fluidex · 27 Octobre 2005

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:

#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;
}

tanguy · 27 Octobre 2005

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.

Fluidex · 27 Octobre 2005

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:

* {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.

tanguy · 27 Octobre 2005

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 ?

Fluidex · 27 Octobre 2005

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.

tanguy · 27 Octobre 2005

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 ?

MarvinLeRouge · 27 Octobre 2005

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.

tanguy · 27 Octobre 2005

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

Fluidex · 28 Octobre 2005

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

Oui, et même je crois je j'utilise plus encore le positionnement static.
Il existe de nombreux exemples et tutoriaux aujourd'hui sur le net qui montrent que le positionnement static utilisé conjointement avec les marges ou padding est suffisant dans beaucoup de situations.

Cela n'interdit pas l'absolu, mais il est rarementi ndispensable. Cependant un cas important d'usage est le positionnement fixed (cas particulier de position absolute, mais non reconnu par IE6).

MarvinLeRouge · 28 Octobre 2005

tanguy a dit:
Oui d'accord avec toi mais la plupart des internautes utilisent I.E.

Et alors ? Je n'ai pas dit qu'il fallait concevoir POUR firefox, mais SOUS firefox. Il faut utiliser pour le développement un navigateur qui gère bien les css, et après seulement corriger pour les autres. Ainsi tu as un site qui marche grosso modo partout direct (notamment sous IE). Alors que si tu concois ton site sous IE, tu es certain que ce sera un cauchemar pour qu'il fonctionne sous n'importe quel autre navigateur, puisque tu auras construit ta maison en te servant d'un niveau à bulle déréglé, d'un fil à plomb qui ne tombe pas vertical, et de briques auxquelles il manque des morceaux.

tanguy · 28 Octobre 2005

Ouais, d'accord avec toi.

MarvinLeRouge · 28 Octobre 2005

Je peux te garantir (pour avoir comme toi commencé par faire l'erreur de concevoir sous IE) que la 2ème méthode est n fois plus rapide (n étant un réel strictement supérieur à 2

).

Genzo · 28 Octobre 2005

Le "position:absolute" est un peu barbare quand même...
Utilisez plutot "float:left" ou "float:right".

Exemple :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">

<head></head>

<body style="text-align:center">

	<div style="border: 1px solid red;width:300px">header</div>
	
	<div style="border:1px solid blue;width:300px">
		<div style="float:left;border:1px solid green;width:100px">menu<br />menu</div>
		<div style="float:left;border:1px solid lime;width:196px">
			corps<br />
			corps<br />
			corps<br />
		</div>
	</div>

	<div style="border: 1px solid orange;width:300px">footer</div>
	
</body>

</html>

tanguy · 29 Octobre 2005

Salut,

Pour que le footer soit dessous le corps il faut je crois utiliser la propriété clear:both ?

MarvinLeRouge · 30 Octobre 2005

Genzo a dit:
Le "position:absolute" est un peu barbare quand même...
Utilisez plutot "float:left" ou "float:right".

Ca dépend complètement du contexte : ils n'ont pas le même sens. C'est comme si tu disais : "le tournevis est un peu babare quand même ... Utilisez plutot un marteau".
Donc moi je dirais plutôt : utilise ce qui est le plus adapté à ce que tu veux faire. :wink: (rooohhh c'que ch'uis fort en conseil jedi à la c.. quand même :roll: )

Genzo · 1 Novembre 2005

MarvinLeRouge a dit:
Ca dépend complètement du contexte : ils n'ont pas le même sens. C'est comme si tu disais : "le tournevis est un peu babare quand même ... Utilisez plutot un marteau".

C'est vrai le là il n'y a aucun contexte. Un menu n'est pas un contexte à part entière...

M'enfin je sais, par expérience, qu'il est bien plus simple d'utiliser ma methode pour mettre en forme un menu. Après chacun fait ce qui lui plait.

Tanguy : merci pour cette info fort utile

Ca fait plus beau comme ça

animostab · 4 Novembre 2005

Concevoir avec mozilla c'est ce qu' il faut faire mais gare aux bug de IE comme le border chaos, le double line, ou l' arrondi de pourcentage de chez IE et aussi verifier avec safari sous mac qui peux avoir un comportement un peu different de IE.