[css] Aligner une image à droite

Version imprimable

Bonjour !

Je cherche à faire un bandeau, avec deux images, un à gauche et l'autre à droite et le titre au centre. Pour cela, j'utilise un div qui contient images et titre et qui s'étend sur 100% de la longueur :
Code:

1 2 3 4 5 6 <div class="entete"> <span class="imageGauche"><img src="logoFdg.gif" width="114" height="112" alt="logo Fdg"/></span> <div class="bandeauTitre"><span class="titre">Titre</span><span class="sousTitre"><br/> Sous-titre</span></div> <span class="imageDroite"><img src="cellule.gif" width="117" height="93" alt="logo cellule" align="left"/></span> </div>
Mon problème est que je n'arrive pas à ce que l'image de droite s'adapte aux différentes résolutions ou redimensionnement de la fenêtre. Quelqu'un a une idée ?

Merci d'avance !

15/05/2006, 18h32
Sheriff

salut !
peut-on voir le code des classes imagegauche et imagedroite ?
@+

Salut,

Désolé, j'ai été absent quelques jours !

Voici le code CSS des images de gauche et de droite :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 span.imageGauche { margin-left: 20px; margin-right: 50px; position:absolute; top: 27px; } span.imageDroite { left:840px; top:42px; position:absolute; }

23/05/2006, 20h06
<romain/>

Tu ne devrais pas utilisé de position absolute ici je pense.

Tu as essayé de mettre un float:right pour ton image de droité?

Ca devrait suffire je pense

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
span.imageGauche {
 margin-left: 20px;
 margin-right: 50px;
 position:absolute;
 top: 27px;
 float:left;
}
 
span.imageDroite { 
 left:840px;
 top:42px;
 position:absolute;
 float:right;
}

Une autre solution ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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">
<head>
    <title>TEST</title>
    <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
    <style type="text/css">
    .imageGauche {
        float: left;
    }
 
    .imageDroite {
        float: right;
    }
 
    .titre {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.5em;    
        text-align: center;
        margin: 0;
        padding: 0;
        line-height: 100px;
    }
 
    .entete {
        border: 1px solid #000;
        height: 100px;
        width: 100%;
    }
    </style>
</head>
 
<body>
<div class="entete">
    <img class="imageGauche" src="image.png" alt="" />
    <img class="imageDroite" src="image.png" alt="" />
    <h1 class="titre">TITRE</h1>
</div>
</body>
</html>

Dans mon exemple, j'ai supposé que les images avaient 100 pixels de haut. Il suffit de remplacer 100px par la hauteur des images.

*J'ai vérifié dans IE, Firefox et Opera.

25/05/2006, 01h28
cristolb

Merci Balu !

Ton code fonctionne parfaitement !

Nemesis : ton code ne marche pas. Je pense également (comme Romain) qu'il s'agit d'un problème dû à la position:absolute.

Merci à tous et à toutes !
25/05/2006, 13h06
Nemesys

Oui autant pour moi, ici dans mon code, il aurait fallu l'enlever ;)

Cordialement.