28172 sujets

CSS et mise en forme, CSS3

Bonjour,
depuis cet après-midi je galère à mettre en place les DIV de mon header. J'ai fait un petit schéma de ce que j'essaye d'atteindre:
http://img257.imageshack.us/img257/2871/divcss.jpg
Ce sont surtout le DIV #login et #social qui me donnent du fil à retordre.
J'ai essayé de plein de façons différentes, je commence à avoir vraiment mal au crâne... Smiley ohwell

Extrait de ma feuille de style avec les éléments concernés:

body {
	margin:auto;
	background:url(img/bg.gif) #fefefe;
	font-family:Arial, Helvetica, Sans-serif, Lucida Grande;
	color:#393939;
	line-height:1;}

#page {
	margin:auto;
	width:980px;}
#header {
	background:url(img/img.png) no-repeat;}
#login { 
	float:right;
	width:162px;
	float:right;
	padding:3px 0 1px 7px;
	font-size:11px;
	background:#fff;}
#social { 
	margin-top:-43px;
	width:100%;
	float:right;
	text-align:right;}
#menu { 
        margin-top:-20px; /**c'est volontaire [cligne] **/
	width:100%;
	background: #fefefe;
	color: #373737;}




<div id="page">
<div id="header">
<div id="login">
<span class="espace-membre">ESPACE MEMBRE</span>
Lorem Ipsum
</div>
<a href="#"><img src="img/logo.gif" width="438" height="210" /></a>
<div id="social">
<img src="/img/icon-twitter.png" />
<img src="/img/icon-facebook.png" />
<img src="/img/icon-rss.png" />
</div>
</div>
<div id="menu">
Lorem Ipsum
</div>
</page>



Sur Firefox et Chrome ça s'affiche convenablement mais sur... IE, ça coince, forcément! Et j'ai l'impression que le code est vraiment moche. Un peu peur aussi pour le différentes résolutions d'écrans...

Merci d'avance pour votre aide!
Modifié par Mousbet (04 Nov 2011 - 23:21)
Bonjour,

humm, j'aurais collé login et social en position:absolute, un right à zéro, et le header avec un z-index négatif.