Aligner 1 image et 2 blocs div horizontalement

**Steph4fun** · 21/11/2008, 22h13

Bonjour,

J'ai un problème que je n'arrive pas à résoudre : Aligner 1 image et 2 blocs div (logo.jpg, elembandeau et fetejour) dans un bandeau. A priori c'est pourtant simple mais bon...
Les blocs div sont naturellement affichés verticalement, mais même avec des display:inline je n'arrive pas à régler le pb...
J'ai mis volontairement des bordures autour des blocs pour voir mais sous Firefox, ces bordures ne font pas la bonne taille..
Vous trouverez surement qu'il y a des div inutiles mais c'est fait exprès..

Voic imon code html :

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
<body>
<div id="container">
   <div id="bandeau">
      <img src="logo.jpg" width="155" height="123" alt="" />
 
      <div id="elembandeau">
         <img src="bandeau.jpg" width="582" height="123" alt="" />
      </div>
 
      <div id="fetejour">
         <div id="fj_haut">
      	   <img src="logohaut.jpg" width="230" height="57" alt="" />
         </div>
         <div id="fj_bas">
      	   <img src="logobas.jpg" width="230" height="57" alt="" />
         </div>
       </div>   
    </div>
</body>

Et mon code CSS :

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
div#container {
   margin-top:50px;
   width:990px;
   margin-left: auto;
   margin-right: auto;
   background-color:#abcdef;
   border: 1px solid #000;
}
div#bandeau {
	width:990px;
	height:230px;
	background-color:#00CCFF;
  border: 1px solid red;
	}
div#elembandeau {
   display:inline;
   width:583px;
   border: 2px solid green;
	}
div#fetejour {
   width:230px;
   height:123px;
   border: 2px solid red;
	}
div#fj_haut {
   margin-left: 0;
   margin-top: 0;
	}
div#fj_bas {
   margin-left: 0;
   margin-top: 0;

Merci à tous de votre aide !
Steph

**GihefBey** · 21/11/2008, 23h22

Bonjour,

Tu veux les aligner.
Comment ?

Un dessin ?

Ou essaye comme ça. Avec un peu de absolute.
Tu ne sembles pas avoir besoin de toutes ces <div>.
Et les "div" sont inutiles dans les noms de tes styles.

Code html :

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
 
<!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" lang="fr">
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
   <div id="bandeau">
      <img src="logo.jpg" width="155" height="123" alt="" style="background-color: #eee;" />
 
      <img src="bandeau.jpg" id="elembandeau" width="582" height="123" alt="" />
 
      <div id="fetejour">
         <img src="logohaut.jpg" id="fj_haut" width="230" height="57" alt="" />
         <img src="logobas.jpg" id="fj_bas" width="230" height="57" alt="" />
       </div>   
    </div>
</div>
</body>
</html>

Code css :

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
40
41
42
43
44
45
46
 
#container {
  margin-top:50px;
  width:990px;
  margin-left: auto;
  margin-right: auto;
  background-color:#abcdef;
  border: 1px solid #000;
  }
#bandeau {
position : relative;
  width:990px;
  height:230px;
  background-color:#00CCFF;
  border: 1px dashed red;
  }
#elembandeau, #fetejour {
  position : absolute;
  top : 0;
  height:123px;
  }
#elembandeau {
/*        display:inline;*/
  left : 155px;
  width:583px;
/*        height:123px;*/
  background-color: green;
  }
#fetejour {
right : 0;
  width:230px;
/*        height:123px;*/
  background-color: red;
  }
/*      #fj_haut {
   margin-left: 0;
   margin-top: 0;
  }
#fj_bas {
 margin-left: 0;
 margin-top: 0;
 }
*/
img {
display : block;
}

-

**devyan** · 21/11/2008, 23h41

Salut,

Si tu places "elembandeau" et "fetejour" en "display:inline-block" tout sera sur la même ligne.

Par contre comme toutes tes images n'ont pas la même hauteur (57+57 < 123

)

Elles vont donc être alignées mais par rapport au bas des images...

**GihefBey** · 21/11/2008, 23h56

Envoyé par devyan

"display:inline-block"

Ce n'est pas la 1re fois que je vois ça ici.
Où avez-vous trouvé l'info ?

-

**Erwan31** · 22/11/2008, 22h05

Envoyé par GihefBey

Ce n'est pas la 1re fois que je vois ça ici.
Où avez-vous trouvé l'info ?
-

La valeur inline-block à été ajoutée à CSS2.1 mais n'est pas implémentée par Firefox2- (pour lequel il faudra ajouter la valeur propriétaire -moz-inline-stack; mais avec l'inconvénient de devoir ajouter un élément de block englobant les enfants de l'élément doté du display:-moz-inline-stack)

Son support est incorrect sur IE, il s'applique aux éléments inline ou aux élément de niveau block mais uniquement une fois converti en boîtes en-ligne via un display:inline et doté du haslayout.
Tu devrais pouvoir trouver facilement des info sur le net.

A priori, le choix du inline-block ne représente ici aucune valeur ajoutée ici sur le comportement flottant (float) et il est préférable de s'en passer
puisque l'implémentation de -moz-inline-stack pour Firefox 2- implique au minimum un élément structurel supplémentaire et un hack pour IE.

Donc la solution ici consiste à utiliser la propriété float:

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
STYLE:
 
div#bandeau {
	overflow:hidden;
	width:990px;
	height:230px;
	background:#00CCFF;
}
    #bandeau img {float:left}
div#elembandeau {width:583px;}
div#fetejour {
	float:left;
	width:230px;
	height:123px;
}
    #fetejour img {float:none; display:block;}
 
HTML :
 
	<div id="bandeau">
		<img src="" width="155" height="123" alt=""  />
		<img src="" width="582" height="123" alt="" />
		<div id="fetejour">
			<img src="" width="230" height="57" alt="" />
			<img src="" width="230" height="57" alt="" />
		</div>
	</div>

Le overflow:hidden; permet au div bandeau d'englober ses enfants flottants qui sont en temps normal sortis du flux normal vis à vis de son conteneur parent.
Pourquoi mettre les images de fetejour dans un div?
Pour éviter l'espace indésirable sous une image (dans certaines conditions), il faut lui attribuer par exemple un display:block (ou alors un vertical-align:middle/bottom)

**Steph4fun** · 23/11/2008, 18h08

Effectivement la solution inline-block fonctionne sous Firefox 3 mais pas sous IE7.
Un grand MERCI à vous pour votre aide et pour ces réponses rapides.

**Erwan31** · 23/11/2008, 20h15

Envoyé par Steph4fun

Effectivement la solution inline-block fonctionne sous Firefox 3 mais pas sous IE7.

Oui c'est normal cela demande un petit correctif... mais la solution des flottant ne te convient pas?

**Steph4fun** · 25/11/2008, 14h46

Oui c'est normal cela demande un petit correctif... mais la solution des flottant ne te convient pas?

Si si mais j'ai mis des images pour l'exemple mais je pourrais très bien avoir autre chose (flash, blocs..) donc je voudrais garder les div présents dans le html pour pouvoir ensuite jouer sur la mise en page...

Aligner 1 image et 2 blocs div horizontalement

Positionnement en CSS

Discussions similaires

Partager

Partager