Partage
  • Partager sur Facebook
  • Partager sur Twitter

Probleme de centrage d'un design

CSS

Sujet résolu
Anonyme
    2 septembre 2006 à 15:50:52

    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.

    Voici le site en question : http://www.darkgrafx.net/Angelswings/

    Citation : Code CSS


    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 ;)
    • Partager sur Facebook
    • Partager sur Twitter

    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.
    • Editeur
    • Markdown