28173 sujets

CSS et mise en forme, CSS3

Aide pour mise en page 2 colonnes centrée et fluides.

Bonjour, j'aimerais dévelloper une mise en forme de deux colonnes centrées et fluides :
Les deux colonnes occupent 100% de la hauteur de la page.
Mon code est le suivant :

<?xml version="1.0" encoding="utf-8"?>
<!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">

<head>
  <title></title>
  <meta name="GENERATOR" content="Quanta Plus" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>


body, html {
    background-color : #edffe3;
    font-family : Arial;
    font-size : 9px;
    height : 100%;
    margin-bottom : 0px;
    margin-left : 0;
    margin-right : 0px;
    margin-top : 0px;
    text-align : center;
  }

/* Mise en Forme de la Page*/


#menu {
    position:absolute;
    left:10%;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-left-style : solid;
    border-left-width : 1px;
    border-right-style : solid;
    border-right-width : 1px;
    border-top-style : solid;
    border-top-width : 1px;
    height : 100%;
    width : 190px;
  }


#contenu {
position:absolute;
padding-left:190px;
left:10%;
right:10%;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-left-style : solid;
    border-left-width : 1px;
    border-right-style : solid;
    border-right-width : 1px;
    border-top-style : solid;
    border-top-width : 1px;
    height : 100%;

  }

</style>
<body>
<div id="menu">Test </div>
<div id="contenu" align="center">
Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! Test ! 
<img src="Sperzel3.jpg" width="800" height="600">
</div>

</body>
</html>

Le principal problème est que l'image depasse dépasse du div #contenu lorsqu'on réduit la fenêtre et je ne veux pas mettre d'overflow, mais adapter la largeur minimum du div #contenu pour contenir l'image, de la même manière qu'un tableau en fait.
Pourriez vous m'indiquer comment procéder ?
Un rendu de ce petit test est visible
Ici
Merci Smiley cligne
Modifié par Sekisushai (19 Jan 2008 - 14:22)
le problème, c'est que je souhaite en fait avoir la colonne de gauche de largeur fixe, et celle de droite fluide, donc une colonne factice ne résoud pas mon prolème puisque la largeur est adaptable.
Seulement l'image depasse de son contenant, et je n'arrive pas à faire en sorte que la largeur du div contiennent toujours l'image..
Bonjour,

Un conteneur qui s'adapte à la largeur de son contenu: une cellule de tableau fait cela très bien.

À vue de nez il faudra utiliser un tableau de mise en forme ici.
C'est ma conception actuelle, j'essayais simplement d'éviter d'utiliser les tableaux pour la mise en forme, pour "respecter les standards" mais bon, on peut pas tout faire apparement... Je continue d'utiliser les tableaux alors.
Merci Smiley smile
Je trouve ça dommage d'utiliser un tableau dans un cas comme celui-ci qui ne demande pas le détournement d'une balise trop souvent malmenée.

Sekisushai, pourrais-tu nous donner la nature du contenu de la colonne de gauche?
Oui bien sûr, il s'agit d'un menu expansif (sur la hauteur de la colonne) de largeur fixée.
a écrit :
Je trouve ça dommage d'utiliser un tableau dans un cas comme celui-ci qui ne demande pas le détournement d'une balise trop souvent malmenée.
Qu'entends tu par là ? Si tu as une eventuelle solution, je suis preneur Smiley smile
Je souhaite 2 colonnes 100% de hauteur, dont une largeur fixe, l'autre adaptable au contenu et à la page, comme un tableau en fait... le tout centré.
En fait je n'arrive pas à comprendre ce que tu veux faire exactement.
Sekisushai a écrit :
dont une largeur fixe, l'autre adaptable au contenu et à la page.

Je ne comprends pas bien cette partie. D'après ce que je saisi, la largeur de la colonne de droite doit être dictée par son contenu. En d'autres termes, si la colonne de droite ne contient que "Hello world", elle mesurera quelque chose comme 75 pixels. Que se passe-t-il si le contenu est plus long que ce que la fenêtre permet?
Modifié par Benjamin D.C. (19 Jan 2008 - 19:47)
Eh bien d'après mon code, je positione une colonne de largeur 80% du body, en absolute.
Je fais de même avec une autre colonne de largeur 190px, en absolute, les deux colonnes se chevauchent et je met un padding left pour éviter de faire croiser les contenu.
Cependant, le bloc div qui constitue la colonne de droite, ne s'adapate pas à son contenu, mais seulement à la (page 80% de la page), est-ce plus clair ? Je remet le lien pour visualiser le problème :
Ici
Sekisushai a écrit :
Eh bien d'après mon code, je positione une colonne de largeur 80% du body, en absolute.
Je fais de même avec une autre colonne de largeur 190px, en absolute, les deux colonnes se chevauchent et je met un padding left pour éviter de faire croiser les contenu.
Cependant, le bloc div qui constitue la colonne de droite, ne s'adapate pas à son contenu, mais seulement à la (page 80% de la page), est-ce plus clair ? Je remet le lien pour visualiser le problème :
Ici

Ben heu… désolé mais je ne vois toujours pas. Smiley sweatdrop
Dans l'exemple que tu donnes, qu'aimerais-tu arriver à avoir comme comportement? Voir apparaître une barre de défilement? Que l'image se réduise? Que le bout d'image en trop soit masqué?
Bref, pour moi, ce n'est pas clair, peut-être que quelqu'un d'autre sera plus clairvoyant… Smiley cligne
Désolé, je vais essayer de m'exprimer plus clairement :
Lors du redimenssionnement de fenêtre, je souhaiterai que l'image ne dépasse pas de la colonne, mais que la colonne se reduise jusqu'à la limite ou elle contient encore l'image, après quoi ce sont les barres de défilement du navigateur qui apparaissent, au cas où la fenêtre se réduit encore.
J'vous avais dit qu'il fallait un tableau (ou un display: table-cell, ou un width bugué d'IE6). Smiley smile
Bon, comme je ne suis toujours pas sûr d'avoir bien saisi la demande ( Smiley sweatdrop ), voici une piste correspondant à ce que je pense que tu cherches à faire. Si ce n'est pas le cas, n'hésite pas à le signaler. Smiley cligne 
[#black][b]HTML[/b][/#]

<div id="menu">Colonne de gauche</div>
<div id="conteneur">
	<div id="contenu">Colonne de droite</div>
</div>

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

html,body {height:100%;}
body {padding:0 10%;}
#menu,#conteneur {min-height:100%;}
#menu {width:190px; position:absolute;}
#conteneur {margin-left:190px; overflow:auto;}
#contenu {float:left;}
Sujet clos
Aller à