18041 sujets

Questions générales et questions de débutants

[Résolu] Positionnement

Bonjour, plutôt que de vous expliquer le tout, je vous explique juste mon problème.
Je voudrais centrer le bandeau du bas au milieu horizontal de la page.
Mais comme j'ai mis un margin: 150px; dans le body, ce bandeau se cale par rapport à cette marge.
Comment faire pour qu'il se cale par rapport à body mais en marge zéro tout en gardant pour le reste la marge à 150px ?

Ou faut-il que je change mon approche au niveau du code ?

Hum..... Pas très clair tout ça.

Le code CSS :

body {
	margin: 0 0 0 150px;
	background-image: url(plume.jpg);
	background-repeat: no-repeat;
	background-attachment:fixed;
}
#gauche {
	background-color: #FFFF00;
	width: 60%;
	height: 200px;
	float: left;
}
#droite {
	background-color: #FF0000;
	width: 35%;
	height: 200px;
	float: right;
}
#bas {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #990000;
	clear: both;
	margin: auto;
	width: 400px;
	background-color: #FFCC00;
	text-align: center;
}


Le code HTML :

<body>
<div id="gauche">1</div>
<div id="droite">2</div>
<div id="bas">BAS DE LA PAGE</div>
</body>

Modifié par renato (07 Mar 2007 - 21:29)
Bonjour,

Si tu veux limiter tes modifications structurelles, tu peux annuler cette marge en la "contrant" par son inverse:
#bas {margin-left:-150px}
OK mais maintenant comment je fais pour garder mon alignement centré en horizontal ?
Car le fait d'annuler la marge, me change mon alignement centré.

Merci pour le coup de main.
... ce n'est pas interdit de chercher un peu aussi. Smiley cligne

C'est assez simple: le texte se centre naturellement sur toute la largeur de ton div et par conséquent, de la page entière. Pour garder un centrage par rapport au décalage du reste, il suffit de... décaler ce centrage! Smiley biggol 

#bas {padding-left:150px}
Euh... Pour chercher je cherche, mais que je sache le padding décale le texte à l'intérieur de la boîte.
Moi ce que je souhaiterais (remarques bien que je n'ai pas dis je veux), c'est que l'alignement centré se fasse sur la boîte et non sur l'intérieur.
En fait, est-ce qu'il existe en CSS une balise qui ferait sortir cette boîte des paramètres enregistrés dans le body ?
Donc, à voir si ma logique de code est bonne.

Un p'tit rappel..... Je débute...
Franchement, je ne comprends pas bien ce que tu veux. Smiley confus

De deux choses l'une:

- soit tu désires que ton texte soit centré dans ton div bas (qui prend désormais toute la largeur de la page): il faut alors s'arrêter à ma première réponse
- soit tu aimerais centrer ton texte par rapport au contenu qui le précède, contenu décalé de 150px à gauche par ta marge appliquée au body: il faut alors se rapporter à ma deuxième intervention.

N'aurais-tu pas une image ou un bref schéma de ce que tu veux réaliser?
Voilà un gabarit, en espérant que ce soit + clair.

La boîte <di<> qui renferme le contenu doit venir s'aligner au centre en horizontal. C'est un bandeau qui reviendra en bas de chaque page.

Merci de t'intéresser à mon cas.

upload/3601-Gabarit.gif
Hé bien, c'est quand même loin de ce que j'avais compris de ta première question:
renato a écrit :
Je voudrais centrer le bandeau du bas au milieu horizontal de la page.
Mais comme j'ai mis un margin: 150px; dans le body, ce bandeau se cale par rapport à cette marge.
Comment faire pour qu'il se cale par rapport à body mais en marge zéro tout en gardant pour le reste la marge à 150px ?


Bref, d'après ton schéma, ta lise d'items doit être centrée par rapport au contenu qui se trouve au dessus de lui, et par conséquent respecter aussi cette marge latérale. Du coup, je ne vois pas bien le problème à réaliser cela. Smiley decu
Non, tu n'as pas bien compris.
Mon image n'est pas le résultat que je désire obtenir, car pour la bonne raison que sur l'image le bandeau n'est pas à sa place, il est décentré (c'est une capture d'écran de ce que j'arrive à faire).
Mais, je répète, le bandeau ne doit pas se caler par rapport à ce qu'il y a juste au-dessus car là effectivement je sais déjà le faire mais il doit se caler par rapport à BODY (mais en marge 0).

Il doit se centrer par rapport à body, mais la difficulté est que dans BODY il y a une marge de 150 pixels et c'est cette marge qui me fait c....
Cette marge me sert pour les 2 boîtes mais pour le bandeau je dois pas en tenir compte.
Mais enfin, c'est bien ce que je pensais, je t'ai donné la solution dans ma première intervention... Bon concrètement, tu vas avoir quelque chose comme ceci:

[b][#black]HTML[/#][/b]

<ul id="piedDePage">
	
	<li><a href="#">item1</a></li>
	<li><a href="#">item2</a></li>
	<li><a href="#">item3</a></li>
	<li><a href="#">item4</a></li>
	<li><a href="#">item5</a></li>
	
</ul>


[b][#black]CSS[/#][/b]

#piedDePage {margin-left:-150px; text-align:center; list-style:none;}
#piedDePage li {display:inline; padding:5px;}
Bonjour à tous,

Je propose un truc peut-être "moins tordu" :


        <div id="content">
		<div id="gauche">1</div>
		<div id="droite">2</div>
	</div>
	<div id="bas">BAS DE LA PAGE</div>




body {
	margin: 0;
	background-image: url(plume.jpg);
	background-repeat: no-repeat;
	background-attachment:fixed;
}

#content {
margin : 0 0 0 150px;
}


etc.


C'est l'histoire du bon vieux conteneur global qu'on retrouve souvent dans les toutes aussi bonnes structures de page, laissant au body le loisir de s'étaler sur tout l'écran, lui et tous les conteneurs qui échapperaient au précédent ...

Smiley lol
Là, d'accord, c'est super, ça marche comme je le souhaitais.
Donc, si j'ai bien compris il vaut mieux garder cette logique : laisser le body s'étaler sur toute la largeur de la page et ensuite créer des conteneurs.
Donc, merci pour ce coup de main.

A +
Sujet clos
Aller à