28172 sujets

CSS et mise en forme, CSS3

Problème d'alignement

Bonjour à tous voila je code actuellement un site pour mon stage universitaire et je rencontre à l'heure actuel plusieurs petits soucis d'alignement avec mon css.

Mon bloc ne se met pas en dessous de l'autre comme on peut le voir sur ce screen:

ici

Et j'ai aussi un problème pour aligner le boutons mon panier avec les blocs de la permière ligne ils ne sont pas à la même hauteur comme sur ce screen :

ici

Voici mon code css:


body
{
background : #e8e6e8;
margin : auto;
}

#conteneur
{
margin: auto; /* ça c'est pour que le conteneur soir centré par rapport au body */ 
width: 1000px;

}

#banner 
{
width : 1000px;
height : 150px;
background : url(imagesdesign/ban.png) no-repeat top center;
margin-top : 15px;
}

#menu
{
display : block;
list-style-type : none;
text-decoration : none;
width : 1000px;
height : 45px;
margin : 0;
padding : 0;
}

#menu li
{
list-style-type : none;
text-decoration : none;
float : left;
}

#contenu
{
float:left;
width: 990px;
height: 543px;
background-color: #f0eff0;
border-width: 2px;
border-color: #FFFFFF;
border-style: solid;
padding-top: 13px;
padding-left:5px ;
}
 
.sous-conteneur
{
float:left;
height:120px;
}
 
#blockheadpromo
{
width: 600px;
height: 28px;
background: url(imagesdesign/HeadBlockpromo.png) ;
color: #FFFFFF;
font-size: 20px;
text-align: center;
 
}
 
#blockbodypromo
{
width: 598px;
height: 60px;
background-color: #FFFFFF ;
border-color: #ff8d08;
border-style: solid;
border-width: 1px;
color: #000000;
 
}
 
 
#blockheadident
{
width: 180px;
height: 28px;
background: url(imagesdesign/HeadBlock.png) ;
color: #FFFFFF;
font-size: 20px;
text-align: center; 
}
 
#blockbodyident
{
width: 178px;
height: 60px;
background-color: #FFFFFF ;
border-color: #ff8d08;
border-style: solid;
border-width: 1px;
color: #000000;
}
 
#blockheadrecherche
{
width: 180px;
height: 28px;
background: url(imagesdesign/HeadBlock.png) ;
color: #FFFFFF;
font-size: 20px;
text-align: center;
}
 
#blockbodyrecherche
{
width: 178px;
height: 60px;
background-color: #FFFFFF ;
border-color: #ff8d08;
border-style: solid;
border-width: 1px;
color: #000000;
}

#blockheadnew
{
width: 600px;
height: 28px;
background: url(imagesdesign/HeadBlockpromo.png) ;
color: #FFFFFF;
font-size: 20px;
text-align: center;
 
}

#blockbodynew
{
width: 598px;
height: 60px;
background-color: #FFFFFF ;
border-color: #ff8d08;
border-style: solid;
border-width: 1px;
color: #000000;
}

#blockheadrayon
{
width: 180px;
height: 28px;
background: url(imagesdesign/HeadBlock.png) ;
color: #FFFFFF;
font-size: 20px;
text-align: center; 
}

#blockbodyrayon
{
width: 178px;
background-color: #FFFFFF ;
border-color: #ff8d08;
border-style: solid;
border-width: 1px;
color: #000000;
}

#blockcatalogue
{
width: 598px;

background-color: #FFFFFF ;
border-color: #ff8d08;
border-style: solid;
border-width: 1px;
color: #000000;
}


#blockheadnewletter
{
float: left;
width: 180px;
height: 28px;
background: url(imagesdesign/HeadBlock.png) ;
color: #FFFFFF;
font-size: 20px;
text-align: center; 
}

#blockbodynewletter
{
float: left;
width: 178px;
height: 60px;
background-color: #FFFFFF ;
border-color: #ff8d08;
border-style: solid;
border-width: 1px;
color: #000000;
}

#panier
{
float: right;
padding-left: 750px;
}


a:visited 
{
text-decoration : none;
}

a img {
border : 0;
display : block;
}


Mon code HTML 


<body>
<div id="conteneur">
		<div id="banner"></div>
		<div id="menu">
			<ul id="menu">
			<li><a href="http://www.wartelle-shop.com"><img src="imagesdesign/home.png"><a></li> <!-- Bouton accueil -->
			<li><a href=""><img src="imagesdesign/separateur.png"></li> <!-- séparateur-->
			<li><a href="http://www.wartelle-shop.com/boutique/infos_societe.cfm?code_lg=lg_fr"><img src="imagesdesign/societe.png"></a></li> <!-- Bouton socièté-->
			<li><a href=""><img src="imagesdesign/separateur.png"></li> <!-- séparateur-->
			<li><a href="http://www.wartelle-shop.com/boutique/infos_cgv.cfm?code_lg=lg_fr"><img src="imagesdesign/condition-general.png"><a></li> <!-- Bouton condition général -->
			<li><a href=""><img src="imagesdesign/separateur.png"></li> <!-- séparateur-->
			<li><a href="http://www.wartelle-shop.com/boutique/page_libre.cfm?code_lg=lg_fr"><img src="imagesdesign/palmares.png"><a></li> <!-- Bouton palmares -->
			<li><a href=""><img src="imagesdesign/separateur.png"></li> <!-- séparateur-->
			<li><a href="mailto:sebastien.wartelle@wanadoo.fr"><img src="imagesdesign/contact.png"><a></li> <!-- Bouton contact-->
			</ul>
		</div>
					
		<div id="contenu">
		
		<div id="panier"><img src="imagesdesign/bouton-panier.png"></div> <!-- bouton - panier-->
		
	<div class="sous-conteneur">
		<div id="blockheadident">Login</div> <!-- tête du bloc identification-->
		<div id="blockbodyident">*login*</div> <!-- corp du bloc identification-->
	</div>
	
	
	<div class="sous-conteneur" style='width:750px'>
		<div id="blockheadpromo">Nos promotions</div> <!-- tête du bloc Promotion-->
		<div id="blockbodypromo">*cms_1*</div> <!-- corp du bloc promotion -->
	</div>
	
	
	<div class="sous-conteneur">
		<div id="blockheadrecherche">Recherche</div> <!-- tête du bloc recherche-->
		<div id="blockbodyrecherche">*recherche*</div> <!-- corp du bloc recherche -->
	</div>
	
	<div class="sous-conteneur" style='width:750px'>
		<div id="blockheadnew">Actualité du jour</div> <!-- tête du bloc actu-->
		<div id="blockbodynew">*edito*</div> <!-- corp du bloc actu -->
	</div>
	
	<div class="sous-conteneur">
		<div id="blockheadrayon">Nos produits</div> <!-- tête du bloc rayon-->
		<div id="blockbodyrayon">Corps rayon</div> <!-- corp du bloc rayon -->
	</div>
	
	

	<div class="sous-conteneur" style='width : 100%'>
		<div id="blockheadnewletter">Newletter</div> <!-- tête du bloc newletter-->
		<div id="blockbodynewletter">*mailing*</div> <!-- corp du bloc newletter -->
	</div>
	
	
	
</div>
		
		
		
		</div>
		<div id="footer">
</div>






</body>


En vous remerciant.
Amicalement.
Modifié par Tchupa (11 May 2008 - 09:21)
Bonjour,

Ce serait plus simple de trouver le problème (sans trop se prendre la tête à analyser du code pour comprendre la structure, savoir quel style s'applique pour quel élément...) avec une page accessible en ligne. Smiley cligne

Pour l'alignement étrange du bloc de la newsletter, je pense que le style='width: 100%' appliqué au div qui contient les deux blocs (titre et contenu) n'y est pas étranger.

Enfin, je trouve ça dommage de ne pas avoir utilisé des titres HN pour... les titres des différentes boites.
Si je retire le
a écrit :
style='width: 100%'
le bloc ne va pas a la ligne il se met a coter de celui nos produit
Tchupa a écrit :
Si je retire le style='width: 100%'
le bloc ne va pas a la ligne il se met a coter de celui nos produit
Oui, c'est normal. Tu pourrais éventuellement utiliser un clear: left sur ce bloc. Mais le plus logique, si tu veux faire deux colonnes d'éléments, et de structurer ta page avec deux éléments DIV qui feront les colonnes (en faisant flotter le premier et en donnant une marge au suivant, par exemple… cf. les tutoriels de la rubrique «mise en page sans tableaux»), puis d'y placer tes blocs (sans les faire flotter).
Voilà j'ai réussi a le mettre en ligne ici

Et comme tu pourras le remarquer j'ai de grosse différence entre firefox et IE et je ne sais pas comment résoudre ce soucis là Smiley decu
Sujet clos
Aller à