[HTML] Faire comme la plupart des sites !

Version imprimable

02/06/2007, 11h07
nimois3O

[HTML] Faire comme la plupart des sites !

Bonjour,

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

Merci

bonjour,

2 solutions

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

1
2
 
margin: auto

Autre solution

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
 
<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 ;)

02/06/2007, 12h04
nimois3O

Bonjour,

Dans la seconde solution IE et Firefox reconaissent ?

Merci
02/06/2007, 15h26
Auteur

Citation:

Envoyé par nimois3O

Bonjour,

Dans la seconde solution IE et Firefox reconaissent ?

Merci

teste le code et tu verras bien... :mrgreen:
02/06/2007, 15h36
Candygirl

Citation:

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é.
03/06/2007, 11h46
nimois3O

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
03/06/2007, 12h31
Auteur

tu peux nous montrer ton code (HTML + CSS) ;)

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

HTML

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

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:

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

Citation:

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:

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

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

03/06/2007, 19h47
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...

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 <html> <head> <title></title> <style type="text/css">  </style> </head> <body> <div class="divCentre"> <h2>Poubelle production</h2> le contenu de la page ici</div> </body>
Citation:

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 ;)

03/06/2007, 19h58
nimois3O

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...:boulet: 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...)
03/06/2007, 20h08
Auteur

Citation:

Envoyé par nimois3O

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

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

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.
03/06/2007, 20h30
nimois3O

Une balise comme META description par exemple doit figurer sur toutes les page ou sur la page principale du site ?
03/06/2007, 23h43
Auteur

Citation:

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)

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

Code html :

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

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:

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

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

Néanmoins une remarque :
Code:

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:

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

04/06/2007, 22h21
Candygirl
Code:

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.
04/06/2007, 23h09
Auteur

Citation:

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 :oops:
05/06/2007, 09h20
nimois3O

Citation:

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 !!! :yaisse2: :lol:

Centrage :

Code:

1
2
3
4
5
6
7
8
9
10
 
#conteneur {
  text-align: center;
}
#centre {
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  text-align: left;
}

Code:

1
2
3
4
5
6
7
8
 
<div id="conteneur">
<div id="centre">
CONTENU
...
...
</div>
</div>

05/06/2007, 16h10
nimois3O

Ok, merci j'éssaye sa ce soir je te tien au courant...

Non, ça n'arrange rien...j'ai toujours ce probléme de centrage et de couleur parciel de la page...

Si quelqu'un pouvais m'aider SVP !!! :king:
11/06/2007, 21h39
b Oo

Salut,
c'est le noir en dessous du centre orange qui ne te va pas ?

Si c'est ça, essaye de mettre height à 100% dans centre, si ça ne marche toujours pas regarde du coté des marges de body.
11/06/2007, 23h39
Clorish

les puristes vont hurler ... mais moi je fait un tableau en align=center ;)
Et toc ... ca passe tout seul et c'est W3C :p
12/06/2007, 15h08
nimois3O

Citation:

Envoyé par b Oo

Salut,
c'est le noir en dessous du centre orange qui ne te va pas ?

Si c'est ça, essaye de mettre height à 100% dans centre, si ça ne marche toujours pas regarde du coté des marges de body.

Non j'aimerais avoir du noir sur les 2 bande de chaque cote de l'ecrant et le centre de la page en orange...;)
17/06/2007, 12h01
b Oo

Salut,
le site que tu évoques ne correspond pas à ce que tu veux : page contact. Nous sommes d'accord, non ?

Tu voudrais que cela prenne toute la page, la chose la plus simple est de mettre :
min-height: 800 px;
voir plus.

J'ai trouvé un site qui à un tutoriel qui correspond presque à ce que tu veux, sauf qu'il y a un problème car le pied de page est bien en bas, mais il reste du blanc entre le milieu et le pied de page. Cela est dû au fait que le pied de page est placé en absolute.

Je pourrais te donner le lien, je ne l'ai pas sous la main.
17/06/2007, 16h17
nimois3O

Merci beaucoup b Oo !!!

Le min-height à la place du height arrange tout...

Merci pour le lien j'y jetterais un coups d'oeil quand j'aurais le temps...mais si tu veux là je passe demain mon oral sur mon site :? et il me manque encore pas mal de trucs a faire...et pas que du "desgin"... il me reste tout ce qui est dinamic (livre d'or, commentaire, note...)

Encore merci...;)