[RESOLU]absolutes > flottants

Bonsoir à tous,

Je dispose d'une architecture de site, et après quelques headers, se trouve un bloc central, dans lequel j'ai deux menus.

J'ai dessiné ce bout d'architecture en croquis sur paint :

http://img46.imageshack.us/img46/2154/sanstitrefk4.png

Dans mon code html, j'ouvre d'abord les div d'un conteneur de menu :

.conteneur {
position:absolute;
left:75px;
width:150px;
border:none;
background: none;
}

dans lequel j'insère mes deux menus :

.menu{
position:relative;
width:150px;
margin-top:18px;
background-color:#EEEEEE;;
border-color : #999999;
color : #333333;
font-size: 8px;
font-weight : bold;
padding : 3px;
}[CODE]

(deux div class="menu")

puis je referme la div du conteneur, pour ensuite insérer la div de mon bloc central (celui que l'on voit sur le croquis) :

[code]#bloccentral {
margin-right:60px;
margin-left:60px;
margin-bottom:3px;
}

Pour enfin insérer un bloc destiné aux contenu :

#bloc_ecriture_dans_bloc_central {
margin-left:176px;
margin-right:12px;
margin-top:10px;
border:none;
background: none;
text-align:justify;
padding:3px;
}

En gros, la partie HTML ressemble à ça :

<div class="conteneur">


<div class="menu">
lien
a
a
a
</div>
<div class="menu">
liens
liens
</div>
</div>

<div id="bloccentral">


<div id="bloc_ecriture_dans_bloc_central ">


contenue texte


</div>


</div>

Il se trouve egalement un deuxième conteneur mais avec right:75px
ou se trouve a l'intérieur deux menus encore.

Cette architecture devra pouvoir mettre x MENU à droite ou à gauche, qui sont en faite plus des bloc que des menus.

Mon problème est le suivant :

Mon conteneur étant en position absolute, s'il s'agrandit car j'agrandit les menus, il ne pousse pas le bloc central mais dépasse.
Je souhaiterai qu'il le pousse, pouvez vous m'aider à trouver une solution pour ce?

Je vous remercie,

Codement !!

timothy
Modifié par timothyleary (02 Aug 2007 - 16:03)

Bonjour,

Tu englobes tes menus dans un bloc en float: left et tu poses un margin_left égal au width de ce bloc a ton bloc contenu. Si tu as un pied de page un clear: both devrait faire l'affaire au pire un div vide affublé d'un clear: both devrait pousser ton contenu au cas où les menus seraient plus long...

Ok Ok mais si j'ai bien compris je garde donc un bloc de contenue (invisible ) en plus de mon bloc central (celui qui s'affichera ) ?

Car si c'est bien le cas ce n'est pas ce que je recherche,
je voudrait que le texte soit dans le flux du bloccentral, a droite des float : left, sans continuer en dessous des menus mais toujours sur la droite, à xPX du bord, x = largeur des menus.

Il me semblait qu'il fallait peut etre aussi utiliser overflow ?

Cordialement

timothy

Re,

Ben si tu donnes un margin-left a ton bloc contenu égal au width de ton bloc de menu, le texte du contenu ne passera jamais sous tes menus

timothyleary a écrit :
Il me semblait qu'il fallait peut etre aussi utiliser overflow ?

Deux utilisations possibles de l'overflow ici:
- pour empêcher le dépassement des flottants (conteneur avec bordure noire);
- pour forcer le bloc de contenu (bloc invisible entourant le texte à droite) à «fuir» le flottant.

Deux choses qui peuvent être obtenues, comme l'indique ghost, par d'autres moyens:
- utilisation de la propriété clear sur un élément invisible pour empêcher le dépassement des flottants;
- utilisation d'une marge sur le bloc de contenu.

Merci, j'ai un peu essayé deux trois trucs, enfin, j'ai modifié mon problème dans le post, en faite je voudrait finalement simplement que mes menus quand il s'agrandisse agrandisse le bloc central en relative, sachant que ces menus sont contenus dans un bloc absolute, c'est là tout le problème :-p

merci beaucoup

et bonne journée !

timothyleary a écrit :
sachant que ces menus sont contenus dans un bloc absolute

Là, pas à tortiller: ne pas positionner les blocs en absolu (un conteneur ne s'adaptera jamais à ses descendants positionnés en absolu). Passer par un bloc flottant à la place.
Modifié par Florent V. (02 Aug 2007 - 12:37)

Ben tu places les deux menus dans un même bloc, que tu fais flotter à gauche (float: left) en n'oubliant pas de lui donner une largeur. Ensuite, tu donnes une marge à gauche correspondante à au moins cette largeur au bloc de texte.

À partir de là, tu devrais avoir un conteneur, une «colonne» de gauche et une «colonne» de droite. Le problème qui te restera à régler est celui du dépassement des flottants, mais plusieurs réponses ont déjà été données dans ce sujet.

Ok super, résolu résolu résolu, j'ai failli demandé pour le problème de l'overflow auto sous ie, après une heure de recherche, je n'avais pas trouvé, j'ai fini par trouvé lol.

overflow:auto pour que le flottant agrandisse son conteneur en cas de dépassement (a mettre dans le bloc conteneur).
Sous ie un simple display:inline-block suffit (agrémenter du petit - qui assigne la propriété à ie).