Centrer mon site
petitfox
-
Titial69 Messages postés 269 Statut Membre -
Titial69 Messages postés 269 Statut Membre -
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>
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>
A voir également:
- Centrer mon site
- Site de telechargement - Accueil - Outils
- Site x - Guide
- Site pour partager des photos - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site comme coco - Accueil - Réseaux sociaux
10 réponses
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;
}
Tu n'a qu'une photo?
Car il faut que ton contenu soit dans une div, et que tu centre cette div, exemple :
Et dans ton css :
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;
}
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
Mais div .content, il va chercher une class content contenu dans une div, copie le code que je t'ai donné, il marchera
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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>
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>
Tu n'a pas de doctype, et avec IE, sans doctype il passe en mode QUIKS je crois, donc il sera automatique aligné à gauche.
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é
En lève ces position: absolute, fait tout ca avec des margin et des padding, sinon jamais il ne sera centré
C'est normal que le logo se retrouve dessous, puisque tu l'a mis après la photo dans ton html
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>
<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>
