[css] Aligner une image à droite

**cristolb** · 15/05/2006, 17h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**Sheriff** · 15/05/2006, 18h32

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

**cristolb** · 23/05/2006, 17h27

Salut,

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

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

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

**Nemesys** · 23/05/2006, 20h10

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**balu** · 23/05/2006, 20h34

Une autre solution

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**cristolb** · 25/05/2006, 01h28

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 !

**Nemesys** · 25/05/2006, 13h06

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

Cordialement.

[css] Aligner une image à droite

Positionnement en CSS

Discussions similaires

Partager

Partager