Problème de centrage d'un design
redcow
-
redcow -
redcow -
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 :
<!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="global">
<div class="coin_hg">
<div class="coin_hd">
<div class="bordure_h">
</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>
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.
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 :
<!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="global">
<div class="coin_hg">
<div class="coin_hd">
<div class="bordure_h">
</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>
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.
A voir également:
- Problème de centrage d'un design
- Azura home design avis ✓ - Forum Consommation & Internet
- Virginie organise un rallye avec 30 équipes. elle veut créer un code pour désigner chaque équipe. elle a commencé à la main, mais elle voudrait le faire calculer à l'aide d'une formule. proposez une formule comportant une seule fonction et à recopier vers le bas dans la colonne a du fichier à télécharger. quelle formule sera en a9 ? ✓ - Forum Excel
- Enlever stb refsw design - Forum Ecran
- Stb refsw design c'est quoi - Forum MacOS
- Home design jeux gratuit - Télécharger - Divers Jeux
1 réponse
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>
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>
