structure de page HTML [Résolu]

la_lvlouche · 25/02/2011, 15h53

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, 16h23

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, 16h38

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, 17h10

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

polymorphisme · 26/02/2011, 10h21

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, 13h33

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, 17h58

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>

la_lvlouche · 26/02/2011, 18h52

Merci

J'essaye d'adapter

Je reviendrai a la charge si jamais je n'y arrive pas

En tout cas merci d'avance

la_lvlouche · 28/02/2011, 13h38

Merci beaucoup ca a marché

je ne jouai pas avec les Class mais seulement avec les Id...
Merci

26/02/2011, 10h21	#5
polymorphisme Modérateur Grégory Roche GED (Gestion Electronique de Documentation) Inscription : octobre 2009 Messages : 1 067 Détails du profil Informations personnelles : Nom : Grégory Roche Âge : 38 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : GED (Gestion Electronique de Documentation) Informations forums : Inscription : octobre 2009 Messages : 1 067 Points : 1 445 Points : 1 445	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. __________________ polymorphisme.com Article : Installation de Cocoon Je ne réponds pas aux MP à caractère technique.
	00

25/02/2011, 16h38	#3
la_lvlouche Invité de passage Inscription : février 2008 Messages : 32 Détails du profil Informations forums : Inscription : février 2008 Messages : 32 Points : 1 Points : 1	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?
	00

25/02/2011, 17h10	#4
Gaetan_ Membre éprouvé Gaetan Webmaster Inscription : janvier 2007 Messages : 386 Détails du profil Informations personnelles : Nom : Gaetan Âge : 40 Localisation : France Informations professionnelles : Activité : Webmaster Secteur : Biens de consommation Informations forums : Inscription : janvier 2007 Messages : 386 Points : 441 Points : 441	Une table supporte très bien le redimensionnement, tu exprimes les WIDTH avec des %, mais les DIV sont plus propres.
	00

26/02/2011, 18h52	#8
la_lvlouche Invité de passage Inscription : février 2008 Messages : 32 Détails du profil Informations forums : Inscription : février 2008 Messages : 32 Points : 1 Points : 1	Merci J'essaye d'adapter Je reviendrai a la charge si jamais je n'y arrive pas En tout cas merci d'avance
	00

28/02/2011, 13h38	#9
la_lvlouche Invité de passage Inscription : février 2008 Messages : 32 Détails du profil Informations forums : Inscription : février 2008 Messages : 32 Points : 1 Points : 1	Merci beaucoup ca a marché je ne jouai pas avec les Class mais seulement avec les Id... Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email