Création de deux blocs

joquetino

16 Jun 2006 à 16:35

Bonjour à tous,

Voilà, j'ai un problème relativement simple à résoudre.
Je souhaiterais créer un haut de page avec deux blocs : un tout à gauche, dans laquelle j'y insère une image, l'autre tout à droite dans lequel j'insère également une image. Il y a donc un espace vide entre les deux blocs. Comment pourrais-je procéder pour faire ce que je souhaiterais faire? Et est-ce faisable?

Merci d'avance.

Hermann

16 Jun 2006 à 18:31

Bonjour,
Oui tu crée un div dans lequel tu insères tes 2 images et
tu appliques à la premiere un float:left
et la seconde une float:right

joquetino

19 Jun 2006 à 09:47

Salut et merci pour ta réponse.

J'ai essayé de suivre ton conseil, mais je n'y arrive pas.
Voici mon code :




div#img2 {
 float : right;
 background-image : url(logo.gif);
 background-repeat : no-repeat; 
 height : 55px;
 width : 50%;
 border: solid 1px #990000 ; 
}


div#img1 {
 float : left;
 background-image: url(Logo_accueil.gif);
 background-repeat : no-repeat; 
 height : 55px;
 width : 50%;
 border: solid 1px #990000 ; 
}

div#imagePresentation {
 width : 100%;
 height : 55px;
 border: solid 1px #990000 ; 

}

</style>

<body>

<div id="imagePresentation">
  <div id="img1"></div>
  <div id="img2"></div>
</div>


</body>
</html>

Il m'affiche bien deux blocs en ligne, mais les deux images restent à gauche de leur bloc respectif. Or moi je souhaiterait que l'image1 soit à gauche, et l'autre à droite. Qui voit une erreur dans mon code?

Merci d'avance.

Hermann

19 Jun 2006 à 10:45

Salut,
Tu compliques les choses...Pourquoi avoir mis ton image en background?
Est ce que tu es obligé de mettres tes images dans un div?
Ton erreur vient du fait que ta 2ieme images qui est en background s'affichent par defalut à gauche de son conteneur (0% 0%)
donc tu dois placer ton background à droite:

div#img2 {

 float : right;
 background: url(logo.gif) no-repeat right; /*propriété raccourci*/
 height : 55px;
 width : 50%;
 border: solid 1px #990000 ; 

}