Centrer mon site

petitfox -

Bonjour!

j'ai bien entamé mon tout premier site (presque fini) et malgré mes recherches et tentatives je n'arrive pas à le centrer (horizontalement).
il doit me manquer encore quelques connaissances en css et html...
voici le code de ma page d'accueil (toute simple), quelqu'un pourrait il me dire exactement ce que je dois ajouter?

<html>
<head>
<style>
body {
background-image: url(images/imagedefondindex.jpg);
background-repeat: no-repeat;
background-color: #999999;}
div.photoaccueil {
position: absolute;
height: 510px;
width: 764px;
left: 118px;
top: 140px;}
div.logo {
position: absolute;
height: 50px;
width: 234px;
left: 720px;
top: 70px;}
a:link {tex-decoration:none;}
</style>
</head>
<body>
<div class="photoaccueil"><a href="pages/galerieSP/socialetpolitique.html"><img src="images/F090409_09index.jpg" width="764" height="510" border=0></a></div>
<div class="logo"><a href="index.html"><img src="images/logo-FG.png" width="234" height="50" border="0"></a> </div>
</body>
</html>

Configuration: Windows Vista / Firefox 3.5.8

Afficher la suite

10 réponses

Titial69

Non, pas comme ca, je te donne un exemple :

<div id="global">

 <div id="top">
 </div>

 <div id="texte">
 </div>

</div>

#global
{
margin: auto;
}
#logo
{
margin: auto;
}
#texte
{
padding: 5px 5px 5px 5px;
}

Réponse 2 / 10
Titial69
A quoi sert ce code :
```
padding-left: 720px;
margin-top: 70px;
```
Et celui ci :
```
margin-left: 118px;
```
0
1. petitfox
  
  à positionner mes div! tu m'as dit que ce serait mieux en les positionnant avec les margin et padding au lieu d'absolute
  
  0
Réponse 3 / 10
Titial69
C'est normal que le logo se retrouve dessous, puisque tu l'a mis après la photo dans ton html
0
1. petitfox
  
  j'avais zappé, en tout cas le site n'est toujours pas centré...
  
  <html>
  <head>
  <style>
  #content {margin: auto;}
  body {
  background-image: url(images/imagedefondindex.jpg);
  background-repeat: no-repeat;
  background-color: #999999;}
  div.logo {
  height: 50px;
  width: 234px;
  padding-left: 720px;
  margin-top: 70px;}
  div.photoaccueil {
  height: 510px;
  width: 764px;
  margin-left: 118px;}
  a:link {tex-decoration:none;}
  </style>
  </head>
  <body>
  <div id="content">
  <div class="logo"><a href="index.html"><img src="images/logo-FG.png" width="234" height="50" border="0"></a> </div>
  <div class="photoaccueil"><a href="pages/galerieSP/socialetpolitique.html"><img src="images/F090409_09index.jpg" width="764" height="510" border=0></a></div>
  </div>
  </body>
  </html>
  
  0
Réponse 4 / 10
petitfox
ok. je vais essayer en changeant tout ça.
0
Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 10
Titial69
D'un autre coté tu ne fait rien pour aidé, tu met des position absolute, ce qui va placé ton div photoaccueil par rapoort au coin gauche de ton navigateur.

En lève ces position: absolute, fait tout ca avec des margin et des padding, sinon jamais il ne sera centré
0
1. petitfox
  
  j'ai essayé de changer les positionnements mais le logo se retrouve en dessous de la photo, je ne commprend pas trop...
  
  div.logo {
  height: 50px;
  width: 234px;
  padding-left: 720px;
  margin-top: 70px;
  }
  div.photoaccueil {
  height: 510px;
  width: 764px;
  margin-left: 118px;
  padding-top: 140px;
  }
  
  0
Réponse 6 / 10
Titial69
Tu n'a pas de doctype, et avec IE, sans doctype il passe en mode QUIKS je crois, donc il sera automatique aligné à gauche.
0
1. petitfox
  
  je sais qu'avec IE c'est complexe, mais même sous mozilla ça marche pas
  
  0
Réponse 7 / 10
Titial69
post ton code en entier stp, ou bien une url
0
1. petitfox
  
  voilà le code avec les modif que tu m'as indiqué:
  c'est la page la plus simple de mon site, l'accueil avec juste une photo et un lien vers le reste du site
  
  <html>
  
  <head>
  
  <style>
  
  #content {margin: auto;}
  
  body {
  background-image: url(images/imagedefondindex.jpg);
  background-repeat: no-repeat;
  background-color: #999999;
  }
  div.photoaccueil {
  position: absolute;
  height: 510px;
  width: 764px;
  left: 118px;
  top: 140px;
  }
  div.logo {
  position: absolute;
  height: 50px;
  width: 234px;
  left: 720px;
  top: 70px;
  }
  a:link {tex-decoration:none;}
  
  </style>
  
  </head>
  
  <body>
  <div id="content">
  
  <div class="photoaccueil"><a href="pages/galerieSP/socialetpolitique.html"><img src="images/F090409_09index.jpg" width="764" height="510" border=0></a></div>
  <div class="logo"><a href="index.html"><img src="images/logo-FG.png" width="234" height="50" border="0"></a> </div>
  
  </div>
  </body>
  
  </html>
  
  0
Réponse 8 / 10
Titial69
nan tu ne peut pas mettre div .content, c'est soi .content si c'est une class, soit #content si c'est un id.

Mais div .content, il va chercher une class content contenu dans une div, copie le code que je t'ai donné, il marchera
0
1. petitfox
  
  moui c'est ce que j'ai fait après avoir mis ça, mais ça ne marche toujours pas.
  
  0
Réponse 9 / 10
Titial69
Tu n'a qu'une photo?

Car il faut que ton contenu soit dans une div, et que tu centre cette div, exemple :
```
<body>
<div id="content">
blablabla
</div>
</body>
```
Et dans ton css :
```
#content
{
margin: auto;
}
```
0
1. Rikkunter
  
  Ouaip juste pour le container... Autant pour moi.
  
  0
2. petitfox
  
  snif, malheureusement ta proposition ne marche pas...
  faut il faire quelque chose en plus pour qu'il comprenne bien que tout doit être contenu dans div.content?
  
  0
Réponse 10 / 10
Rikkunter
Salut,

Dans ton style de body, il faudrait que tu ajoutes
```
margin:auto;
```
0

Centrer mon site

10 réponses

Discussions similaires

Newsletters