Réaliser maquette avec DIV

**opeo** · 28/09/2012, 11h05

Bonjour,
j'aimerai avoir une aide pour réaliser une page avec les <DIV>. Voilà ma maquette en pièce jointe. Voilà comment j'ai organisé ma page :

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
 
<html>
<body>
<div id="pagetotale">
<div id="entete"></div>
<div id="main">
<div id="main_g"></div><div id="main_d"></div>
</div>
<div id="contenu">
<div id="contenu_g"></div>
<div id="contenu_m"></div>
<div id="contenu_d"></div>
</div>
<div id="bas">
<div id="bas_g"></div>
<div id="bas_d"></div>
<div id="pied"></div>
</div>
</div>
</body>
</html>

1- Dans la div "id=pagetotale", je souhaite mettre une image en arrière plan qui était utilisée dans un tableau (cette image était divisée en trois parties : image_haut pour le haut du tableau, image_milieu pour le milieu et image_bas pour le bas. Ces images étaient utilisées dans les classes et elles même insérées dans les cellules du tableau). Je ne sais pas comment faire afin d'afficher ces images en arrière plan avec la div ? c'est à dire déclarer mes "id".
2- J'aimerai mettre une image dégradé derrière le "body" de même que dans les div "id=contenu_m" et "id=bas_d". J'aimerai avoir une piste qui m'aiderait à définir mes "id" afin que cela marche dans tous les navigateurs.

Je vous remercie d'avance de votre aide.

**Muchos** · 28/09/2012, 12h50

J'aimerai avoir une piste qui m'aiderait à définir mes "id" afin que cela marche dans tous les navigateurs.

A priori, le contenu de l'id est identiquement interprété par les navigateurs.

Je ne sais pas comment faire afin d'afficher ces images en arrière plan avec la div ?

Idéalement, vous recollez les trois parties pour faire une image (bien compressée !), que vous insérez en css. Ex:

Code css :

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

1
2
3
4
 
#pagetotale {
background: green url(maphoto-de-foret.jpg) no-repeat scroll 0 0;
}

**opeo** · 28/09/2012, 14h33

Merci de votre réponse.

Mais comme j'ai trois images, je ne sais pas si peux faire ceci ?

Code :

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

1
2
3
4
 
#pagetotale {
background: green url(maphoto-de-foret_haut.jpg,maphoto-de-foret_milieu.jpg,maphoto-de-foret_bas.jpg) no-repeat scroll 0 0;
}

Ce que j'entendais par définir les "id" c'était de faire le code css. J'ai essayé ceci mais, je n'ai pas la disposition de ma maquette. Comment je peux améliorer mon code ?

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
#pagetotale{
	margin-top:20px;
	margin-left:140px;
	width:930px;
        background: green url(maphoto-de-foret_haut.jpg,maphoto-de-foret_milieu.jpg,maphoto-de-foret_bas.jpg) no-repeat scroll 0 0;
}
#entete{
        margin-top:10px;
	margin-left:10px;	
	height:80px;
	width:100%
	min-height:80px;
}
#main{
        margin-top:10px;
	margin-left:10px;
	width:100%;
}
#main_g{
       position:relative;
	width:150px;
	border:solid 1px black;
	float:left;
}
#main_d{
        position:relative;
	width:770px;
	border:solid 1px black;
	float:right;
}
#contenu{
        margin-top:10px;
	margin-left:10px;
	width:100%;
}
#contenu_g{
        position:relative;
	width:150px;
	height:250px;	
	float:left;
}
#contenu_m{
        position:relative;
	width:500px;
	height:250px;
        background:url(degrade.jpg)no-repeat scroll 0 0;
}
#contenu_d{
        position:relative;
	width:250px;
	height:250px;
	border:solid 1px navy;		
	float:right;
}
#bas{
        margin-top:10px;
	margin-left:10px;
	width:100%;
}
#bas_g{
        position:relative;
	width:150px;
	float:left;
}
#bas_d{
        position:relative;
	width:770px;	
	background:url(degrade.jpg)no-repeat scroll 0 0;
	float:right;
}
#pied{
        margin-top:10px;
	margin-left:10px;	
	height:80px;
	width:100%
	min-height:80px;
}

En vous remerciant !

**Muchos** · 29/09/2012, 00h56

Pour background-image, url() définit UNE SEULE url valide.

Pour votre maquette, elle semble réalisable assez facilement. Voici un tuto à succès sur la mise en page css avec des div.
Néanmoins, souvenez-vous que le web n'est pas du print

Réaliser maquette avec DIV

CSS

Vue hybride

Discussions similaires

Partager

Partager