Problème d'alignement

Tchupa · Schtroumpf Messages: 133

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:

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 :

Voici mon code css:

Code:

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

Code:

<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> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="http://www.wartelle-shop.com/boutique/infos_societe.cfm?code_lg=lg_fr"><img src="imagesdesign/societe.png"></a></li> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="http://www.wartelle-shop.com/boutique/infos_cgv.cfm?code_lg=lg_fr"><img src="imagesdesign/condition-general.png"><a></li> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="http://www.wartelle-shop.com/boutique/page_libre.cfm?code_lg=lg_fr"><img src="imagesdesign/palmares.png"><a></li> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="mailto:sebastien.wartelle@wanadoo.fr"><img src="imagesdesign/contact.png"><a></li> 
      </ul>
   </div>

   <div id="contenu">

   <div id="panier"><img src="imagesdesign/bouton-panier.png"></div> 

<div class="sous-conteneur">
   <div id="blockheadident">Login</div> 
   <div id="blockbodyident">*login*</div> 
</div>

<div class="sous-conteneur" style='width:750px'>
   <div id="blockheadpromo">Nos promotions</div> 
   <div id="blockbodypromo">*cms_1*</div> 
</div>

<div class="sous-conteneur">
   <div id="blockheadrecherche">Recherche</div> 
   <div id="blockbodyrecherche">*recherche*</div> 
</div>

<div class="sous-conteneur" style='width:750px'>
   <div id="blockheadnew">Actualité du jour</div> 
   <div id="blockbodynew">*edito*</div> 
</div>

<div class="sous-conteneur">
   <div id="blockheadrayon">Nos produits</div> 
   <div id="blockbodyrayon">Corps rayon</div> 
</div>

<div class="sous-conteneur" style='width : 100%'>
   <div id="blockheadnewletter">Newletter</div> 
   <div id="blockbodynewletter">*mailing*</div> 
</div>

</div>



   </div>
   <div id="footer">
</div>

</body>

En vous remerciant.
Amicalement.

punch · Schtroumpf paresseux Messages: 1761

Bizarre, ils sont tous aligné sauf le newletter...
Enlève le float: left; peut-être...
Pourquoi ? Parce que sur les autres ils y en a pas et c'est aligné

Tchupa · Schtroumpf Messages: 133

Oui mais si je retire le float: left; il se met carément au milieu !

RaGe · Super schtroumpf Messages: 1150

Ben déjà, j'aurais tendance à penser que ta découpe du contenu n'est pas très heureuse.

En effet, on peut clairement distinguer 2 colonnes :

- la colonne de gauche regroupant des éléments de navigations (login, menu, etc, ....)

- la colonne de droite représentant le corps de l'information.

Pourquoi dans ce cas ne pas envisager une découpe de ta div 'conteneur' :
- une div 'conteneur-gauche' avec un float left et une largeur définie
- une div 'conteneur-gauche' sans positionnement.
D'une ça différencie bien les 2 parties, et de 2 ça renforce la logique de flux HTML avec les éléments de navigation et ensuite le contenu (promo, etc, ...).

Pour ce qui est de ton icône 'panier', c'est un peu logique, avec un padding-left de 750px, elle doit faire quasi toute la largeur de page.
N'hésite pas à associer une bordure temporaire à tes éléments histoire de voir où ils sont et quelle place ils occupent ... tu risques d'être surpris si tu ajoutes un 'border: red 1px solid' à ta div 'panier'

Tchupa · Schtroumpf Messages: 133

Ok, voilà je suis entrain de tester ta méthode a deux colonnes!

donc voici mon nouveaux code css

Code:

/* Fichier css du design Wartelle Shop, toute reproduction même partielle est srtictement interdite!!! */

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

.conteneur-gauche
{
float:left;
width:350px;
}

.conteneur-mileu
{
width: 680 px;
}

#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: 15px;
border-color: red;
border-width: 1px;
border-style: solid;
}

a:visited
{
text-decoration : none;
}

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

dans le quel j'ai mis ceci par rapport à l'ancien

Code:

.conteneur-gauche
{
float:left;
width:350px;
}

.conteneur-mileu
{
width: 680 px;
}

Et mon code HTML

Code:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Wartelle-Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <style type="text/css" media="screen">
@import url("./design2.css"); 
         </style>

</head>

<body>
<center>
<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> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="http://www.wartelle-shop.com/boutique/infos_societe.cfm?code_lg=lg_fr"><img src="imagesdesign/societe.png"></a></li> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="http://www.wartelle-shop.com/boutique/infos_cgv.cfm?code_lg=lg_fr"><img src="imagesdesign/condition-general.png"><a></li> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="http://www.wartelle-shop.com/boutique/page_libre.cfm?code_lg=lg_fr"><img src="imagesdesign/palmares.png"><a></li> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="mailto:sebastien.wartelle@wanadoo.fr"><img src="imagesdesign/contact.png"><a></li> 
      </ul>
   </div>

   <div id="contenu">

   <div id="panier"><img src="imagesdesign/bouton-panier.png"></div> 

<div class="conteneur-gauche">
   <div id="blockheadident">Login</div> 
   <div id="blockbodyident">*login*</div> 
</div>

<div class="conteneur-milieu">
   <div id="blockheadpromo">Nos promotions</div> 
   <div id="blockbodypromo">*cms_1*</div> 
</div>

<div class="conteneur-gauche">
   <div id="blockheadrecherche">Recherche</div> 
   <div id="blockbodyrecherche">*recherche*</div> 
</div>

<div class="conteneur-milieu">
   <div id="blockheadnew">Actualité du jour</div> 
   <div id="blockbodynew">*edito*</div> 
</div>

<div class="conteneur-gauche">
   <div id="blockheadrayon">Nos produits</div> 
   <div id="blockbodyrayon">Corps rayon</div> 
</div>

<div class="conteneur-gauche" >
   <div id="blockheadnewletter">Newletter</div> 
   <div id="blockbodynewletter">*mailing*</div> 
</div>

</div>



   </div>
   <div id="footer">
</div>

</body>

</html>

et voilà le résultat :

les blocs se monte les un sur les autre et ne passe pas a la ligne

Zetura · Schtroumpf costaud Messages: 245

Il te suffit de rajouter un margin-bottom à tes blocs et de rajouter un margin-left à ton contenur droit.

Tu as aussi une erreur dans ton CSS, tu as mis "conteneur-mileu" au lieu de "conteneur-milieu".

Tchupa · Schtroumpf Messages: 133

Zetura a écrit:

Il te suffit de rajouter un margin-bottom à tes blocs et de rajouter un margin-left à ton contenur droit.

Tu as aussi une erreur dans ton CSS, tu as mis "conteneur-mileu" au lieu de "conteneur-milieu".

effectivement tu as raison et j'ai fait comme tu m'a dis ça fonctionne correctement, seulement j'ai toujours le problème du bloc newletter qui reste au milieu , je comprends pas

Zetura · Schtroumpf costaud Messages: 245

Ce que tu devrais faire, c'est plutot mettre tous tes blocks à gauche dans une seule div "bloc_gauche" et tout tes blocks au centre dans une seul div "bloc_droite".

Il te suffira alors de positionné uniquement ces deux div pour que tout soit aligné.

Exemple :

Code:

<div id="bloc_gauche>
<div class="gauche_head">Titre</div>
<div class="gauche_body">Contenu</div>
<div class="gauche_head">Titre</div>
<div class="gauche_body">Contenu</div>
</div>
<div id="bloc_centre>
<div class="centre_head">Titre</div>
<div class="centre_body">Contenu</div>
<div class="centre_head">Titre</div>
<div class="centre_body">Contenu</div>
</div>

Et pour le CSS :

Code:

#bloc_gauche
{
position: absolute;
left: 0px;
top: 100px; /* change les distances selon ton header, etc...*/
width: 200px;
}

#block_centre
{
position: absolute;
left: 220px;
top: 100px;
width: 500px;
}

A toi de personnaliser tout ça maintenant

Sinon, on dit Newsletter et non Newletter, car la lettre comporte en général plusieurs nouvelles.

[wk] · Super schtroumpf Messages: 1082

en plus "news" est invariable au pluriel et au singulier en Anglais : )

RaGe · Super schtroumpf Messages: 1150

Oui effectivement, tu as une petite erreur dans ta structure HTML.

Si tu opères comme tel, avec une partie gauche et une partie droite (en float ou absolute peu importe), il faut que les éléments d'une partie se suivent.

Ainsi il ne faut pas faire :

Code:

<div class="gauche">blabla</div>
<div class="droite">blabla</div>
<div class="gauche">blabla</div>
<div class="gauche">blabla</div>
<div class="droite">blabla</div>

Mais plutôt :

Code:

<div class="gauche">
<div>blabla</div>
<div>blabla</div>
<div>blabla</div>
</div>
<div class="droite">
<div>blabla</div>
<div>blabla</div>
</div>

Ton erreur est de "lire" ton site comme une page d'un livre : de gauche à droite et ligne après ligne comme s'il n'y avait qu'une colonne.
Or là il y en a 2, et donc, de la même façon qu'on lirait un texte sur 2 pages (celle de gauche et celle de droite), on lit d'abord les éléments de la page de gauche (login, recherche, newsletter) puis ensuite celle de droite (promo, actualité).

Tchupa · Schtroumpf Messages: 133

Ok , je comprends mieux et surtout c'est plus propre au niveau du code.

voila ce que j'ai fait

Code:

<div class="conteneur-gauche">
   <div id="blockheadident">Login</div> 
   <div id="blockbodyident">*login*</div> 
   <div id="blockheadrecherche">Recherche</div> 
   <div id="blockbodyrecherche">*recherche*</div> 
   <div id="blockheadrayon">Nos produits</div> 
   <div id="blockbodyrayon">Corps rayon</div> 
   <div id="blockheadnewletter">Newletter</div> 
   <div id="blockbodynewletter">*mailing*</div> 

</div>

<div class="conteneur-milieu">
   <div id="blockheadpromo">Nos promotions</div> 
   <div id="blockbodypromo">*cms_1*</div> 
   <div id="blockheadnew">Actualité du jour</div> 
   <div id="blockbodynew">*edito*</div> 
</div>

Et effectivement sa fonctionne super !!!

il me reste plus qu'a decaller les blocs de gauches un peu vers la gauche pour que se soit plus équilibrer au niveau du design.
Je te remercies beaucoup.

RaGe · Super schtroumpf Messages: 1150

Yep ! nickel !
ça semble plus propre et plus 'conventionnel' si je puis dire.

Un autre intérêt de la bonne structure d'une page web, c'est son côté facilement réutilisable et son externalisation facilitée (über utile pour une mise en template).

Tchupa · Schtroumpf Messages: 133

Une question , mon footer je l'ai fait sous forme d'une bannière , mais je voudrais savoir ou je dois la mettre pour que mon design reste extensible en hauteur c'est a dire que si le corps principale s'allonge que le footer reste au bonne endroit .

RaGe · Super schtroumpf Messages: 1150

Tu veux qu'il soit fixé et toujours visible ?
Ou juste qu'il reste en dessous du corps ?

Pour la 1 il faut jouer avec une position :fixed; + bidouille pour IE6

Pour la 2, il suffit juste qu'il soit dans ton fichier HTML comme sur la fenêtre de ton navigateur, c-à-d le plus bas possible

Tchupa · Schtroumpf Messages: 133

Je veux qu'il reste toujours en dessous du corp

Mais il me met carrément le footer a coter du site au lieu d'en dessous

Voici tout mon body

Code:

<body>
<center>
<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> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="http://www.wartelle-shop.com/boutique/infos_societe.cfm?code_lg=lg_fr"><img src="imagesdesign/societe.png"></a></li> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="http://www.wartelle-shop.com/boutique/infos_cgv.cfm?code_lg=lg_fr"><img src="imagesdesign/condition-general.png"><a></li> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="http://www.wartelle-shop.com/boutique/page_libre.cfm?code_lg=lg_fr"><img src="imagesdesign/palmares.png"><a></li> 
      <li><a href=""><img src="imagesdesign/separateur.png"></li> 
      <li><a href="mailto:sebastien.wartelle@wanadoo.fr"><img src="imagesdesign/contact.png"><a></li> 
      </ul>
   </div>

   <div id="contenu">

   <div id="panier"><img src="imagesdesign/bouton-panier.png"></div> 

<div class="conteneur-gauche">
   <div id="blockheadident">Login</div> 
   <div id="blockbodyident">*login*</div> 
   <div id="blockheadrecherche">Recherche</div> 
   <div id="blockbodyrecherche">*recherche*</div> 
   <div id="blockheadrayon">Nos produits</div> 
   <div id="blockbodyrayon">Corps rayon</div> 
   <div id="blockheadnewletter">Newletter</div> 
   <div id="blockbodynewletter">*mailing*</div> 

</div>

<div class="conteneur-milieu">
   <div id="blockheadpromo">Nos promotions</div> 
   <div id="blockbodypromo">*cms_1*</div> 
   <div id="blockheadnew">Actualité du jour</div> 
   <div id="blockbodynew">*edito*</div> 
</div>

</div>
   </div>
   <center><img src="imagesdesign/footer.png"><center>
</div>

</body>