28173 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai un problème qui je pense pour vous sera assez trivial.

Mon problème est le suivant :
- j'ai un header de 150px de hauteur et de 1280px de largeur (id = header).
div#header {
	width:1280;
	height:150px;
	background:url(../images/header/header.png);
	background-repeat:no-repeat;
}


- dans ce header j'ai une zone de 100px de hauteur et de 300px de largeur (id = contexte).
div#contexte {
	width:300px;
	height:100px;
	top:0;
	left:0;
	padding:10px;
	border:1px solid black;
	background:white;
}


- j'aimerais centrer horizontalement la zone d'id "contexte" dans la zone d'id "header".
<div id="header"><div id="contexte"></div></div>


- donc j'ai modifié le style de la zone d'id "contexte" en ceci :
div#contexte {
	[b]position:relative;[/b]
	width:300px;
	height:100px;
	[b]top:50%;[/b]
	left:0;
	padding:10px;
	[b]margin-top:-50px;[/b]
	border:1px solid black;
	background:white;
}


Mais la zone d'id "contexte" n'est pas centrée horizontalement dans la zone d'id "header". Pourquoi donc ?
Et j'ai un autre souci mais la je n'ai rien tenté parce que je n'ai pas d'idée, c'est de mettre la zone d'id "contexte" totalement à droite dans la zone d'id "header", tout en restant visible.

J'espère que vous pourriez m'aider à résoudre ce problème.
Merci beaucoup.

Cordialement,
dj_f.
Modifié par dj_f. (18 Apr 2008 - 15:02)
Re-bonjour,
Vous n'avez pas d'idées ?
Ma question est mal posée ?
N'hésitez pas à me questionner sur le sujet si besoin !!

Cordialement,
dj_f.
Re-re bonjour,
pour le premier souci j'ai trouvé la solution, en fait c'est le padding de 10px, je l'ai enlevé et tout va bien. Par contre pour mettre la zone toute à droite j'ai toujours pas d'idées, si quelqu'un en a une je suis preneur !!

Cordialement,
dj_f.
Bonjour dj_f.,

Je suppose que quelque chose du genre devrait te donner l'effet souhaité :

div#contexte {
	width:300px;
	height:100px;
	float:right;
	margin-top:24px;
	border:1px solid black;
	background:white;
}

Non ?

Sinon, une petite recherche dans la FAQ (et liens associés) te donnera quelques pistes sur le positionnement Smiley cligne
Cdt,
Sylvain
Bonjour Sylvain,
ta solution marche magnifiquement bien je te remercie.

Cordialement,
dj_f.