[resolu]Probleme de positionnement selon la resolution

Bonsoir à tous,

Je viens de faire un test de cette Page de test sur une resolution supérieur en 1024. Et j'ai mon icone avec l'enveloppe juste au dessus du bouton de recherche qui se balade sur la droite alors que je l'ai positionné en position absolu.

Bizarre. Si quelqu'un à une idée, elle sera la bienvenue car là je ne vois pas du tout.

Merci.

A vue d'oeil, ton image est positionnée en absolu par rapport au côté droit de la page. Donc il est normal qu'elle reste fixe à l'endroit où tu la positionnes... et que tout le reste du site, centré, bouge.
Il faudrait que tu la positionnes par rapport à un autre conteneur, celui qui englobe ton site.

En fait, j'ai attribué à cette image ceci :

#titrepage a img{
position:absolute;
top: 120px;
right:20%;
z-index:100;
}

et celle ci est contenu dans #titrepage qui se trouve dans mon conteneur #page-header qui enblobe le site mais en vain. J'ai enseuite essayé une méthode avec un float mais ces problémes apparaissent sous IE6.

Là je flanche. Il faut bien positionné cette image en absolu afin qu'elle ne bouge plus ou y a t'il une autre méthode ?

Merci

doomer a écrit :
et celle ci est contenu dans #titrepage qui se trouve dans mon conteneur #page-header qui enblobe le site

Ces éléments sont-ils positionnés ?

Le bloc page-header utilise les marges dont voici le source :

#page-global {
	width: 760px;
	\width: 780px;
	w\idth: 760px;
	margin-left: auto;
	margin-right: auto;
	background:#ffffff url(../images/fond-news.jpg) repeat-y right;
	text-align:left;
}

et le bloc #titrepage :

#titrepage{
	padding: 0 0 12px 10px;
	margin: 0 0 0px 0;
	border-top:1px solid #d2d9db;
	border-bottom:1px solid #d2d9db;
	background: #fecc69 url(../images/diago.png) repeat-x;
	height:4em;z-index:100;
}

#titrepage h2{
	font: bold italic 165% Arial,sans-serif;
	color: #CC6600;
	margin:0;padding:10px 0 10px 0;vertical-align:middle;
}

#titrepage span{
	color: #993333;
	font:italic 110% Arial,sans-serif;
	float:left;
	background:url(../images/fleche4.jpg) no-repeat left;
	margin-left:70px;
	margin-top:-2px;
	padding-left:14px;
	}

#titrepage a img{
position:absolute;
top: 120px;
	right:20%;
z-index:100;
}

donc pas de positionnement particulier si ce n'est l'utilisation des marges.

Je ne vois pas trop sauf que peut être le positionnement absolu à besoin d'un bloc parent lui même positionné je crois, non ?

Effectivement, aucun ancêtre de ton image n'est positionné, donc celle-ci n'est pas placée par rapport à eux :
Comprendre le positionnement en CSS :

a écrit :
Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière (balise body en HTML, html en XHTML).

Tu dois donc positionner l'un des ancêtres au minimum en position relative.

Ok, j'ai appliqué la position relative à mon conteneur global du site et plus de probléme. Je n'y avais pas pensé d'appliquer la position relative.

Merci Raphael de ton aide.
Modifié par doomer (22 May 2005 - 22:18)