28172 sujets

CSS et mise en forme, CSS3

[résolu] Div central à largeure variable entre 2 divs à largeure fixe

Bonjour,

Je rencontre le problème de mise en page suivant :

J'ai 3 divs, une à gauche(200px de large) , une au centre(variable en fonction de la taille de la fenêtre du navigateur) et une à droite (200px de large) .

Voici un bou de code pour ceux qui n'auraient pas compris ce que je veux dire :


<div style="float:left; width:200px">
menu gauche
</div>

<div style="float:left; width:75%">
contenu
</div>

<div style="float:right; width:200px">
menu droite
</div>


Le problème c'est que vu que les div des cotés sont à largeur fixe, on est plus dans une relation proportionnelle entre la taille du navigateur, et la largeur voulue pour la div du milieu.

Y'a t-il une astuce ou faut il passer par du JS ?

Merci
Smiley smile
Modifié par Aurel69 (12 Apr 2008 - 14:58)
Bonjour,

Si j'ai bien compris, tu souhaiterais que tes 2 colonnes latérales fassent 200 pixels de large et que ta division centrale occupe l'espace restant disponible?
Exact !

Le problème c'est que le pourcentage pour la div central fait varier la largeure de cette derniere en fonction de la taille du naviguateur, mais vu que les div des cotés ne sont pas en %, dès qu'on réduit la taille de la fenêtre ça ne rentre plus car on est pas proportionnel.
Tu ne pourras logiquement pas travailler en pourcentage à cause du problème que tu soulèves.
Il te suffit donc de laisser ton contenu central occuper toute la largeur de la page en lui ayant au préalable attribué des marges latérales de la valeur des sidebars. Petit exemple pratique:

[b][#black]HMTL[/#][/b]

<div id="sidebar-left">Colonne de gauche</div>
<div id="sidebar-right">Colonne de droite</div>
<div id="content">Contenu central</div>

[b][#black]CSS[/#][/b]

div[id|=sidebar] {width:200px;} /* Cible les divisions dont l'identifiant débute par "sidebar-" */
#sidebar-left {float:left;}
#sidebar-right {float:right;}
#content {padding:0 200px;}
OK merci je vais essayer ça dès que j'aurais un moment.

Par ailleurs , je ne connaissait pas du tout ce type de syntaxe css : div[id|=sidebar] , interessant !
je viens de tester le concept fonctionne la div central est bien redimensionnée correctement, le problème c'est que ma div central n'est plus alignée au autres, elle se trouve en effet en dessous des divs et de gauche et de droite.



<div style="position:relative; float:left; width:200px">
menu gauche
</div>

<div style="position:relative; float:right; width:200px">
menu droite
</div>

<div style="position:relative; padding-left:220px; padding-right:220px">
contenu central
</div>

<div style="clear:both">
footer
</div>

Faut-il mettre la div central en position absolute avec top:0px; ? (ce qui ne m'arrangerais pas) ou ai-je oublié quelque chose ?
Modifié par Aurel69 (12 Apr 2008 - 14:42)
En effet, j'ai voulu faire le truc a ma sauce en reprenant ton concept mais ça ne marche pas, pourtant ça parait équivalent niveau code.

Je viens de faire des essais sur une page vierge et ca marche nikel.

Je pense qu'il faut que je fasse du ménage dans le css de ma page qui est beaucoup plus dense que les exemples que j'ai tappé pour le forum.

En tout cas merci du coup de pouce !
Merci ,

Pour info il s'agissait simplement d'un h1 parramètré en clear:both qui me décalait l'ensemble.
Bonjour,

Je suis confronté +/- au même problème, j'ai aussi +/- effectué ce que Benjamin a écrit, mais cela ne fonctionne pas a 100% Smiley decu

En fait je veux créer un "bloc" dans lequel il y aura mon contenu du site, ce bloc est composé de 3 lignes sur 3 colonnes (1ere ligne Coin gauche,Milieu, coin droite, même chose pour le milieu et le bas, c'est pour intégrer un cadre tout autour)

Voici le code (Je fais le test uniquement sur la première ligne pour le moment, car le coin a droite est décalé d'une ligne justement : 


HTML : 
<div id="contentFrame">
      <div class="top_left"></div>
      <div class="top">News</div>
      <div class="top_right"></div>
     <!--
      <div class="middle_left"></div>
      <div class="middle">
      	Ceci est un test
      </div>
      <div class="middle_right"></div>
      
      <div class="bottom_left"></div>
      <div class="bottom"></div>
      <div class="bottom_right"></div>
      -->
    </div>   

CSS : 
#contentFrame { position:absolute; left:5%; top:220px; width:90%; z-index:2;   }
	#contentFrame div.top_left    { width:12px ; height:32px ; background:url(img/top_left.png)  no-repeat;    float:left;              }
	#contentFrame div.top         { margin-left:12px; margin-right:12px;  height:32px ; background:url(img/top.png) repeat-x; font-size:24px; color:#FF0000; font-style:italic; font-weight:bold; }
	#contentFrame div.top_right   {width:12px ; height:32px ; background:url(img/top_right.png) no-repeat;    float:right;              }


Et voila le résultat :
<Modération>Merci d'éviter les images trop grandes qui déforment le forum!</Modération>

Pouvez-vous m'expliquer d'où peut provenir le problème ? J'ai essayer de remplacer les margin par des padding comme Benjamin le disait plus haut, mais le résultat était complètement différent Smiley decu donc la je ne vois plus trop comment faire :s

Merci d'avance pour votre aide
Modifié par Florent V. (13 Apr 2008 - 13:41)
Bonjour,

kiki57, tu postes dans un sujet marqué par son auteur comme [Résolu]. Tu n'obtiendras sans doute pas de réponse ainsi.

Je ferme ce sujet. Si tu as toujours un problème, tu peux créer un nouveau sujet pour l'exposer, en faisant un lien vers celui-ci si tu juges que c'est une information utile.
Sujet clos
Aller à