Salut après avoir lu et re-lus plusieur fois le tuto de Matéo sur le design en XHTML // CSS je bloque sur le centrage de mon design du bloc de droite et du millieu.
body /* la balise body */
{
font-size: 11px; /* taille du texte */
font-family: Verdana; /* police du texte */
margin:auto;
color: #ffffff; /* couleur du texte */
background-image: url("images/fond.png"); /* image de fond */
background-repeat: repeat; /* répétée sur tout le body */
background-attachment: fixed; /* l'image reste fixée, donc seul le contenu bouge */
}
#structure /* conteneur principal */
{
margin-top:10px;
margin-bottom:0px;
width: 1150px; /* longueur du conteneur */
margin: auto; /* centrage du conteneur (ne fonctionne pas sous les anciennes version d'Internet Explorer */
}
#banniere /* bannière */
{
border: 0px solid #a1a1a1; /* bordure */
width:1000px;
height: 198px; /* hauteur de la banniere */
background-image: url("images/header.png"); /* image de fond */
background-repeat: no-repeat; /* non répétée */
background-color: #; /* couleur de fond, à enlever quand la bannière est mise */
}
#menu /* menu */
{
border: 0px solid #a1a1a1; /* bordure */
height: 46px; /* hauteur de la banniere */
width:800px;
margin:auto;
background-image: url("images/fond_menu.png"); /* image de fond */
background-repeat: repeat-x; /* repetée */
background-color: #; /* couleur de fond, à enlever quand la bannière est mise */
}
h1 /* titres principaux */
{
margin: 0px; /* enlève la marge automatique */
line-height: 20px; /* hauteur de la ligne de texte */
padding-left: 5px; /* marge interne à gauceh pour éviter que le texte colle au bord */
font-size: 12px; /* taille du texte */
background-image: url("images/titre.gif"); /* image de fond */
background-repeat: repeat-x; /* répétée sur la longueur */
border-bottom: 1px solid #a1a1a1; /* bordure sous le titre */
}
#menu_gauche /* menu de gauche */
{
margin-top: 10px; /* marge au dessus pour pas qu'il se colle à la bannière */
margin-left: 50px;
float: left; /* situé à gauche */
width: 257px; /* longueur du menu */
border:0px;
}
#menu_droite /* menu de droite */
{
margin-top: 10px; /* marge au dessus pour pas qu'il se colle à la bannière */
margin-right:50px;
padding: 0px;
float: right; /* situé à droite */
width: 219px; /* longueur du menu */
}
.element_menu /* élément pour les deux menus */
{
border: 0px solid #a1a1a1; /* bordure */
margin-bottom: 10px; /* marge en dessous pour ne pas que les éléments des menus soient collés */
line-height: 20px; /* hauteur de la ligne de texte */
font-weight: bold; /* texte en gras */
background-image: url("images/fond_gauche.png");
}
.element_menu a /* liens des éléments des menus */
{
display: block; /* on trasforme le lien en block pour pouvoir y attribuer certaines propriétés et pour qu'il y ai un retour à la ligne */
padding-left: 5px; /* marge interne à gauche pour ne pas que le texte soit collé au bord */
color: #0066B3; /* couleur du texte */
text-decoration: none; /* on enlève le soulignement automatique */
}
.element_menu a:hover /* quand un lien de l'élément menu est survolé */
{
text-decoration: none; /* on enlève le soulignement automatique */
}
#corps /* corps */
{
width: 465px; /* longueur du corps */
padding: 0px;
float: left; /* permet au menu de droite de ne pas se retrouve en dessous du corps */
margin-left: 100px; /* marge à gauche pour séparé le corps du menu de gauche */
margin-top: 10px; /* marge en haut pour séparé le corps de la bannière */
padding-left: 0px
}
#corps h1 /* les titres principaux du corps */
{
width:465px;
height:79px;
margin: 0px; /* on enlève les marges automatiques */
padding-left: 15px; /* on met une marge interné à gauche pour ne pas que le texte soit collé au bord */
font-size: 12px; /* taille du texte */
background-image: url("images/aw_area.png"); /* image de fond */
background-repeat: no-repeat; /* répétée sur la longueur */
border: 0px solid #a1a1a1; /* bordure */
text-align:center;
float: none;
}
.element_corps /* élément du corps */
{
border: 0px solid #a1a1a1; /* bordure */
border-top: 0px; /* on supprime la bordure du haut car avec la bordure du titre ca ferai une double bodure */
padding: 0px; /* on met une marge interne pour ne pas que le texte coole aux bords */
margin:auto;
margin-top: 0px; /* on supprime la marge du haut automatique */
margin-bottom: 10px; /* on configure la marge u bas automatique pour séparé les éléments corps */
text-align: justify; /* on justifie le texte pour le rendre plus propre */
background-image: url("images/fond_area.png");
}
.element_corps a, #copyright a /* liens des éléments du corps et du copyright */
{
color: #0066B3; /* couleur du lien */
text-decoration: none; /* on enlève le soulignement automatique */
}
.element_corps a:hover, #copyright a:hover /* lorsque un lien d'un élément corps ou du copyright est survolé */
{
text-decoration: underline; /* on souligne le lien */
}
#copyright
{
clear: both; /* permet d'annuler les flottant et d'empêcher que le copyright pass suos les menus et le corps */
width:1000px;
height:46px;
margin: left; /* on enlève les marges automatiques */
background-color: #f4f4f4; /* couleur de fond */
background-image: url("images/footer.png");
line-height: 15px; /* hauteur de la ligne de texte */
border: 0px solid #a1a1a1; /* bordure */
text-align: center; /* on centre le texte */
font-size: 10px; /* taille du texte */
}
Voila si quelqu'un serait daccord pouvoir m'aider je le remercie grandement !
Merci
Probleme de centrage d'un design
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.