Alignement de 3 blocs...

Bonjour.

Alors voila j'ai décidé de tenter de passer tout nos sites entreprises en css...
Je me suis inspiré d'un tuto sur alsacreations

J'ai 3 blocs en haut qui sont comme ca :

a écrit :

<div id="conteneur">
<div id="headergauche">gauche oiero iemoig hemoghi emorigh eomigh emiogh meoigh meiogh emrgioh</div>
<div id="headercentre">aaa</div>
<div id="headerdroit">droit</div>
</div>

et la css associée est

a écrit :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

#conteneur
{
position: absolute;
width: 100%;
background-color:#FFFFFF;
}


#headergauche
{
float:left;
width: 270px;
height: 187px;
background:url(new_home/enfant1.gif) top left no-repeat;
}

#headercentre
{
margin-left: 270px;
margin-right: 303px;
height: 187px;
background:url(new_home/degrade_top.gif);
background-repeat: repeat-x fixed;

}

#headerdroit
{
float:right;
width: 303px;
height: 187px;
background:url(new_home/logo.gif) top left no-repeat;

}

Et rien a faire...le dernier bloc a droite passe en dessous....

Je comprends pas..

Merci

Si j'ai suivi ton affaire, tu veux que le #headercentre prenne la place que les 2 autres n'ont pas pris ?

Je pense que en absolute complet tu y gagneras alors. Comme les gabarits de Raphael le montre.

Mais si tu veux absolument du float il faudrait passer sur qqch come ça :

<div id="conteneur">
<div id="headergauche">gauche oiero iemoig hemoghi emorigh eomigh emiogh meoigh meiogh emrgioh</div>
<div id="headercentre"><div id="content">aaa</div></div>
<div id="headerdroit">droit</div>
</div>

et le css

#headercentre {
float: left ;
width: 100 % ;
margin: 0 -310px 0 -280px ;
}

#content {
padding: 0 330px 0 300px ;
}

Le reste ne change pas.
Ainsi le headercentre prendra tout l'écran moins 280px à gauche et 310px à droite, de quoi faire passer les 2 autres divs. Et le #content est là pour corriger la marge ainsi laissée.

Bon c'est de tête, alors en espérant que j'ai rien oublié :x

Merci ca a l'air de fonctionner désormais !
En revahcne comment éviter qu'en resizant la fenetre les elements ne se passent pas dessous/dessus. Peut t'on spécifier une min width ?

Oui tout a fait, c'est même conseillé, ca m'était juste sorti de la tête

En général on le fixe pour que le site reste visible sur un 800*600 sans scrollbar horizontal. Mais après chacun ses choix de conception ^^


edit: min-height ne marche pas sous IE me semble-t-il par défaut, mais je me demande s'il n'existe pas un hack comme pour le min-height.
Modifié par tyx (21 Jun 2005 - 09:39)

Merci. Je vais regarder si je trouve ca.

En fait, le fond du probleme c'est que je me demande si ca vaut le coup de passer le site en full css. Je m'explique. Dans ma boite nous sommes dans une logique de prod assez pousée. Meme si je sais qu'au bout d'un certain temps et de pratique les css doivent rendre assez service, est ce vraiment rentable... Car cela me parait bien compliqué et laborieux compte tenu du temps qu'il faut passer sur les sujets de compatibilité, de hacks etc...

tyx a écrit :

edit: min-height ne marche pas sous IE me semble-t-il par défaut, mais je me demande s'il n'existe pas un hack comme pour le min-height.

Je ne connais pas de hack ou de bidouille simple pour emuler le min-width comme le min-height sous IE. En revanche il existe pas mal de solutions à base de javascript (trouvables facilement sur le net).

Si tu n'as rien contre un petit script bien entendu...