28173 sujets

CSS et mise en forme, CSS3

Bonsoir à vous,
Je suis actuellement en train de refaire un design en css, et je me heurte à un problème que je n'arrive pas à résoudre...

L'url du problème : http://www.coupdepelle.com/cdpv3/menu.html

Voici la structure du conteneur (cadre à fond vert) :

<div id="content">
     <div id="sidebar_left">...</div> 
     <div id="main">...</div> 
     <div id="sidebar_right">...</div>
</div>


Voici les propriété de placement des différents cadres :
- #content est en "position:relative"
- #sidebar_left en "float:left"
- #sidebar_right en "float:right"
- #main en "position:absolute"

Sans mettre de overflow, le cadre #main dépasse de #content (comme c'est le cas actuellement), et si je met "overflow: auto" dans les propriétés de #content, j'obtiens une barre de scroll. Smiley ohwell
Je précise que je n'ai pas de hauteur fixe pour le cadre #content.

Si quelqu'un avait une réponse, ça me serait d'un grand secours Smiley confused , merci bien.
Bonjour,

Essaye overflow: hidden;

ton block devrait suivre son contenu sous FF sans scroll.
Modifié par ghost (28 Nov 2006 - 20:03)
Marco33 a écrit :
Sans mettre de overflow, le cadre #main dépasse de #content (comme c'est le cas actuellement)

Même avec un overflow, tu n'obtiendras rien de correct. Ton bloc #main est positionné en absolu, par conséquent tous les autres blocs (y compris son bloc parent) se fichent de ses dimmensions comme de leur première chemise. Smiley lol
C'est tout l'intérêt du positionnement absolu... et ce qui fait que ce type de positionnement n'est absolument pas adapté pour ce que tu veux faire.

Ton bloc #main devrait être en positionnement statique, flottant ou non.

Pour une mise en page sur trois colonnes, voici un modèle :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html
Une variante de ce modèle serait, pour le bloc central, d'utiliser un overflow: auto|hidden plutôt que des marges pour éviter que les limites du bloc ne passent sous les flottants.
Re,
Effectivement le block incriminé est en absolute, autant pour moi, j'étais parti sur le block content...
Il conviendrait peut être de positionner ton block gauche en absolute, le fameux main avec un margin-left correspondant et en overflow: hidden et le droit en float right .
Merci beaucoup à vous 2 Smiley cligne

J'ai mis des marges à la colonne centrale.

Par contre,ghost, quand tu parles de mettre un block en absolue c'était pas plutot le droit ?

J'ai laissé le gauche en float:left, et mis le droit en absolute, et ça marche nickel Smiley smile

Encore merci ! Smiley lol
Re,

C'est sensiblement le même résultat à première vue, sauf que le gauche en absolute, on a pas besoin de le positionner car par défaut il sera top: 0; left:0 et le droit en float right aussi. Sûrement question de fainéantise ou peut être vérifier que si ton conteneur est en width % ou em qu'il n'y est pas embrouille en changeant de résolution (à vérifier quand même finalement !!)