Problème de centrage d'un design Fermé

Question

Bonjour à tous. J'ai suivi ce tutoriel sur le site du zero : https://openclassrooms.com/fr/courses afin de réaliser des bordures sympa pour mon site, seulement, lorsque j'ai voulu centrer mon design, je me suis rendue compte que le bord de droite n'en fait qu'à sa tête. Après vérification des erreurs (je ne pense pas qu'il y en ai ?) et d'innonbrables tentatives pour remettre ce bord en place, je m'en remet a Comment ça Marche. En gros : A l'aide ! ;-) L'adresse de mon site : http://voidofstars.exen.fr Le code html : Void of Stars

Le code CSS : html, body { margin: 5px; width: 900px; background-color: #ffffff; } #global { margin-left: auto; margin-right: auto; width: 700px; } div.coin_hg { background: url('images/fond/hg.jpg') left top no-repeat; width: 100px; height: 50px; padding-left: 50px; } div.coin_hd { background: url('images/fond/hd.jpg') right top no-repeat; width: 100px; height: 50px; padding-right: 750px; } div.bordure_h { background: url('images/fond/haut.jpg') top repeat-x; height: 100px; width: 800px; } div.cote_gauche { background: url("images/fond/gauche.jpg") left repeat-y; padding-left: 40px; } div.cote_droit { background: url("images/fond/droite.jpg") right repeat-y; padding-right: 50px; } div.coin_bg { background: url('images/fond/bg.jpg') left top no-repeat; width: 100px; height: 50px; padding-left: 50px; } div.coin_bd { background: url('images/fond/bd.jpg') right top no-repeat; width: 100px; height: 50px; padding-right: 750px; } div.bordure_b { background: url('images/fond/bas.jpg') top repeat-x; height: 100px; width: 800px; } div.center { background-color: #000000; overflow: hidden; min-height: 600px; } Merci à tous ceux qui auront la patience de me répondre.

redcow · Answer

J'ai finalement obtenu de l'aide sur un autre forum (je me sentais quelque peu... délaissée ici.)
Afin que mon code serve à tout le monde, je poste mon css et mon html, si ça déplait à un moderateur, il peut bien sur moderer mes messages ! ;-)

Code css :

html, body {
margin: 5px;
background-color: #ffffff;
}

#all
{
width: 900px;
margin-left: auto;
margin-right: auto;
}

div.coin_hg
{
background: url('images/fond/hg.jpg') left top no-repeat;
width: 100px;
height: 50px;
padding-left: 50px;
}

div.coin_hd
{
background: url('images/fond/hd.jpg') right top no-repeat;
width: 100px;
height: 50px;
padding-right: 750px;
}

div.bordure_h
{
background: url('images/fond/haut.jpg') top repeat-x;
height: 100px;
width: 800px;
}

div.cote_gauche
{
background: url("images/fond/gauche.jpg") left repeat-y;
padding-left: 40px;
}

div.cote_droit
{
background: url("images/fond/droite.jpg") right repeat-y;
padding-right: 50px;
margin-right: 0%;
}

div.coin_bg
{
background: url("images/fond/bg.jpg") left top no-repeat;
width: 100px;
height: 50px;
padding-left: 50px;
}

div.coin_bd
{
background: url("images/fond/bd.jpg") right top no-repeat;
width: 100px;
height: 50px;
padding-right: 750px;
}

div.bordure_b
{
background: url("images/fond/bas.jpg") top repeat-x;
height: 100px;
width: 800px;
}

div.center
{
background-color: #000000;
overflow: hidden;
}

html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
<head>
<title>Void of Stars</title>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
</head>
<body>
<div id="all">
<div class="coin_hg">
<div class="bordure_h">
<div class="coin_hd">
</div>
</div>
</div>
<div class="cote_gauche">
<div class="cote_droit">
<div class="center">
<img src="images/banniere.jpg" />
</div>
</div>
</div>
<div class="coin_bg">
<div class="coin_bd">
<div class="bordure_b">
</div>
</div>
</div>
</div>
</body>
</html>

Problème de centrage d'un design

1 réponse

Discussions similaires