Recentrer le contenu du site
Résolu
Nono
-
Auloni Messages postés 22 Date d'inscription Statut Membre Dernière intervention -
Auloni Messages postés 22 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis actuellement en train de créer un site en me servant de mes quelques bases en HTML et en CSS mais voila que je bloque.
Le site se compose de 4 élèments : une bannière en header, un menu juste en dessus, le contenu et un pied de page.
Lorsque ma page est affichée en grand, il n'y a aucun problème,
or si je retrecis ma page, le contenu de mon site s'adapte (puisque je l'ai reglé en %) MAIS il ne se centre pas...
Ne vous inquitez pas, j'ai fait 2 captures pour que vous cerniez bien mon problème
Donc sur cette première image, le site "normal" en fenêtre large.
http://img24.imageshack.us/img24/9941/capture01oag.jpg
Sur cette seconde capture, ma fenêtre plus petite.
http://img33.imageshack.us/img33/2875/capture02eur.jpg
Vous voyez l'espace vers le ? et les flèches ? et ben c'est ça que j'aimerais enlever ! Car du coup, ça deforme tout ma mise en page @_@
j'espère avoir été clair, et n'hésitez pas à me demander plus de précision si vous n'avez pas compris mon problème :D
Merci beaucoup de votre aide futur !!
Nolwenn
Je suis actuellement en train de créer un site en me servant de mes quelques bases en HTML et en CSS mais voila que je bloque.
Le site se compose de 4 élèments : une bannière en header, un menu juste en dessus, le contenu et un pied de page.
Lorsque ma page est affichée en grand, il n'y a aucun problème,
or si je retrecis ma page, le contenu de mon site s'adapte (puisque je l'ai reglé en %) MAIS il ne se centre pas...
Ne vous inquitez pas, j'ai fait 2 captures pour que vous cerniez bien mon problème
Donc sur cette première image, le site "normal" en fenêtre large.
http://img24.imageshack.us/img24/9941/capture01oag.jpg
Sur cette seconde capture, ma fenêtre plus petite.
http://img33.imageshack.us/img33/2875/capture02eur.jpg
Vous voyez l'espace vers le ? et les flèches ? et ben c'est ça que j'aimerais enlever ! Car du coup, ça deforme tout ma mise en page @_@
j'espère avoir été clair, et n'hésitez pas à me demander plus de précision si vous n'avez pas compris mon problème :D
Merci beaucoup de votre aide futur !!
Nolwenn
A voir également:
- Recentrer le contenu du site
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
16 réponses
Ah oui ^.^
voici toute la partie "Body"
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
color: #000000;
background-image: url(fond.jpg);
background-repeat : no-repeat;
}
.twoColHybLtHdr #container {
width: 60%;
background: #7c7162;
margin: 0 auto;
border: 1px solid #000000;
}
.twoColHybLtHdr #header {
background: #000000;
}
.twoColHybLtHdr #header h1 {
margin: 0;
padding: 10px 0;
color: #900;
text-align: center;
}
.twoColHybLtHdr #sidebar1 {
float: top ;
width: 100%;
padding: 4px 0; /
background-color: #000;
}
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
color: #900;
font-size: small;
text-align: center;
}
.twoColHybLtHdr #mainContent {
margin: 0 20px 0 13em;
}
.twoColHybLtHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.twoColHybLtHdr #footer p {
margin: 0;
padding: 10px 0;
font-size: 70%;
text-align: center;
}
/* Diverses classes à réutiliser */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColHybLtHdr #container #sidebar1 p {
color: #666;
}
-->
</style>
voici toute la partie "Body"
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
color: #000000;
background-image: url(fond.jpg);
background-repeat : no-repeat;
}
.twoColHybLtHdr #container {
width: 60%;
background: #7c7162;
margin: 0 auto;
border: 1px solid #000000;
}
.twoColHybLtHdr #header {
background: #000000;
}
.twoColHybLtHdr #header h1 {
margin: 0;
padding: 10px 0;
color: #900;
text-align: center;
}
.twoColHybLtHdr #sidebar1 {
float: top ;
width: 100%;
padding: 4px 0; /
background-color: #000;
}
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
color: #900;
font-size: small;
text-align: center;
}
.twoColHybLtHdr #mainContent {
margin: 0 20px 0 13em;
}
.twoColHybLtHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.twoColHybLtHdr #footer p {
margin: 0;
padding: 10px 0;
font-size: 70%;
text-align: center;
}
/* Diverses classes à réutiliser */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColHybLtHdr #container #sidebar1 p {
color: #666;
}
-->
</style>
.twoColHybLtHdr #container {
width: 60%;
background: #7c7162;
margin: 0 auto;
border: 1px solid #000000;
}
et tu peux virer le 0 de margin
width: 60%;
background: #7c7162;
margin: 0 auto;
border: 1px solid #000000;
}
et tu peux virer le 0 de margin
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonne question
ou est ce que je peux le voir (pour le doctype)?
Sinon j'ai viré le 0 mais ça ne change rien.
ou est ce que je peux le voir (pour le doctype)?
Sinon j'ai viré le 0 mais ça ne change rien.
Bonjour,
Ajoute margin: auto; pour le body dans ton CSS (et enlève margin: 0; si ce n'est pas déjà fait) :
Revan
Ajoute margin: auto; pour le body dans ton CSS (et enlève margin: 0; si ce n'est pas déjà fait) :
body{
margin: auto;
}
Revan
heu c'est pas plutot :
html,body{
margin:0;
padding:0;
}
et le conteneur
.conteneur
{
margin:auto;
width: nombre %;
}
:)
html,body{
margin:0;
padding:0;
}
et le conteneur
.conteneur
{
margin:auto;
width: nombre %;
}
:)
Revan, j'ai fait ce que tu m'as dit, ce qui me donne un début de code comme ça :
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: auto;
padding: 0;
color: #000000;
background-image: url(fond.jpg);
background-repeat : no-repeat;
}
mais ça ne change rien :[
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: auto;
padding: 0;
color: #000000;
background-image: url(fond.jpg);
background-repeat : no-repeat;
}
mais ça ne change rien :[
Merci mais ce n'est pas ça :[
En fait, là, quand je diminue ma fenêtre, le contenu se centre, la bannière compris
et en fait moi je veux qu'elle s'adapte, pour que la bannière parte à droit
Par exemple, sur ce forum, en page entière le contenu est cntré, et si on diminue la fenetre, le contenu se met plus sur la gauche .... pour ne pas voir apparaitre de scroll bar en bas...
peut etre est-ce plus clair ?
En fait, là, quand je diminue ma fenêtre, le contenu se centre, la bannière compris
et en fait moi je veux qu'elle s'adapte, pour que la bannière parte à droit
Par exemple, sur ce forum, en page entière le contenu est cntré, et si on diminue la fenetre, le contenu se met plus sur la gauche .... pour ne pas voir apparaitre de scroll bar en bas...
peut etre est-ce plus clair ?
Bonjour,
Oh Nolwenn :)))
Alors....
Tu met ton site entier dans une balise
<div class="lesite"> le site </div>
et en css
.lesite {
margin-left:auto;
margin-right:auto;
}
Cordialement
Auloni
Oh Nolwenn :)))
Alors....
Tu met ton site entier dans une balise
<div class="lesite"> le site </div>
et en css
.lesite {
margin-left:auto;
margin-right:auto;
}
Cordialement
Auloni
Alors,
j'ai fait tout ce que vous m'avez indiquer... sans succès.
Le truc c'est que le contenu se centre sans problème mais pas la bannière, ce qui très peu esthétique
http://img24.imageshack.us/img24/6446/capture04i.jpg
Or, quand je suis dans une fenetre de taille normale (grande), tout est bien centré parfait. Mais là du coup, on dirait qu'elle respecte une marge...
le code du header (avec les indications de dreamweaver en prime)
j'ai fait tout ce que vous m'avez indiquer... sans succès.
Le truc c'est que le contenu se centre sans problème mais pas la bannière, ce qui très peu esthétique
http://img24.imageshack.us/img24/6446/capture04i.jpg
Or, quand je suis dans une fenetre de taille normale (grande), tout est bien centré parfait. Mais là du coup, on dirait qu'elle respecte une marge...
le code du header (avec les indications de dreamweaver en prime)
}
.twoColHybLtHdr #header {
background: #000000;
}
.twoColHybLtHdr #header h1 {
margin: 0; /* la mise à zéro de la marge du dernier élément du div #header permet d'éviter une disparition de la marge (espace inexplicable entre les éléments div). Si l'élément div est entouré d'une bordure, cette précaution n'est pas nécessaire, car la bordure évite également la disparition de la marge */
margin: ; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
color: #000000;
text-align: center;
Re,
Il faut que tout ton code soit dans une balise qui definit des marges auto pour l'adaptation à tout les ecrans et resolutions.
Ensuite forcement comme ton header est plus large que ton contenu ça va creer des problemes quand on reduit la taille d'affichage. Si tu fixes la taille du contenu sur la meme taille que le header tu auras résolu ton problème.
Cordialement
Auloni
Il faut que tout ton code soit dans une balise qui definit des marges auto pour l'adaptation à tout les ecrans et resolutions.
Ensuite forcement comme ton header est plus large que ton contenu ça va creer des problemes quand on reduit la taille d'affichage. Si tu fixes la taille du contenu sur la meme taille que le header tu auras résolu ton problème.
Cordialement
Auloni