[résolu]Position absolue et div

Bonjour à tous,
Voici pour commencez mon code css:

body {font-family: Verdana, Arial, Helvetica, sans-serif;margin: 0;padding: 0;background-color: #eeeded;}		
#conteneur { margin: 0 auto 0;width: 800px;background:url(images/fondsite.jpg);overflow: hidden;position:relative;min-height:300px}	
#header{height:133px; background:url(images/header.jpg) no-repeat top;} 	
					
#bloccontenu{float: right;width: 530px;margin-right:40px;margin-top:5px} 
#contenu {text-align: center;margin: 0 auto;padding: 0 ;width:500px ;color:#9a9a9a;}	


#blocmenu{float: right;width:220px;} 
#menu {position: relative;left: 42px;width:170px;margin-top:5px}
ul#menu{margin:0;padding:0;width:170px;width:170px;font-size :0.6em;}
ul#menu li {list-style-type:none;text-align: center;}
ul#menu li a{width:auto !important;width:100%;color:#9a9a9a;display :block;background:url(images/bouton.jpg);padding :4px;text-decoration  :none;display:block;}	
#hautmenu{margin-left: 42px;;width:170px ;height:27px;background:url(images/hautmenu.jpg) }
#basmenu{margin-left:42px;width:170px ;height:22px;background:url(images/basmenu.jpg) }  
ul#menu li a:hover{text-decoration :none;color:#9a9a9a;display :block;background:url(images/boutonhover.jpg);border-left-width :4px;}

#dessin{ background:url(images/dessin.jpg);width: 170px;height:284px ;margin-left: 42px; position:absolue;bottom: 0;clear: both;}

#pied{background: url(images/piedsite.jpg);height: 29px;width: 800px;margin: 0 auto;padding: 0;}

J'ai un menu à droite , un contenu à gauche et en dessous du menu j'ai une image de taille fixe. je souhaiterais que cette image soit au niveau de la fin du contenu pour cela je l'ai mise en "position:absolue;" mais alors cela la décale par rapport au contenu je voudrais retirer cette espace

J'espère qu'avec mon image ce sera plus clair .
Voila si quelqu'un a une idée se serait sympa car la je vois pas .
merci d'avance
Modifié par boosteur (08 Apr 2009 - 01:56)

Salut,

Sans ton code HTML (le mieux reste un exemple en ligne), difficile de savoir par rapport à quel élément ton div #dessin se positionne.

Merci de me répondre

Voici l'adresse du site:
http://www.cisla-rules.com/index1.html

Hum, je ne vois pas de position:absolute dans ton code, et pour cause, tu as écrit position:absolue. Donc tu peux d'ores et déjà corriger cette petit coquille et adapter ton design qui va péter dans tous les sens.

J'ai réparé mon erreur ,mais alors comme le dessin sort du flux,si j'allonge le menu il passe en dessous.
Modifié par boosteur (07 Apr 2009 - 09:33)

Ce que tu peux faire, c'est supprimer ce div en absolu. Mettre un div englobant ton contenu et ton menu et mettre l'image en fond de ce div, positionné en bas et un peu à gauche. De ce fait, l'image passera sous le menu. Donc pour corriger ce dernier point, tu pourras mettre un min-height sur ce div que tu viens de créer d'environ 550px (somme de la hauteur de l'image et de la hauteur du menu (cela reste vrai dans une certaine configuration, évidemment).

Merci de m'aider
Par contre ça passe à moitié car si j'agrandis le menu le dessin passe en dessous et sous ie sa passe pas
Modifié par boosteur (07 Apr 2009 - 10:35)

Sous IE (6 j'imagine), il faut que tu mettes un height à la place du min-height (cf le paragraphe sur les commentaires conditionnels dans la FAQ).

C'est pour ça que j'ai dit que ça fonctionnait dans une certaine configuration, si tu agrandis le menu ou que l'utilisateur zoom sur le texte de son navigateur l'image passera en-dessous. Dans ce cas-là, tu peux mettre ton image dans un div dans la colonne du menu, sauf qu'elle ne se retrouvera pas en bas de page si le contenu est plus grand que le menu+l'image.

Oki merci de m'avoir aidé
Je vais essayé de voir ce que sa donne avec avec height
Modifié par boosteur (07 Apr 2009 - 11:31)

Voila j'ai modifié mon css et mon index peux-tu juste me dire comment déplacer mon image un peu à droite car quand j'utilise margin-left il décale tout le menu et le contenu.
merci

Il faut que tu remplaces "left" par la valeur "50px" afin que celle-ci se décale de 50px par rapport à ton conteneur :

#conteneurdessin {
  background: url(images/dessin.jpg) no-repeat 50px bottom;
}

Merci à vous deux