28172 sujets

CSS et mise en forme, CSS3

[résolu]3 colonnes avec colonne centrale de largeur fixe

Bonjour,

J'essaie de faire en css un design en 3 colonnes dont la colonne centrale serait de largeur fixe (ex: 300px) et les colonnes latérales fluides en largeur.... (hauteurs fixes, la page ne doit pas défiler à l'écran)
J'ai trouvé des tas d'exemples pour faire le contraire: 2 colonnes latérales de largeur fixe et la colonne centrale fluide mais pour l'instant je ne suis pas arrivé à les modifier pour réaliser ce que je voudrais
si quelqu'un pouvait me donner une piste
Merçi et bonne journée à tous.
Modifié par zanzibar (24 May 2005 - 08:32)
Merçi de ta réponse Smiley smile
Oui ça a été un de mes premiers réflexes de regarder du coté de la galerie de menus de Raphael mais là encore c'est les deux colonnes latérales qui sont en largeur fixe et la colonne centrale qui est étirable...
Je veux l'inverse et après avoir testé plusieurs idées, pour l'instant j'ai pas trouvé ! Smiley decu
Modifié par zanzibar (24 May 2005 - 12:12)
et si tu mets une largeur fixe à la colonne du milieu ainsi qu'au conteneur contenant les 3 colonnes et un 

width: auto


à deux colonnes extérieures, qu'esce que ça donne ?
zanzibar a écrit :
Bonjour,

J'essaie de faire en css un design en 3 colonnes dont la colonne centrale serait de largeur fixe (ex: 300px) et les colonnes latérales fluides en largeur.... (hauteurs fixes, la page ne doit pas défiler à l'écran)


Sans table, je ne vois pas. avec summary ça doit passer au validateur :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Trois colonnes avec la colonne centrale centrée et de largeur fixe.</title>

<style type="text/css" />

*{margin:0;padding:0;height:100%;} 

#page{width:100%;}
#centre{width:300px;background:yellow}
#gauche{background:pink}
#droite{background:#eee}
#page td{vertical-align:top}
</style>

</head>
<body>

  <table summary="" id="page">
    <tr>
      <td id="gauche">cadre de gauche</td>
      <td id="centre">cadre du centre</td>
      <td id="droite">cadre de droite</td>
    </tr>
  </table>
 
</body>
</html>
Merçi les gars j'ai dû m'absenter mais j'essaie ça ce soir ou demain et je dirai ce que ça donne, à priori plus confiant dans la solution de chmel car l'autre j'ai déjà dû essayer !
bonne soirée à tous Smiley smile
Salut tout le monde,

C'est nickel, la solution chmel répond au pb, pour valider il faut juste oter le slash qui n'a pas lieu d'être à la fin de la balise style:
<style type="text/css">

faute d' inatention...sinon impeccable merçi!
Bon c'est une solution avec tableau mais il y a des cas où c'est nécessaire,

Entre temps j'avais trouvé une autre alternative sans tableau mais c'est un peu du bricolage...un compromis qui ne répond pas à 100% au pb mais peut être utile dans certains cas avec les limitations suivantes:
- si on réduit fortement la largeur de page, on finit par grignoter un peu l'image centrale
- on n'utilise pas toute la largeur dispo pour les colonnes latérales

voir le code ci dessous: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Trois colonnes avec la colonne centrale centrée et de largeur fixe.</title>

<style type="text/css">
*{margin:0;padding:0;height:100%;}
#page{width:100%;}
#centre{width:300px;margin-left:auto;margin-right:auto;background:yellow} 
#gauche{position:absolute;left:0;top:0;width:25%;background:pink;}
#droite{position:absolute;right:0;top:0;width:25%;background:#eee;}
</style>

</head>
<body>
<div id="page">
  <div id="gauche">cadre de gauche</div>
  <div id="droite">cadre de droite</div>
  <div id="centre">cadre du centre</div>
</div>
</body>
</html>

Je sais pas d'où je l'ai sorti celui là??? Smiley cligne Smiley smile
Modifié par zanzibar (25 May 2005 - 23:19)
zanzibar a écrit :
Salut tout le monde,
<style type="text/css">

faute d' inattention... oui !!
Je sais pas d'où je l'ai sorti celui là??? Smiley cligne Smiley smile


Marche pas vraiment ta solution. Je serai curieux de savoir s'il en éxiste une qui fonctionne (sans tableau). Smiley decu
Ben oui ça arrive a tout le monde les fotes Smiley cligne ...bon là je suis cassé Smiley confus

Moi aussi j'aimerais savoir si ç'est faisable sans tableau....ma solution est très imparfaite je l'avais dit mais sur mon site ça rend pas trop mal en choisissant un alignement à droite pour le texte de la colonne de droite....si quelqu'un a mieux à proposer? sinon ce sera avec tableau!
Bonne journée
Eh Chmel si tu repasses par là, jette un oeil à ma solution sans tableau Smiley cligne
Y zont même pas trouvé...alors je l'ai fait Smiley ravi
Validé et testé OK sur Firefox et IE6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>3 col dont col centrale de largeur fixe avec marges négatives</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 

<style type="text/css">
* {height: 100%; margin:0; padding: 0}
#conteneur-gauche {
  width: 50%;
  float: left;
  margin-right: -150px;
}
#contenu-gauche {
  background: pink;
  margin-right: 150px;
}
#conteneur-droite {
  width: 50%;
  float: right;
  margin-left: -150px;
}
#contenu-droite {
  background: #eee;
  margin-left: 150px;
}
#zone-centrale {
  width: 297px;
  float: right;
  margin-right: 1px;
  margin-left: 1px;
  background: yellow;
}
h1 {
  font-size: 16px;
}
</style>
</head>

<body>
  <div id="conteneur-gauche">
    <div id="contenu-gauche">
      <h1>Colonne gauche étirable</h1>
    </div>
  </div>
  <div id="conteneur-droite">
    <div id="contenu-droite">
      <h1>Colonne droite étirable</h1>
    </div>
  </div>
  <div id="zone-centrale">
    <h1>Zone centrale de largeur fixe (297 px)</h1>
  </div>
</body>
</html>
Sujet clos
Aller à