28173 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement à droite d'un container principal

Bonjour,

J'ai une interrogation concernant un problème de positionnement.
J'ai réalisé un site en CSS et l'ensemble du site est dans un conteneur

#container { 
	width: 800px;
	top:0px;
	background: white;
    position: relative; /* on positionne le conteneur */
    margin-left: auto;
    margin-right: auto;
	padding:0px; 
	text-align:left;	
	}

J'aimerais placer une bannière à la droite de ce container...
J'ai essayé un placement en absolute mais le problème c'est qu'en résolution faible la bannière passe en dessous...
Auriez-vous une solution ?

Par avance merci
Grand-Pas
Modifié par Grand-Pas (16 Feb 2006 - 08:47)
Administrateur
Hello et bienvenue ici,

Comme tu es dans le salon CSS, tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "Problèmes de positionnement css".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre Smiley decu

PS : attention au langage SMS, surtout dans les titres. Plutôt que "Pble", cela prend 3 secondes à écrire "problème" et ce sera bien plus accessible à tous Smiley cligne
Modifié par Raphael (15 Feb 2006 - 19:45)
Ton bloc de 800px, il est aligné comment ?
Directement à gauche dans la page, à droite, centré ?

Sinon, j'ai l'impression que ton position: relative; et ton top: 0px; ne servent à rien (en tout cas ils n'ont aucun effet...). Et si ton conteneur est une div, le padding: 0px; ne sert à rien non plus (vu que c'est la valeur par défaut).

Si ton site est aligné à gauche : cherche du côté des blocs flottants, peut-être... ou alors mets ta banière en positionnement absolu avec left: 820px; par exemple.

Si ton site est centré :
#baniere {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 410px; /* la moitié de la taille du bloc conteneur + 10px pour avoir un peu de marge */
}

Aucune garantie mais théoriquement ça pourrait marcher (il faudra peut-être corriger une chose ou deux)...
À voir ce que ça donne.

Je viens de tester avec Firefox et ça marche nickel.
On mettra le code pour la baniere directement dans le body (pas dans le bloc conteneur !)

Par contre : le bloc conteneur reste centré, et la banière est décalée. Si elle fait 100px; en résolution 1024*768, il y a un bout qui dépasse.

Ça par contre ça passe :
	<style type="text/css">
	body {text-align: center;}
	#conteneur {margin: 1em auto; width: 760px; height: 1200px; border: solid 1px red;}
	#baniere {border: solid 1px black; position: absolute;
	width: 100px; height: 640px; top: 100px; left: 50%; margin-left: 390px;}
	</style>
</head>

<body>
	<div id="conteneur">
	</div>
	<div id="baniere">
	</div>


PS: désolé si c'est confus (et je pense que ça l'est !), mais là je suis naze... bonne nuit.
Modifié par mpop (15 Feb 2006 - 23:39)
Tout d'abord merci pour ta réponse Smiley smile
Ce n'est pas si confus que ça... Smiley cligne
Le container est positionné au centre (un text-align:center au niveau du body).
Ta seconde solution a l'air pas mal du tout... Je vais de ce pas l'essayer...
Cela marche très bien Smiley lol
Merci pour vos réponses.

GP
Sujet clos
Aller à