Mise en page site web

**hartecel** · 21/02/2007, 22h04

Bonsoir à tous !

Je suis entrain de concevoir un site web.J'ai regardé beaucoup de sources css pour voir comment il fallait positionner les blocs : en-tête, menu, corps et pieds de page. Je constate qu'il y a bc de manière de faire. Certains utilisent des float, d'autres des positions fixed, absolu ou relative.

Je me demandais laquelle de ces solutions choisir sachant que je veux que mon site soit adaptable à la résolution de l'écran ?

Voici un test que j'ai fait :

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
 
#conteneur
{
 border:2px solid;
}
 
#enTete
{
 border:2px solid;
}
 
#contenu
{
  border:2px solid;
}
 
#menu
{
 float:left;
 border:2px solid;
}
 
#corps
{
 float:left;
 border:2px solid;
}
 
#piedDePage
{
 clear:both;
 border:2px solid;
}
-------
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 
 <HEAD>
  <META http-equiv="content-type" content="text/html; charset=windows-1250">
  <TITLE>test</TITLE>
  <LINK href="styles.css" rel="stylesheet" type="text/css"/>
 </HEAD>
 
 <BODY>
  <DIV ID="conteneur">
   <DIV ID="enTete">en tete</DIV>
   <DIV ID="contenu">
     <DIV ID="menu">menu</DIV>
	 <DIV ID="corps">corps</DIV>
   </DIV>
   <DIV ID="piedDePage">pied de page</DIV>
  </DIV>
 </BODY>
 
</HTML>

Qu'en pensez-vous ?

J'ai un souci quand je définis une largeur pour mon contenu, ma mise en page est toute chamboulée qd je la minimise.

**cedsun** · 22/02/2007, 17h58

Pour ma part, je structurerais autrement...

voici ma piste :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 
<HEAD>
  <META http-equiv="content-type" content="text/html; charset=windows-1250">
  <TITLE>test</TITLE>
<LINK href="styles.css" rel="stylesheet" type="text/css"/>
  <style type="text/css">
<!--
body {
	margin: 0px;
}
 
#conteneur
{
 border:2px solid;
}
 
#enTete
{
 border:2px solid;
}
 
#contenu
{
	border:2px solid;
	padding-left: 150px;	
}
 
#menu
{
	float:left;
	border:2px solid;
	width: 150px;
	height: 100%;
}
 
#corps
{
 float:left;
 border:2px solid;
}
 
#piedDePage
{
 clear:both;
 border:2px solid;
}
 
-->
  </style>
</HEAD>
 
 <BODY>
  <DIV ID="conteneur">
   <DIV ID="enTete">en tete</DIV>
   <DIV ID="menu">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod   tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At   vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,   no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit   amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut   labore et dolore magna aliquyam erat, sed diam voluptua.</DIV>
   <DIV ID="contenu">
     <p>Lorem           ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod           tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.           At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd           gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem           ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod           tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
     <p>At vero eos et accusam           et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata           sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur           sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et           dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam           et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata           sanctus est Lorem ipsum dolor sit amet. </p>
     <p>Duis autem vel eum           iriure dolor in hendrerit in vulputate velit esse molestie consequat,           vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et           iusto odio dignissim qui blandit praesent luptatum zzril delenit augue           duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer           adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore           magna aliquam erat volutpat. </p>
     <p>Ut wisi enim ad minim           veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl           ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in           hendrerit in vulputate velit esse molestie consequat, vel illum dolore           eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim           qui blandit praesent luptatum zzril delenit augue duis dolore te feugait           nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue           nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem           ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh           euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi           enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit           lobortis nisl ut aliquip ex ea commodo consequat. </p>
     <p>Duis autem vel eum           iriure dolor in hendrerit in vulputate velit esse molestie consequat,           vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et           justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata           sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur           sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et           dolore magna aliquyam erat, sed diam voluptua. </p>
     <p>At vero eos et accusam           et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata           sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur           sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod           eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita           ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero           voluptua. est Lorem ipsum dolor sit amet.</p>
     <p> Lorem ipsum dolor           sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt           ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr,           sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam           erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et           ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem           ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing           elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna           aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo           dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus           est Lorem ipsum dolor sit amet.</p>
     <p> Lorem ipsum dolor           sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt           ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos           et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,           no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
   </DIV>
   <DIV ID="piedDePage">pied de page</DIV>
  </DIV>
 </BODY>

**hartecel** · 22/02/2007, 22h38

Merci pour ton aide.
En fait , je souhaiterais une mise en page comme ça :

tout en étant adaptable à la résolution de l'écran.
En fait, j'ai tojours des problèmes avec les menus(bordeaux) et le corps(gris clair). Le corps bouge qd je change de résolution.

**cedsun** · 23/02/2007, 00h03

Normalement, le code que je t'ai envoyé devrait t'aider.

Il n'y a plus que le div Menu à modifier en insérant à l'intérieur 2 autres div.

Ensuite, il faut jouer un peu avec les margin et les padding et tu peux obtenir la mm page que sur ton visuel.

dis-moi... tu voudrais pas qu'on fasse le taff à ta place quand même ?...

Allez courage ! on est tous passé par là

Mise en page site web

CSS

Discussions similaires

Partager

Partager