28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je me présente en tant que nouveau, aussi bien sur ce forum qu'en programmation web ! Smiley confused
J'ai une petite question pour résoudre un problème qui me fait tourner en rond...

Je veux faire une entête en trois parties dont deux de taille fixes sur les côtés, et donc l'autre s'adaptant à la résolution.
Je m'y prend à coup de float, de display et de tout ce que je peux, mais je dois sûrement mal m'y prendre : j'ai par exemple une division qui passe par dessous en réduisant la fenêtre etc...

Une petite image qui illustre ce que je veux obtenir (en un peu plus chouette) :

http://brewal.renault.free.fr/v2/design.gif

J'aimerais si ce n'est pas trop demandé, ce qu'il faut mettre en html et en css pour obtenir ce rendu Smiley sweatdrop

Merci d'avance

edit : Pour l'instant ce que j'ai de mieux c'est grâce aux coups d'absolute, mais mon image à droite passe un peu par dessus le menu en réduisant la largeur de la fenêtre Smiley biggol
voir ici : http://brewal.renault.free.fr/v2/navigation.php

voilà le code :

.menu{
	position:absolute;
	font-family:Arial,Helvetica,sans-serif;
	font-size:14px;
	height:50px;
	width:435px;
	background:url(menu/motif_ban.png);
}
.milieu{
	position:absolute;
	top:0px;
	left:435px;
	right:350px;
	height:50px;
	background:url(menu/motif_ban.png);
}
.lien_banière{
	position:absolute;
	right:0px;
	top:0px;
	width:350px;
	height:100px;
	background:url('images/pilhaouers_b.png');
}


<div class="menu">
        <a href="#">Actualité</a>
	<a class="current" href="#">Musiciens</a>
	<a href="#">Photos</a>
	<a href="#">Livre d'or</a>
	<a class="private" href="#">Privé</a>
</div>
				
<div class="milieu">
</div>
			
<div class="lien_banière">
</div>

Modifié par Brewal (08 Jun 2010 - 22:39)
Bonjour,

Il serait plus approprié d'utiliser le positionnement flottant :

<div class="menu"></div>
<div class="lien_banière"></div>				
<div class="milieu"></div>			



.menu{
	float:left;
	width:400px;
}
.milieu{
}
.lien_banière{
	float:right;
	width:300px;
}



Le bloc "milieu" prendra toute la place restante entre les deux bloc, si tu ne veux pas que le contenu de milieu pas sous les deux autres (si son contenu est plus long), il faudra rajouter "margin:0 300px 0 400px;".

Pour le retour à la ligne en cas de redimensionnement, il est normal à partir du moment où les bloc n'ont plus assez de place pour être côte à côte. Pour l'éviter, tu peux éventuellement donner une taille minimale (min-width) à un div qui engloberait les trois autres.