Discussion :

[rudwolf]

Bonjour,

je voudrais réaliser le template d'un site pour comprendre les CSS et je me heurte à un pb avec les images

Je voudrais donc afficher à la suite mon bord gauche, mon centre et mon bord droite pour avoir au final une image complete (ces 3 images seront le fond de 3 cellules d'un tableau -> donc au final l'image composé est le fond de mon header par exemple)

voilà mon css par exemple

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
img {
	border: 0px;
}
 
/* ===================================================== 
 *  STYLES SPECIFIQUES AU TEMPLATE : HEADER
 * -----------------------------------------------------
 */
 
#header {
	/* Style des cellules du header */
	background: url("../images/header_background.png") top left repeat-x;
	margin: Opx;
	width: 200px
}
 
#header_left {
	/* Style des cellules du header */
	background: url("../images/header_left.png") 0 0 no-repeat;
	margin: Opx;
}
 
#header_right {
	/* Style des cellules du header */
	background: url("../images/header_right.png") 0 0 no-repeat;
	margin: 0px;
	height: 140px;
}

et mon code de ma page

Code :

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

1
2
3
4
5
6
 
<!-- DEBUT DU HEADER -->
<div class="header_left"></div>
<div class="header"></div>
<div class="header_right"></div>
<!-- FIN DU HEADER -->

à ce moment mes images sont l'une en dessous des autres

que faire ?

merci

@+

Rudwolf

[glloq8]

Déjà, si tu mets un # dans ta feuille de style, tu dois mettre id et no pas class dans ton code...

Ensuite, il suffit simplement d'ajouter la ligne suivant à chaque id (dans ta feuille de style) :

Code :

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

float: left;

Normalement, ils devraient être l'un à côté de l'autre !

EDIT : J'ai oublié, tu dois mettre du contenu dans tes div, sinon, tu risques de ne rien avoir à l'écran !

[rudwolf]

salut,

merci pour la réponse

et des conseils

je remarque que l'on est obligé de preciser le width et le height dans le CSS pour chaque image afin que celle-ci s'affiche, c'est confirmé ???

@+

Rudwolf

[glloq8]

Non...

Si tu mets une image en passant par la balise <img /> tu n'es pas obligé de définir la taille de ton image, et se cale automatiquement sur la taille de l'image...

Par contre, si tu mets ton images en background, alors là, oui, tu dois définir le width et le height...