Centrer mon site

petitfox -
Titial69 Messages postés 269 Statut Membre - 11 mars 2010 à 18:20

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

A voir également:

Centrer mon site
Wannonce nouveau site - Guide
Site de telechargement - Accueil - Outils
Wannonce site fermé - Guide
Site x - Guide
Site inaccessible - Guide

10 réponses

Titial69 Messages postés 269 Statut Membre 20

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
Rikkunter Messages postés 7856 Date d'inscription Statut Membre Dernière intervention 181
Salut,

Dans ton style de body, il faudrait que tu ajoutes
```
margin:auto;
```
0
Réponse 3 / 10
Titial69 Messages postés 269 Statut Membre 20
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 Messages postés 7856 Date d'inscription Statut Membre Dernière intervention 181
  
  Ouaip juste pour le container... Autant pour moi.
  
  0
2. petitfox Messages postés 8 Statut Membre
  
  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 4 / 10
Titial69 Messages postés 269 Statut Membre 20

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 Messages postés 8 Statut Membre
  
  moui c'est ce que j'ai fait après avoir mis ça, mais ça ne marche toujours pas.
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 10
Titial69 Messages postés 269 Statut Membre 20

post ton code en entier stp, ou bien une url
0
1. petitfox Messages postés 8 Statut Membre
  
  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 6 / 10
Titial69 Messages postés 269 Statut Membre 20

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 Messages postés 8 Statut Membre
  
  je sais qu'avec IE c'est complexe, mais même sous mozilla ça marche pas
  
  0
Réponse 7 / 10
Titial69 Messages postés 269 Statut Membre 20

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 Messages postés 8 Statut Membre
  
  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 8 / 10
petitfox Messages postés 8 Statut Membre

ok. je vais essayer en changeant tout ça.
0
Réponse 9 / 10
Titial69 Messages postés 269 Statut Membre 20

C'est normal que le logo se retrouve dessous, puisque tu l'a mis après la photo dans ton html
0
1. petitfox Messages postés 8 Statut Membre
  
  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 10 / 10
Titial69 Messages postés 269 Statut Membre 20
A quoi sert ce code :
```
padding-left: 720px;
margin-top: 70px;
```
Et celui ci :
```
margin-left: 118px;
```
0
1. petitfox Messages postés 8 Statut Membre
  
  à positionner mes div! tu m'as dit que ce serait mieux en les positionnant avec les margin et padding au lieu d'absolute
  
  0

Centrer mon site

10 réponses

Discussions similaires

Newsletters