[HTML] Faire comme la plupart des sites !

**nimois3O** · 02/06/2007, 11h07

Bonjour,

J'aimerais savoir comment on fait pour que mon site soit center avec une marge a droite et gauche ? comme ce site

Merci

**Auteur** · 02/06/2007, 11h44

bonjour,

2 solutions

Code html :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.divCentre{
 margin: auto;
 height: 200px;
 width: 200px;
 border: 1px solid #AAAAAA;
}
 
//-->
</style>
 
</head>
 
<body>
<div class="divCentre">
ceci est un test
</div>
 
 
</body>
 
</html>

seul problème, IE ne reconnait pas le style

Code css :

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

1
2
 
margin: auto

Autre solution

Code html :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.divCentre{
 margin-left: 20%;
 margin-right: 20%;
 margin-top: 0px;
 margin-bottom: 0px;
 border: 1px solid #AAAAAA;
 height: 200px;
}
 
//-->
</style>
 
</head>
 
<body>
<div class="divCentre">
ceci est un test
</div>
 
</body>

Tu peux définir les marges en pixel également

**nimois3O** · 02/06/2007, 12h04

Bonjour,

Dans la seconde solution IE et Firefox reconaissent ?

Merci

**Auteur** · 02/06/2007, 15h26

Envoyé par nimois3O

Bonjour,

Dans la seconde solution IE et Firefox reconaissent ?

Merci

teste le code et tu verras bien...

**Candygirl** · 02/06/2007, 15h36

Envoyé par Auteur

seul problème, IE ne reconnait pas le style margin: auto

En mode standard, soit sur IE6 et IE7 avec un doctype complet et correctement renseigné tout en haut de la page, IE interprète correctement le margin:auto.

Après, si le centrage est vraiment voulu pour les versions inférieures d'IE, on peut toujours ajouter un text-align:center sur le body puis rétablir le centrage à left sur le div centré.

**nimois3O** · 03/06/2007, 11h46

J'ai pris la "seconde solution" ça marche bien sur IE...

J'ai juste un autre "probléme" c'est qhe quand je change de couleur pour qye ma couleur des coté soit différente de la couleur du centre... au centre seul un rectangle change de couleur...

Merci de vos réactions

**Auteur** · 03/06/2007, 12h31

tu peux nous montrer ton code (HTML + CSS)

**nimois3O** · 03/06/2007, 14h26

Je suppose que le probléme se situe du fait que je mets les balise au movais endroit...

HTML

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<title>Acceuil</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
</head>
 
<body bgcolor ="#000000" text="#fffff">
<center><img src="titre.png"></center>
 <style type="text/css">
   @import "page.css";
</style>
<div class="divCentre">
 
<br>
 <!--.............DEBUT MENU................-->
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="Robots" content="follow" />
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />
 
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
 <!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
 
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
    @import "menu.css";
</style>
 
</head><body>
 
 
<!-- liste imbriquée de liens qui fera office de menu -->
<ul id="menu">
    <li><a href="page.htm">Accueil</a>
    </li>
 
    <li><a href="filmalaffiche.htm" >A l'affiche</a>
    </li>
 
    <li><a href="touslesfilms.htm" >Tous les films</a>
           <ul>
 
               <li><a href="cochonou.htm">Cochonou</a></li>
                      <ul>
 
 
                     </ul>
 
              <li><a href="pq.htm">PQ</a>
                            </li>
                  </li>
             </ul>
 
    <li><a href="quisommesnous.htm">Qui sommes nous ?</a>
    </li>
 
    <li><a href="contact.htm">Contatct</a>
    </li>
</ul>
 
<script type="text/javascript">
    initMenu();
</script>
 
<!--.............FIN MENU................-->
<br><br><br><br>
 
 <!-- Modifier le style -->
<center><span ID="texte" style="font-size:24pt;font-family:arial;"></span>
</center>
<br>
 
<br>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="page.css" />
<FONT FACE="monospace " SIZE="3" /FONT>
<div class="titre">
Presentation
</div>
<br>
 
<center>Cet espace a été crée pour présenter les films du duo de Poubelle Production.
<br><br><br>
 
<div style="text-align:justify;">
La méthode utilisé pour chaque film consiste à utiliser le même principe que les dessins animés : filmer une scène image par image en déplaçant légèrement des objets entre deux images pour qu’à la projection le spectateur ait l’illusion que ces objets bougent par eux-même. Les décors, les musiques et les voix ont été réalisées artisanalement, les noms des personnes ayant participé aux differents films sont cités dans les génériques.
</div>
</div>
</center>
</body>
</html>

CSS page

Code CSS :

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
/* ------------------------------------ *
 CSS
 mardi 3 avril 2007 17:42:09
 HAPedit 3.1.11.111
 * ------------------------------------ */
 
p
{
color : red;
}
 
.divCentre{
 margin-left: 10%;
 margin-right: 10%;
 margin-top: 0px;
 margin-bottom: 0px;
 border: 0px solid #AAAAAA;
 height: 200px;
 background-color:green;
 }
 
 .titre
 {
    color: #ffffff;
    font-family: ReSiple;
    font-size: 50px;
   background-color: #00ffcc;
    text-align: center;
 
 }

CSS menu

Code CSS :

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
79
80
81
82
83
84
85
86
/* CSS du menu horizontal, bieler batiste */
 
.menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:1000px;
    height:120px;
    margin-left: -2px;
    margin-top: 20px;
    }
 
.menu ul{
    position:absolute;
    display:block;
    width:124px;
    margin:0;
    padding:0;
    }
 
.menu li ul{
    visibility:hidden;
    }
 
.menu li li ul{
    position:absolute;
    margin-left:183px;
    margin-top:-23px;
    }
 
.menu li{
    list-style:none;
    width:157px;/*espacement entre les intitulés*/
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
 
.menu li li{
    display:block;
    float:none;
    color: #FF0000;
    height:25px;
    }
 
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }
 
/* possition initaile*/
 
.menu a{
    text-align:center; /*alignement du text*/
    background-color: #FFFFFF; /*couleur du fond*/
    border:5px #404040 solid; /* bordure (taille, couleur, etat */
    color:#000000; /*couleur du text*/
    display:block;  /*type d'element*/
    width:150px;  /*longeur (190)*/
    text-decoration:none; /* decoration du text*/
    padding:2px 0; /*marge interieure*/
    margin:1px;  /*marge exterieur*/
    }
 
/*passage de la sourie*/
 
.menu a:hover{
    background-color: #969696;/*couleur du fond*/
    border:5px #404040 solid;/* bordure (taille, couleur, etat */
    color: #FFFFFF; /*couleur du text*/
    cursor : crosshair; /*type de curseur*/
    }
 
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}
 
a.linkOver{
    background-color: #eee;
    }

Un petit screen pour imager ma demande

Une partie de la page web est en orange alors que je voudrais la totaliter de la page de cette couleur sauf les bord droit et gauche...

Merci

PS: Sur le message précédent il y a mon code...

**Auteur** · 03/06/2007, 19h40

Envoyé par nimois3O

Je suppose que le probléme se situe du fait que je mets les balise au movais endroit...

en effet, ton code HTML est euh.... assez étrange. Essaye d'obtenir cette structure :

Code html :

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
 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="Author" content="" />
<meta name="Copyright" content="Copyright (c) " />
 
<style type="text/css">
<!--
 
 
//-->
</style>
 
<script type="text/javascript">
<!--
 
 
//-->
</script>
 
 
</head>
 
<body>
 
 
 
</body>
 
</html>

J'ai vu deux balises <body>, des balises meta dans le body et non dans le head, des div dans le head, etc... Tes feuilles de style et ton code JS sont répartis un peu n'importe où dans ta page

Essaye de mettre un peu d'ordre dans tout ça

**nimois3O** · 03/06/2007, 19h47

Déja merci mais je n'est jamais entendu parler des balises <meta> (oui, je débute plus ou moins...) je vais essayé de faire de recherches...

**Auteur** · 03/06/2007, 19h51

Code html :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
body{
background-color: #000000;
}
 
.divCentre{
 margin-left: 40px;
 margin-right: 40px;
 margin-top: 0px;
 margin-bottom: 0px;
 border: 1px solid #AAAAAA;
 height: 100%;
 background-color: "orange";
}
 
h2{
 text-align: center;
 color: #555555;
}
//-->
</style>
 
</head>
 
<body>
 
<div class="divCentre">
<h2>Poubelle production</h2>
le contenu de la page ici</div>
 
</body>

Envoyé par nimois3O

Déja merci mais je n'est jamais entendu parler des balises <meta> (oui, je débute plus ou moins...) je vais essayé de faire de recherches...

je regarderai ton code plus attentivement un peu plus tard et j'essaierai d'y mettre un peu d'ordre

**nimois3O** · 03/06/2007, 19h58

Merci je vais essayé ça, je suis entrain de voir la fonction META autant dire une fonction super important que je ne connaissait absolument pas...

Cepandent je n'est pas compris META copyright peut-tu m'espliquer ?

Merci pour le code je vais mettre un peut dordre sur ma page ( d'ailleur ma mére aimerais aussi que j'en mette sur mon bureau...sifle...)

**Auteur** · 03/06/2007, 20h08

Envoyé par nimois3O

Cepandent je n'est pas compris META copyright peut-tu m'espliquer ?

d'après toi le copyright c'est quoi ???

C'est une balise sur les droit d'auteur, tout simplement. Renseigne toi là-dessus car je n'ai plus la signification exacte de cette balise. (Je crois que Cyberzoide a fait un tuto sur les balies meta).

Sache également que toutes les balises ne sont pas obligatoires. Elles donnent des infos sur le contenu de la page et sur la manière de gérer le contenu.

**nimois3O** · 03/06/2007, 20h30

Une balise comme META description par exemple doit figurer sur toutes les page ou sur la page principale du site ?

**Auteur** · 03/06/2007, 23h43

Envoyé par nimois3O

Une balise comme META description par exemple doit figurer sur toutes les page ou sur la page principale du site ?

sur toutes les pages, c'est mieux. De plus, logiquement, les pages de ton site n'ont pas le même contenu donc la description est différente d'une page à l'autre (même si ton site à un thème unique).

Tu peux même en rajouter avec la meta balise keywords. Un conseil si tu utilises cette balise : ce n'est pas utile (voire déconseillé) de répéter 50 fois le même mot dans l'espoir d'être mieux référencé

Ensuite tu peux demander aux moteurs de recherche comment référencer ces pages (cf. le paragraphe "Orienter les robots" du cours de Cyberzoide sur les meta balises)

**nimois3O** · 04/06/2007, 20h11

Voila j'ai arrangé mon code malheuresement sa ne marche toujours pas...

Code html :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<title>Acceuil</title>
 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
 
 
<!-- Menu -->
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Robots" content="follow" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
 
<!----------------->
 
<style type="text/css">
   @import "page.css";
</style>
 
<style type="text/css">
    @import "menu.css";
</style>
 
</head>
 
<body bgcolor ="#000000" text="#fffff">
 
 
<div class="divCentre">
<center><a href = "page.htm"><img src="titre.png" border="0"></center>
<br>
 
<!--.............DEBUT MENU................-->
 
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
 
 
<!-- liste imbriquée de liens qui fera office de menu -->
<ul id="menu">
    <li><a href="page.htm">Accueil</a>
    </li>
 
    <li><a href="filmalaffiche.htm" >A l'affiche</a>
    </li>
 
    <li><a href="touslesfilms.htm" >Tous les films</a>
           <ul>
 
               <li><a href="cochonou.htm">Cochonou</a></li>
                      <ul>
 
 
                     </ul>
 
              <li><a href="pq.htm">PQ</a>
                            </li>
                  </li>
             </ul>
 
    <li><a href="quisommesnous.htm">Qui sommes nous ?</a>
    </li>
 
    <li><a href="contact.htm">Contatct</a>
    </li>
</ul>
 
<script type="text/javascript">
    initMenu();
</script>
 
<!--.............FIN MENU................-->
<br><br><br><br>
 
<!-- Modifier le style -->
 
<br>
<br>
 
 
<div class="titre">
Presentation
</div>
 
<br><br>
 
<div class ="text">
<br>
<center>Cet espace a été crée pour présenter les films du duo de Poubelle Production.
<br><br><br>
La méthode utilisé pour chaque film consiste à utiliser le même principe que les dessins animés : filmer une scène image par image en déplaçant légèrement des objets entre deux images pour qu’à la projection le spectateur ait l’illusion que ces objets bougent par eux-même. Les décors, les musiques et les voix ont été réalisées artisanalement, les noms des personnes ayant participé aux differents films sont cités dans les génériques.
<br><br><br><br>
</div>
 
<hr>
 
<div class ="reserver">
2005-2007 - POUBELLE PRODUCTION All Rights Reserved _ Tous droits réservés.
</div>
 
</div>
</body>
</html>

Code CSS menu :

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
79
80
81
82
83
84
85
86
/* CSS du menu horizontal, bieler batiste */
 
.menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:1000px;
    height:120px;
    margin-left: -2px;
    margin-top: 20px;
    }
 
.menu ul{
    position:absolute;
    display:block;
    width:124px;
    margin:0;
    padding:0;
    }
 
.menu li ul{
    visibility:hidden;
    }
 
.menu li li ul{
    position:absolute;
    margin-left:183px;
    margin-top:-23px;
    }
 
.menu li{
    list-style:none;
    width:157px;/*espacement entre les intitulés*/
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
 
.menu li li{
    display:block;
    float:none;
    color: #FF0000;
    height:25px;
    }
 
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }
 
/* possition initaile*/
 
.menu a{
    text-align:center; /*alignement du text*/
    background-color: #FFFFFF; /*couleur du fond*/
    border:5px #404040 solid; /* bordure (taille, couleur, etat */
    color:#000000; /*couleur du text*/
    display:block;  /*type d'element*/
    width:150px;  /*longeur (190)*/
    text-decoration:none; /* decoration du text*/
    padding:2px 0; /*marge interieure*/
    margin:1px;  /*marge exterieur*/
    }
 
/*passage de la sourie*/
 
.menu a:hover{
    background-color: #969696;/*couleur du fond*/
    border:5px #404040 solid;/* bordure (taille, couleur, etat */
    color: #FFFFFF; /*couleur du text*/
    cursor : crosshair; /*type de curseur*/
    }
 
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}
 
a.linkOver{
    background-color: #eee;
    }

Code CSS 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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 
 
 
.divCentre{
 margin-left: 10%;
 margin-right: 10%;
 margin-top: 0px;
 margin-bottom: 0px;
 border: 0px solid #AAAAAA;
 height: 500px;
 background-color : #FFA411;
 }
 
 .titre
 {
    color: #ffffff;
    font-family: ReSiple;
    font-size: 50px;
    text-align: center;
    background-color: gray;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
 
 }
 
 .text
 {
   vertical-align: middle;
    font-family: Arial;
    text-align: justify;
 }
 
 .reserver
 {
 text-align : center;
 font-size: 10px;
 font-family: 'Times New Roman';
 }

Pouvez-vous m'aidez ??? svp...

**Auteur** · 04/06/2007, 21h58

désolé je ne me suis pas encore occupé de ton code

Néanmoins une remarque :

Code html :

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

1
2
3
4
5
6
7
8
 
<style type="text/css">
   @import "page.css";
</style>
 
<style type="text/css">
    @import "menu.css";
</style>

pour insérer des feuilles de styles externes :

Code html :

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

1
2
3
 
<link rel="stylesheet" type="text/css" href="page.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />

**Candygirl** · 04/06/2007, 22h21

Code html :

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

1
2
3
4
5
6
7
8
 
<style type="text/css">
   @import "page.css";
</style>
 
<style type="text/css">
    @import "menu.css";
</style>

Cette notation est correcte et permet de masquer les styles aux anciens navigateurs (genre netscape4.x ou IE4) de manière à ce que le site soit consultable sans style plutôt qu'inconsultable à cause de styles mal/pas interprétés.

**Auteur** · 04/06/2007, 23h09

Envoyé par Candygirl

Cette notation est correcte et permet de masquer les styles aux anciens navigateurs (genre netscape4.x ou IE4) de manière à ce que le site soit consultable sans style plutôt qu'inconsultable à cause de styles mal/pas interprétés.

c'est bon à savoir

Je n'ai jamais utilisé cette syntaxe

**nimois3O** · 05/06/2007, 09h20

Envoyé par Candygirl

Cette notation est correcte et permet de masquer les styles aux anciens navigateurs (genre netscape4.x ou IE4) de manière à ce que le site soit consultable sans style plutôt qu'inconsultable à cause de styles mal/pas interprétés.

Ouuuuuué j'ai raison 1ére foi depuis que je suis sur le forum !!!

[HTML] Faire comme la plupart des sites !

HTML

Discussions similaires

Partager

Partager