28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Encore et toujours des problèmes de DIV...

Bonjour à tous.

Après moult recherches, je me permets de faire ce post pour quérir votre aide.
Mon besoin est assez simple en fait.
L'idée est d'avoir un résultat tel que celui-ci:
http://web.covertprestige.info/test/18-colonnes-factices-fluides-et-entete-piedpage-1.html

Avec cependant une petite subtilité. Il faudrait que les colonnes de gauches et de droite occupent 100% de la hauteur disponible (l'espace entre le header et le footer). De même, il faudrait que la div centrale de contenu occupe elle aussi 100% de la hauteur disponible (là encore l'espace entre le header et le footer). J'ai en effet besoin d'y mettre un background, ainsi que du contenu "scrollable".
Je ne peux évidemment par mettre de hauteurs statiques, car j'ai besoin que ma page s'adapte automatiquement à la taille de la fenêtre de l'utilisateur.

Quelqu'un aurait une idée, car pour ma part, je suis arrivé au bout des miennes !

Bien à vous.
Modifié par arioch (20 Dec 2007 - 15:25)
bonjour a toi,

J'ai pas réellement compris ton besoin. Car en lisant ce que tu veux faire, je me suis dis... c'est ce qu'il font dans l'exemple que tu donne.


tu veux rajouter une scrollbar dans ton cadre au millieu c'est ca ta subtilité principale ?
Les divs: premier (colonne de gauche), deuxieme (colonne de droite) et contenu (colonne centrale) n'occupent pas réellement une taille de 100% en fait. Elles ont une hauteur dépendante de la taille de ce qu'elles contiennent.

Hors d'une part, si j'applique un background à une de ces colonnes, le background ne s'affichera que sur la hauteur du div.
D'autre part, si j'augmente considérablement le contenu d'une de ces divs, la taille de la fenêtre augmente avec une belle scrollbar à droite.

J'aimerais que de base, la hauteur de ces divs soit de 100% de ce qui est disponible et que si le contenu dépasse et qu'une scrollbar verticale est nécessaire, elle apparaisse dans le div correspondant.

Est-ce un peu plus clair ?

PS: Merci de ta réponse si rapide.
je pense comme ca a la propriété 

overflow : scroll;


Je pense que si tu met ca pour les 3 divs (gauche contenu droite) ca devrait marcher.

Edit:

En faite, vaut mieux utiliser : 

overflow : auto;


qui met une scrollbar quand il y a besoin Smiley smile
Modifié par muby (20 Dec 2007 - 12:04)
Oui, j'ai effectivement mis cette propriété (overflow: auto)
Mais le problème reste entier.
La hauteur des 3 divs n'étant pas fixée, elle s'adapte en fonction du contenu, donc si l'overflow marche correctement horizontalement, il ne fonctionne pas verticalement et les divs continuent de s'étendre à l'infini.
Idem pour la hauteur et le background.
Voici ma page de test (consultable également ici). Le but est de faire en sorte indépendamment du contenu que la div de menu (à gauche) occupe toute la hauteur disponible, et qu'il en soit de même pour la div de contenu:


<!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" xml:lang="fr" lang="fr">

<head>
  <style>
html, body
{
  margin: 0px;
	padding: 0px;
	border: 0px;
	height: 100%;
}

div#page {
  position: relative;
  min-height: 100%;
}
  
div#header {
    height: 30px;
		text-align: center;
		border: 1px solid green;
		background-color: #DDD;
}
  
div#menu {
  float: left;
  width: 200px;
	border: 1px solid yellow;
	height: auto;
	overflow: auto;
	background-color: #AAA;
}
  
div#content {
  padding: 1px 0;
  /* margin: 0px 0px 0px 210px; */
	border: 1px solid purple;
	overflow: auto;
	background-color: #BBB;
}
  
div#footer {
  height: 80px;
  clear: both;
}

div#footer_content {
	border-top:2px solid red;
	bottom:0pt;
	height:3em;
	left:0pt;
	line-height:2.8em;
	position:absolute;
	text-align:center;
	width:100%;
}
  </style>
  <link rel="shortcut icon" href="/favicon.ico"/>
  <!--[if lte IE 6]>
  <style type="text/css">
    div#page {height: 100%;}
  </style>
  <![endif]-->
</head>

<body>
<div id="page">
  <div id="header">header</div>
  <div id="menu">Menu</div>
  <div id="content">
    contenu
  </div>
  <div id="footer">
    <div id="footer_content">Footer</div>
  </div>
</div>
</body>
</html>
salut,
arioch a écrit :
Oui, j'ai effectivement mis cette propriété (overflow: auto)
Mais le problème reste entier.
La hauteur des 3 divs n'étant pas fixée, elle s'adapte en fonction du contenu, donc si l'overflow marche correctement horizontalement, il ne fonctionne pas verticalement et les divs continuent de s'étendre à l'infini.
Idem pour la hauteur et le background.

Qu'est-ce que tu appelles "fonctionner correctement" en parlant de l'overflow ? Tant que ne spécifie pas de hauteur pour ton conteneur, il est normal que celui-ci s'allonge en fonction de son contenu.

Par ailleurs, la réalisation de 2 vraies colonnes n'est pas réalisable de façon fiable sur tous les navigateurs pour le moment (la faute à l'implémentation incomplète des propriétés CSS par les uns et les autres). Il faut se contenter des colonnes factices, ou se tourner vers un tableau de présentation à 2 cellules.
Il est vrai que moi, j'avais dans l'idée que tu fixerai ton header à 20%, ton contenu a 70% et ton footer a 10%, alors la, la balise overflow prendrai tout son sens. sinon refere toi a ce que tu t'a dis thomas.
Effectivement, c'était simplement pour expliquer à Muby mon soucis et le fait que l'overflow ne changeait rien puisque la hauteur n'était pas fixée.
D'après ce que j'en lis, les colonnes factices ne régleront pas mon problème.

Sinon, j'ai tenté la technique du tableau avec deux cellules, mais mon problème a été le suivant:
Sous FF, aucun soucis. Mon tableau occupait parfaitement et exactement comme il le fallait 100% de la page.
Sous IE, la taille max utilisée n'était pas celle de la page, mais semble-t-il, celle de la fenêtre. J'avais donc une scrollbar sur ma fenêtre et il ne m'en faut pas.
Une solution pour ce problème de table qui me permettrait de contourner le problème précédent ?
Thomas D. a écrit :
la réalisation de 2 vraies colonnes n'est pas réalisable de façon fiable sur tous les navigateurs pour le moment

Juste pour compléter les propos de Thomas:
il est en fait possible de créer 2 colonnes de même hauteur mais cela implique de pouvoir déterminer celle qui occupera le plus de hauteur (sans pour autant devoir connaître sa hauteur). Dans ce cas, on pourra passer par l'utilisation de positions:


[#black][b]HTML[/b][/#]

<div id="conteneur">
	
<div id="gauche">Colonne de gauche</div>

<div id="droite">Ceci est la colonne de gauche qui occupera une hauteur toujours plus importante que celle de la colonne de gauche.</div>

</div>


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

#conteneur {position:relative; width:200px;}
	
div div {width:50%;}
	
#gauche {position:absolute; height:100%;}
#droite {padding-left:50%;}
Benjamin D.C. a écrit :

Juste pour compléter les propos de Thomas:
il est en fait possible de créer 2 colonnes de même hauteur mais cela implique de pouvoir déterminer celle qui occupera le plus de hauteur (sans pour autant devoir connaître sa hauteur).
Oui, mais c'est pas du jeu, ça Smiley langue Smiley lol
Bonjour,

Étant l'auteur de la page de test prise comme référence (page de test sur Covert Prestige, indiquée dans le premier message du sujet), je peux affirmer que 1) elle ne correspond pas au besoin exprimé et 2) l'adapter à ce besoin sera passablement ardu, et casse-gueule.

Pour le premier point, il faut bien comprendre que cette page de test ne crée pas des colonnes de même hauteur, mais crée une illusion graphique grâce à la technique des colonnes factices. Bref, c'est du trompe-l'oeil.

Pour le deuxième point, je me contenterai de revenir sur quelques contraintes de la mise en page CSS:
1. la notion de «page-écran» n'existe pas vraiment en CSS;
2. la hauteur du viewport (zone d'affichage du navigateur) est plus ou moins récupérable en CSS, mais c'est très limité...;
3. on ne peut pas faire d'opération mathématique du style «hauteur de la page» moins «hauteur de l'en-tête» moins «hauteur du pied de page» (quand bien même on connaitrait ces différentes valeurs).

Bref, le type de mise en page demandé est assez casse-gueule. Il y a cependant un mécanisme CSS qui marche relativement bien pour cela: le positionnement absolu.
div#central {
	position: absolute;
	top: 50px;
	bottom: 50px;
}

Problèmes:
1. pas implémenté par IE6 (ok IE7 et autres navigateurs récents);
2. il faut connaitre la hauteur exacte, en pixels, pourcentages ou à la rigueur en EM, des pied de page et en-tête.

Enfin, on a une restriction pas purement technique mais ergonomique: on déconseille généralement d'utiliser les barres de défilement interne, tout simplement parce que c'est moins pratique que la barre de défilement globale du navigateur.


Au final, on peut envisager:
- l'utilisation de Javascript pour dimensionner le bloc central, avec un mécanisme de dégradation gracieuse si JS n'est pas activé (hauteur par défaut);
- l'utilisation du positionnement absolu avec un mécanisme de dégradation gracieuse pour IE6 (hauteur par défaut, ou bien hauteur par défaut ET script JS);
- l'utilisation de frames (ben oui...);
- peut-être quelques bidouilles de positionnement CSS.

Je ne développe aucune de ces solutions, vu le peu d'intérêt que j'ai pour ce type de mise en page qui représente pour moi une erreur ergonomique (sauf exceptions, bien sûr).

Bonne continuation. Smiley smile
Les hauteurs respectives du header et du footer sont connues.
Je vais donc tenter d'implémenter ça via de l'absolute (non, pas la vodka...) et du javascript pour IE6 puisque le design est de toutes façons destiné à une application basée principalement sur du JS.
Je suppose qu'il est assez aisé de récupérer la taille du viewport via du JS.

Dans tous les cas, merci pour la rapidité à laquelle vous avez répondu et pour la pertinence de vos réponses.
Le Web minitel à rebours de toute la logique du media continue à faire ses ravages, manifestement.

Mais ce n'est pas grave: il suffit en général d'aller voir le site suivant sur la liste fournie par Google quand on ne veut pas assumer à la place du décideur têtu ce type de défauts ergonomiques des plus élémentaires.

sic
Modifié par Laurent Denis (20 Dec 2007 - 16:03)
Fort heureusement, l'application à laquelle ce design est destiné ne sera pas indexée sur les moteurs de recherche. Donc peu de chance qu'un utilisateur décide d'aller sur le site suivant de la liste fournie par Google.

Ouf... il s'en est fallu de peu...
Modifié par arioch (20 Dec 2007 - 16:12)
Sujet clos
Aller à