Aligner l'image à droite et de haut

Mon site a un logo avec des images sur les deux côtés. Je sais que la largeur et la hauteur du logo, mais les images varient. J'ai mis une image dans le coin en haut à gauche et fait un 10px de la marge. Je veux maintenant faire de même pour l'autre côté, mais sa ne fonctionne pas. J'ai fait la background-position de la propriété et de la régler vers le haut à droite, mais il n'a rien fait. Quel est le problème?

CSS

#leftpic {
   background-position: left top;
   background: url('Images/left_pic.png') no-repeat;
   height : 133px;
   padding : 0;
   margin: 10px 10px 10px 10px;
   width: 138px;
}

#rightpic {
   background-position: top right;
   background: url('Images/left_pic.png') no-repeat;
   height : 133px;
   padding : 0;
   width: 138px;
}

#masthead {
   background-position: center bottom;
   background: url('Images/logo.png') no-repeat center bottom;
   height : 160px;
   padding : 0;
   margin: 10px auto 0 auto;
   width: 910px;
}

HTML

<div id="masthead">
   <div id="leftpic"></div>
   <div id="rightpic"></div>
</div>
  • pouvez-vous mettre un peu de code?
InformationsquelleAutor jmasterx | 2010-01-10
  1. 2

    Ajouter float: left et float: right à votre leftpic et rightpic id:

    #leftpic {
background-position: left top;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
margin: 10px;
width: 138px;
float: left;
}

#rightpic {
background-position: top right;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
width: 138px;
float: right;
margin: 10px;
}

    Comme une question de CSS meilleures pratiques, je suggère également à l'aide d'un masthead-image classe pour contenir le CSS à la fois la droite et la gauche des images à utiliser:

    CSS:

    .masthead-image {
    width: 138px;
    height: 133px;
    margin: 10px;
    padding: 0;
}

#leftpic {
    background: url('Images/left_pic.png') no-repeat left top;
    float: left;
}

#rightpic {
    background: url('Images/right_pic.png') no-repeat right top;
    float: right;
}

#masthead {
    background: url('Images/logo.png') no-repeat center bottom;
    height : 160px;
    padding : 0;
    margin: 10px auto 0 auto;
    width: 910px;
}

    HTML:

    <div id="masthead">
    <div id="leftpic" class="masthead-image"></div>
    <div id="rightpic" class="masthead-image"></div>
</div>
    • cela n'a pas fonctionné pour moi, il est resté en bas à gauche
    • l'inversion de l'ordre de gauche et de droite fixe tout merci
    • Il semble OK pour moi, mais ensuite, j'ai seulement testé avec IE8/FF 3.5/Chrome 3. YMMV avec les anciens navigateurs.
    InformationsquelleAutor Chad Levy