structure de page HTML

Version imprimable

Bonjour a tous,
Voila aujourd'hui je me pose une nouvelle question!
Comment bien structurer son site grace aux <DIV> et au CSS?
Je m'explique,
pour exemple voici mon code CSS et une partie du code du site:

Code:

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
 
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
 
#conteneur
{
        height: 31%;
        width: 100%;
        border:solid 1px red;
}
#2
{
        height: 50%; 
        width: 50%; 
        text-align: center;
        position: relative;
        float: left;
}
 
#1
{
        height: 50%;
        width: 30%;
        tex-align: center;
        float: left;
}
 
#3
{
        height: 50%;
        width: 30%;
        tex-align: center;
        
        position: relative;
        
        
}
#4
{
        height: 50%;
        width: 50%;
        tex-align: center;
        
        position: relative;
        float: right;
}
</style>

Je sais que c'est pas propre de mettre sa feuille de style dans le fichier html ou php de la page en question et qu'il vaut mieu faire un fichier.css mais bon... je le ferai ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<body>
<div id="conteneur">
 
	<div id="1" style="overflow:auto;border:solid 1px black;">
		JEUX
	</div>
	<div id="2" style="overflow:auto; border:solid 1px black;">
		BANNIERE CENTRE
	</div>
	<div id="3" style="border:solid 1px black;">
		EN DESSOUS DE JEUX
	</div>
	<div id="4" style="border:solid 1px black;">
		EN DESSOUS DE BANNIERE
	</div>
</div>
</body>

J'aimerai que ça affiche donc ceci:
http://nsa25.casimages.com/img/2011/...5526335849.jpg

le 5 n'etant pas encore ecrit car pour le moment 1,2,3 et 4 ne fonctionne meme pas!!!

Donc si vous pouviez m'aidez ou m'indiquer des pistes pour trouver quoi et comment faire :)

merci d'avance

je ferais ceci moi :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="haut"> <div class="1" style="position:relative;float:left;"></div> <div class=2 style="position:relative;float:left;"></div> </div> <div id="bas"> <div class="3" style="position:relative;float:left;"></div> <div class=4 style="position:relative;float:left;"></div> </div> <div id="5" style="position:relative;float:rigth;"> </div>
Après j'ai pas testé, mais il faut jouer aves les id et class et surtout les attributs float ;)

Sinon il y a une solution très simple .. les tableaux html dans lesquelles tu mets tes div ...

25/02/2011, 16h38
la_lvlouche

Oki je te remerci beaucoup pour ta réponse rapide :)
Les tableaux j'y avais pensé mais j'aimerai que mon affichage soit adaptable a tout type de resolution d'ecran...
D'ailleur ca aussi c'est un probleme que j'ai en ce moment!

Est ce que si j'enferme le tout dans un tableau la redimension se fera?
25/02/2011, 17h10
Gaetan_

Une table supporte très bien le redimensionnement, tu exprimes les WIDTH avec des %, mais les DIV sont plus propres.
26/02/2011, 10h21
polymorphisme

Bonjour,

pour information, ta question concerne plus la structure d'une page HTML que la structure d'un site, qui est plus générale.

Oui tout a fait ... est il possible de modifier l'intitulé du topic??

Sinon pour revenir sur donc la structure de la page html... je suis en beug la.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 #conteneurheader { height: 31%; /* La bannière fera de la hauteur de la page... */ width: 80%; float:left; } #conteneurdroite { height: 100%; width: 19%; float:left; tex-align: center; } #conteneurgauche { height: 69%; width: 19%; tex-align: center; float: none; }
Code:

1 2 3 4 5 6 7 <div id="conteneurheader" style="border:solid 1px red;"> </div> <div id="conteneurdroite" style="overflow:auto;border:solid 1px black;"> </div> <div id="conteneurgauche" style="border:solid 1px green;"> </div>
J'aurai espérer trouver ceci:
http://imagik.fr/view-rl/374377
Mais je trouve plutot ceci:
http://imagik.fr/view-rl/374376

Désolé je donne une soluce sans regarder ton code, je n'ai pas trop le temps :

Code:

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
                #bloc1{background-color:red;float:left;clear:left;}
                #bloc2{background-color:blue;float:left;}
                #bloc3{background-color:green;float:left;clear:left;}
                #bloc4{background-color:yellow;float:left;}
                #bloc5{background-color:pink;float:right;height:100px;}
 
                .bloc{
                  width:33.3%;
                  height:50px;
                }
                </style>
	</head>
	<body>
		<div id="bloc1" class="bloc"></div>
		<div id="bloc2" class="bloc"></div>
 
		<div id="bloc5" class="bloc"></div>
 
		<div id="bloc3" class="bloc"></div>
		<div id="bloc4" class="bloc"></div>
	</body>
</html>

26/02/2011, 18h52
la_lvlouche

Merci :)
J'essaye d'adapter ;) Je reviendrai a la charge si jamais je n'y arrive pas :)
En tout cas merci d'avance
28/02/2011, 13h38
la_lvlouche

Merci beaucoup ca a marché :) je ne jouai pas avec les Class mais seulement avec les Id...
Merci :)