structure de page HTML

**la_lvlouche** · 25/02/2011, 16h53

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 :

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
 
<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 :

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
 
<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:

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

**bob633** · 25/02/2011, 17h23

je ferais ceci moi :

Code :

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

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 ...

**la_lvlouche** · 25/02/2011, 17h38

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?

**Gaetan_** · 25/02/2011, 18h10

Une table supporte très bien le redimensionnement, tu exprimes les WIDTH avec des %, mais les DIV sont plus propres.

**polymorphisme** · 26/02/2011, 11h21

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.

**la_lvlouche** · 26/02/2011, 14h33

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 :

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
 
#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 :

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

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:

Mais je trouve plutot ceci:

**rivsc** · 26/02/2011, 18h58

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

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
<!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>