28172 sujets

CSS et mise en forme, CSS3

Position absolute et deplavement de son contenu

Bonjour a tous, j'ai du mettre une de mes div (relief_droit) qui contiens une image en position absolute pour IE, parc'que sinon les autre div se positionnais en bas de celle-ci.

Mon probleme c'est que j'arrive a placer mon image ou je le souhaite mais quand je met le navigateur en plus petit ou plus grand il reste pas sa sa place initial il se positionne par raport au navigateur.

Je n'arrive pas aplacer cette image comme je le souhaite a par en position absolute, donc si vous pouviez m'aidez... Smiley sweatdrop

Mon HTML:

<body>

      
       <div id="conteneur">


	<div id="banniere">
    
  	</div>

		<div id="menu_haut">
        
		</div>

    
	<div id="email">



	</div>
    
   
		<div id="offre">
        
				
		</div>
        
        <div id="offre2">pub</div>

		<div id="relief_droit">
  
    	</div>
    

<div id="contenu">

</div>

    <div id="menu_bas">

        <a href="assistance.php">Assistance</a> <a href="depannage.php">Depannage</a>

    </div>
            
       		<div id="barre">
            
           	</div>

    <div id="bas_pages">

    			images</div>
        
          
        
            </div>

   
            </body>


Mon CSS:

*{
	list-style-type: none;
	margin : 0px;
	padding:0px;
}



body{

	font-family: "Times New Roman", Times, serif;
	height: 100%;
	
	
}



/* -----------  Div principal (ou conteneur)*/

#conteneur{
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 950px;
	height: 100%;
	background-image: url(../_img/fdcontenu.gif);
	background-repeat: repeat; 
	
}

#banniere{
	width: 950px;
	height: 200px;
	
}

#menu_haut{
	width: 950px;
	height: 50px;
	
	
}


#email{
	width: 260px;
	height: 110px;
	float: right;
	background-image: url(../_img/mail.gif);
	
}

#offre{
	
	width: 260px;
	height: 350px;
	margin-left: 690px;
	margin-top: 110px;
}

#offre2{
	
	margin-top: 460px;
	width: 260px;
	height: 10px; 
	margin-left: 700px;
}


#contenu{
	width: 680px;
	height: 100%;
	padding: 10px 0px 10px 5px;

}

#relief_droit{
	right: 415px;
	width: 10px;
	height: 545px;
	background-image: url(../_img/ombreporte.gif);
	position: absolute;
}

#menu_bas{
	width: 950px;
	height: 50px;
	text-align: center;
}

#barre{
	width: 950px;
	height: 10px;
	background-image: url(../_img/ligne-bas.gif);
	background-repeat: no-repeat;
}

#bas_page{
	width: 950px;
	height: 160px;
}



Deux images:



Image 1

Image 2


Merci d'avance!!! Smiley cligne
Modifié par Chat (27 Jun 2008 - 17:05)
Salut Chat Smiley cligne ,

comme indiqué dans le tuto Comment positionner les éléments en CSS ? un élément en position:absolute; se positionne par rapport "au premier Ancêtre positionné qu'il rencontre." S'il n'en existe pas, ce sera par rapport à la fenêtre du navigateur.

Pour régler cela, il suffit de positionner le conteneur de #relief_droit en rajoutant un position:relative; à #conteneur.

A+
Oui effectivment sa fonctionne mieux comme sa, par contre mon image de relief ce retrouve caché par l'image de ma div offre malgré qu'elle est en position absolute et que je l'ai mi avant dans le html, quelqu'un a une idée?

image
Chat a écrit :
par contre mon image de relief ce retrouve caché par l'image de ma div offre malgré qu'elle est en position absolute

Ce ne serait pas plutôt que le bloc qui a cette image «de relief» en image de fond s'arrête à cette hauteur-là? Tu peux le déterminer facilement avec une bordure sur ce bloc, ou bien en utilisant un outil tel que l'extension Web Developer pour Firefox, ou encore Firebug.
Je sais pas si j'ai bien saisie ta phrase, mais l'image relief ne s'arrete pas a cette endroi, j'te met une image:

image

J'peux pas utliser Firefox parc'que j'ai un autre CSS en commentaire conditionnele pour IE; sur Firefox j'ai aucun souci...
Modifié par Chat (29 Jun 2008 - 18:12)
Personne aurai une idée, j'vous remet mon CSS si ca peux vous aider... Smiley sweatdrop 



*{
	list-style-type: none;
	margin : 0px;
	padding:0px;
}



body{

	font-family: "Times New Roman", Times, serif;
	height: 100%;
	
	
}



/* -----------  Div principal (ou conteneur)*/

#conteneur{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 950px;
	height: 100%;
	background-image: url(../_img/fdcontenu.gif);
	background-repeat: repeat; 
	
}

#banniere{
	width: 950px;
	height: 200px;
	
}

#menu_haut{
	width: 950px;
	height: 50px;
	
	
}


#email{
	width: 260px;
	height: 110px;
	float: right;
	background-image: url(../_img/mail.gif);
	
}

#relief_droit{
	right: 255px;
	width: 10px;
	height: 545px;
	background-image: url(../_img/ombreporte.gif);
	position: absolute;
}

#offre{
	
	width: 260px;
	height: 350px;
	margin-left: 690px;
	margin-top: 110px;
}

#offre2{
	
	margin-top: 460px;
	width: 260px;
	height: 10px; 
	margin-left: 700px;
}


#contenu{
	width: 680px;
	height: 100%;
	padding: 10px 0px 10px 5px;

}



#menu_bas{
	width: 950px;
	height: 50px;
	text-align: center;
}

#barre{
	width: 950px;
	height: 10px;
	background-image: url(../_img/ligne-bas.gif);
	background-repeat: no-repeat;
}

#bas_page{
	width: 950px;
	height: 160px;
}
Sujet clos
Aller à