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

**blueice** · 05/06/2007, 14h13

Centrage :

Code css :

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

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

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

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

**nimois3O** · 05/06/2007, 16h10

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

**b Oo** · 11/06/2007, 21h39

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.

**Clorish** · 11/06/2007, 23h39

les puristes vont hurler ... mais moi je fait un tableau en align=center

Et toc ... ca passe tout seul et c'est W3C :p

**nimois3O** · 12/06/2007, 15h08

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

**b Oo** · 17/06/2007, 12h01

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.

[HTML] Faire comme la plupart des sites !

HTML

Vue hybride

Discussions similaires

Partager

Partager