28173 sujets

CSS et mise en forme, CSS3

Mise en page complexe - Fixe + Fluide

Bonjour,
Je souhaite réaliser un calendrier complet, à l'instar de Live Calendar ou Google Calendar.
Réside une difficulté au niveau de la mise en page, je ne parviens pas à réaliser ce que je souhaite. L'image ci-dessous résume mon projet. La difficulté essentielle est d'obtenir une partie droite fluide ayant une largeur de 100% moins la largeur du bloc à gauche, tout en sachant que dans la partie fluide, il y a 1 bloc de largeur fixe à gauche et 1 à 7 colonnes de largeur variable à droite. La partie fluide doit également être scrollable en hauteur...
Si quelqu'un a des idées, elles sont les bienvenues !
Merci d'avance
upload/9288-miseenpage.png
J'ai une solution qui marche sur mon FF2.0
Ca peut être une base ?

Pour les colonnes, j'ai fait un peu n'importe comment, il faut chercher un article sur la présentation en colonnes.
La position:fixed ne marche pas avec IE6, mais c'est normal, alors il faut faire autrement.

Pour la table et les largeurs de colonnes identiques, j'ai pensé à ceci :
Laisser la table calculer les largeurs de ses colonnes qui seront égales parce qu'on y met un contenu identique ( ).
Puis y mettre un <div> de class="contenu-cellule", avec un float:left qui sortira du flux et n'influera pas sur la largeur des colonnes

Ca marche avec FF2.0
Ce qui m'intrigue, même si c'est le résultat que je souhaite, c'est que même si la table est trop large, elle reste à droite de la colonne flottante sans passer en dessous.

C'est ici
Salut,

Peux être que ça peut te donner des idées ... ça fonctionne que sous chrome j'ai l'impression.
J'ai pas le temps de creuser l'idée dsl.


<!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=utf-8" />
<title>Document sans nom</title>
<style>
div{float:left;}
</style>
</head>

<body>
<div style="height:500px;position:relative;float:none;background-color:green;">

<div style="width:200px;height:500px;background-color:#a35192;"></div>
<div style="width:100px;height:500px;background-color:#6699ff;"></div>

<div style="padding:0 0 0 300px;position:absolute;height:500px;float:none;display:table;width:100%;">
<div style="display:table-cell;width:14.3%;height:500px;background-color:#ff6600;"></div>
<div style="display:table-cell;width:14.3%;height:500px;background-color:#ff893b;"></div>
<div style="display:table-cell;width:14.3%;height:500px;background-color:#ff6600;"></div>
<div style="display:table-cell;width:14.3%;height:500px;background-color:#ff893b;"></div>
<div style="display:table-cell;width:14.3%;height:500px;background-color:#ff6600;"></div>
<div style="display:table-cell;width:14.3%;height:500px;background-color:#ff893b;"></div>
<div style="display:table-cell;width:14.3%;height:500px;background-color:#ff6600;"></div>
</div>



</div>
</body>
</html>

Modifié par pfoofen (09 Aug 2009 - 16:57)
Sujet clos
Aller à