Centrer un site internet

mcog2 · 27/02/2011, 21h07

Bonjour à tous,

J'aimerai centrer mon site au milieu de la page.
J'ai appliqué ceci dans mon css, mais les calques sont décallés :

Citation:

body{width:1000px;margin:auto}

J'utilise dreamweaver...
Merci d'avance,
@+
Olivier

ornitho13 · 27/02/2011, 22h28

Salut,

peut être peux tu montrer un exemple (une image du problème, un lien ou le code HTML)?

mcog2 · 27/02/2011, 23h03

Citation:

Envoyé par ornitho13

Salut,

peut être peux tu montrer un exemple (une image du problème, un lien ou le code HTML)?

Merci, car franchement je suis un peu pommé,
http://www.spaceodg.com/photo/test/
et le css

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
@charset "utf-8";
.wrapper{
   width:1000px;
   margin:0px auto;
}
 
body,td,th {
	color: #CCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
body {
	background-color: #000000;
	font-size: small;
}
a:link {
	color: #EAEAEA;
	text-decoration: none;
}
a:hover {
	color: #CCC;
	text-decoration: none;
}
a:visited {
	color: #999;
	text-decoration: none;
}
a:active {
	text-decoration: none;
	color: #CCC;
}
 
td {
	font-family: Arial, Helvetica, sans-serif;
}
.ecriture_standard {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	line-height: normal;
	color: #767676;
}
.ecriture_standard_gras {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	line-height: normal;
	color: #CCC;
	font-weight: bold;
}
.ecriture_petite {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-style: normal;
	line-height: normal;
	color: #CCC;
}
.ecriture_standard_plus {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	color: #CCC;
}
.titre_gras {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #CCC;
}
 
th {
	font-family: Arial, Helvetica, sans-serif;
}

@+
Olivier

ornitho13 · 28/02/2011, 09h19

Bonjour,

tout d'abord, le site est construit à partir de frameset et ce n'est pas du tout une bonne idée, car au niveau du référencement par les moteurs de recherche c'est un frein énorme. Il faudrait revoir la structure de ton site.

Ton problème est a priori au niveau de ton menu qui ne se centre pas ?
Si c'est le cas, met en place cette instruction CSS :

Code :

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

1
2
3
4
5
6
7
8
9
 
ul.MenuBarHorizontal {
    margin: 0px auto;/* pour centrer */
    width: 950px;/*il faut spécifier une largeur pour pouvoir centrer*/
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
}

Ensuite pour centrer ton contenu, il faut ajouter des propriétés CSS au body dans le fichiers mes_styles.css :

Code css :

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

1
2
3
4
5
6
7
 
body {
    background-color: black;
    font-size: small;
    width: 950px;/*il faut spécifier une largeur pour pouvoir centrer*/
    margin: 0px auto;/* pour centrer */
}

mcog2 · 28/02/2011, 11h17

Citation:

Envoyé par ornitho13

Bonjour,
tout d'abord, le site est construit à partir de frameset et ce n'est pas du tout une bonne idée, car au niveau du référencement par les moteurs de recherche c'est un frein énorme. Il faudrait revoir la structure de ton site.

Bonjour et un grand merci pour commencer,
Que me conseilles tu comme structure ? je suis prêt à tout revoir...
merci,
@+
Olivier

ornitho13 · 28/02/2011, 11h31

uns structure simple en html, exemple :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
	<head>
		<title>ton titre</title>
		<link rel="stylesheet" media="screen" href="http://www.spaceodg.com/photo/test/SpryAssets/SpryMenuBarHorizontal.css"/>
		<style type="text/css">
			body, html{
				font-family: Arial, Helvetica, sans-serif;
				font-size:14px;
				color:#ccc;
				padding:0;
				margin:0;
				height:100%;
				background-color:#000;
			}
			.wrapper{
				width:1024px;
				margin:0px auto;
			}
			.header{
				height:139px;
			}
			.nav{
				backgroound-color:#eee;
				display:block;
			}
			.mainContent{
				clear:left;
			}
			.footer{
 
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="header">
				<img src="http://www.spaceodg.com/photo/test/stock/panneau_bandeau.jpg" width="1024" height="139">
			</div>
			<div class="nav">
				<!-- ton menu -->
				<ul id="MenuBar1" class="MenuBarHorizontal">
				  <li><a href="slideshow/fs_aux.html">Accueil</a>  </li>
				  <li><a href="presentation.html">Présentation</a></li>
				  <li><a href="actualites.html">Actualités</a>  </li>
				  <li><a href="pro.html" >Travaux</a></li>
				  <li><a href="concours.html">Concours</a></li>
				  <li><a href="#" class="MenuBarItemSubmenu">Photos Vidéos</a>
				    <ul>
				      <li><a href="galeries.html">Photos</a></li>
				      <li><a href="diaporama.html">Diaporamas</a></li>
				      <li><a href="video.html">Vidéos</a></li>
				    </ul>
				  </li>
				  <li><a href="tutoriaux.html">Tutoriaux</a></li>
				  <li><a href="liens.html" >Liens</a></li>
				  <li><a href="form/index.php" >Contact</a></li>
				</ul>
			</div>
			<div class="mainContent">
				<!-- ton contenu -->
				Lorem ipsum 
			</div>
			<div class="footer">
				<!-- ton footer (copyright) -->
			</div>
		</div>
	</body>
</html>

Il faudra bien sur mettre à jour en fonction de tes besoins. Il faut également appliquer ce type de gabarit à toutes tes pages.

mcog2 · 28/02/2011, 11h43

Merci Ornitho13 (au fait je suis un fou d'ornitho voir mon site actuel http://www.spaceodg.com)

Si j'ai bien compris, je met le code que tu as donné dans un fichier index et comme cela je regarde ce qui se passe.
Encore un grand merci,
@+
Olivier

ornitho13 · 28/02/2011, 11h44

oui c'est cela par contre dans la <div class="mainContent"> il faudra tout de même mettre du contenu.

mcog2 · 28/02/2011, 13h27

J'ai appliqué ton code,
2-3 petites questions, pour cela je montre avec une vidéo :
http://www.spaceodg.com/forum/html.zip
Merci,
@+
Olivier

27/02/2011, 22h28	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, peut être peux tu montrer un exemple (une image du problème, un lien ou le code HTML)?
	00

28/02/2011, 11h43	#7
mcog2 Invité régulier Inscription : avril 2010 Messages : 45 Détails du profil Informations forums : Inscription : avril 2010 Messages : 45 Points : 8 Points : 8	Merci Ornitho13 (au fait je suis un fou d'ornitho voir mon site actuel http://www.spaceodg.com) Si j'ai bien compris, je met le code que tu as donné dans un fichier index et comme cela je regarde ce qui se passe. Encore un grand merci, @+ Olivier
	00

28/02/2011, 11h44	#8
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	oui c'est cela par contre dans la <div class="mainContent"> il faudra tout de même mettre du contenu.
	00

28/02/2011, 13h27	#9
mcog2 Invité régulier Inscription : avril 2010 Messages : 45 Détails du profil Informations forums : Inscription : avril 2010 Messages : 45 Points : 8 Points : 8	J'ai appliqué ton code, 2-3 petites questions, pour cela je montre avec une vidéo : http://www.spaceodg.com/forum/html.zip Merci, @+ Olivier
	00

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