28172 sujets

CSS et mise en forme, CSS3

Mise en forme, cadres statiques et cadre a scroll

Bonjour,

Je lutte depuis (très) longtemps sur un problème de mise en page et bien qu'ayant cherché un peu partout je n'ai encore trouvé aucune réponse satisfaisante.

Ce que je cherche a faire c'est une mise en page de ce style :

| 111111 |
| 233333 |
| 233333 |
| 233333 |
| 233333 |
| 233333 |

Les "1", "2" et "3" sont les cadres attendus, le tout centré en milieu de page.
voici les critères que ces cadres demandent :

Le cadre 1
-centré
-largeur=1000px
-hauteur=120px
-toujours visible (il ne doit pas bouger)


Le cadre 2
-débute sous le cadre 1
-largeur =120px
-hauteur=jusqu'en bas de l'écran
-hauteur minimale =500px (scroll si la zone d'affichage de l'internaute est trop petite)


Le cadre 3
-collé a droite du cadre 2
-largeur=880px (de maniere a ce que la largeur des cadre 1 + 3 soit égale a celle du cadre 2)
-hauteur=jusqu'en bas de l'écran
-hauteur minimale =500px
-scroll : uniquement pour son propre contenu

L'idée générale est donc d'avoir les cadres 1 et 2 toujours visibles, ils ne doivent pas bouger, le cadre 3 quand a lui doit posséder un scroll lorsque son contenu est trop grand, mais le scroll ne doit etre actif que dans sa partie, sans faire bouger les cadres 1 et 2.

J'ai essayé pas mal de choses, mais je n'ai encore rien trouvé qui soit compatible avec tous les navigateurs ..
De plus, les infobulles JS que j'utilise sur des éléments du cadre 3 ont tendance a mal prendre en compte les positions voulues (décalage en hauteur et/ou largeur induites par les cadres 1 et 2).

Voila, si vous avez des idées, suggestions ou même une solution, je suis à l'écoute Smiley cligne

Merci d'avance pour votre aide.

PS: hésitez pas a me demander des précisions si j'ai pas été clair.
Il y a peut être mieux à faire mais tu peux essayer ça:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css" media="screen">
            
            #cadre {
                width: 1000px;
				margin-left: auto; 
				margin-right: auto;
				border:none;
            }
            #top {
                width: 1000px;
				height: 120px;
				background-color: red;
				border:none;
            }
            #left {
                width: 120px;
				min-height: 500px;
				background-color: blue;
				float:left;
				border:none;
            }
            #right {
                width: 880px;
				min-height: 500px;
				background-color: green;
				float:left;
				border:none;
            }
            
        </style>
		
    </head>
    <body>
        <div id="cadre">
			<div id="top"></div>
			<div id="left"></div>
			<div id="right"></div>
		</div>
    </body>
</html>

Modifié par Omanu (23 Sep 2010 - 17:15)
Le problème c'est que lorsque le cadre principal ("right") contient trop de choses, le scroll apparait pour la page totale et non pas pour le cadre right uniquement. Du coup c'est l'entièreté de la page qui descend, or moi je cherche à ce que les cadres top et left ne bougent pas et que le scroll n'affecte que le contenu du cadre right.
Modifié par Makari (23 Sep 2010 - 17:57)
Ah oui j'avais oublié

#right { 
                width: 880px; 
                min-height: 500px; 
                background-color: green; 
                float:left; 
                border:none; 
                overflow:auto;
}
Quand l'attribut height de right n'est pas défini ca ne fonctionne pas, le scroll apparait pour la page entiere, et l'attribut "height:100%" n'a pas d'effet.

Je me demande si c'est simplement possible ..
Je suis en train de m'orienter vers une autre solution, à savoir récupérer via du JS la taille de la zone d'affichage du navigateur du visiteur et le mettre en cookie, puis de l'utiliser pour initialiser l'attribut height.
Bonjour,

Dans les outils (depuis la section Apprendre) tu trouvera une galeries de templates, dont un fait exactement ce que tu souhaites.

Pour le scroll, oui, c'est possible, mais pas une bonne idée. Tu ne peux pas dire à un bloc de prendre 100%-unNombre comme hauteur. Et si tu fixe une hauteur convenant à TON écran, tu peut être sûr que la chose posera des problèmes à d'autres utilisateurs. Il est préférable de laisser les blocs s'étendre.
Je vais jeter un oeil dans au template (si je le trouve, ca a pas l'air gagné) mais sinon pour le 100% - valeur ca reste possible, et c'est actuellement la seule solution que je vois.
Pour info (on sait jamais ca pourrait servir à d'autres) j'utilise une fonction JS qui récupère la taille de la zone d'affichage (selon le navigateur, car ils n'ont pas tous les mêmes références) et je lui soustrais la valeur du cadre du haut, j'obtiens donc la bonne valeur a mettre dans Height.
Cette valeur est stockée dans un cookie qui sera utilisé dans le css (Height:<?php =$_COOKIE['hauteur']; ?>px; ).

Le seul défaut que je vois actuellement est que la taille n'est prise en compte qu'apres rechargement de la page (mais dans mon cas ce n'est pas vraiment gênant), c'est a dire que si l'on réduit la fenetre du navigateur il faut recharger la page pour que le nouveau cookie soit pris en compte.
Modifié par Makari (24 Sep 2010 - 15:40)
Bonjour,

Je cherche à faire la même chose que toi.

J'ai vu qu'il faut mettre un style

html, body { height : 100%; }


Ça donne un height, qui peut être en suite hériter par les conteneur en dessous. Ça c'est la théorie, en pratique, ça fait apparaitre systématiquement l'ascenseur de la fenêtre... Mais j'ai pas eu le temps de faire ça sur une page propre, il y a peut être d'autres choses qui interfère dans mon code.

Tu peux aussi regarder https://www.me.com (il est possible de créer un compte gratuit), ça utilise cela à tour de bras !
Modifié par Yaka (30 Sep 2010 - 00:17)
La solution que j'ai trouvée consiste à mettre tout en position absolue, en mettant la position "top" ET "bottom".

cela donne : 


<html>
<head>
<title>Fausse frame</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {margin: 0; padding: 0;}
html, body {width: 100%; height: 100%; overflow: hidden;}
#header-div {position: absolute; top: 0px; height: 40px; left:0px; right: 0px; border: 1px solid #000;}
#body-div {position: absolute; top: 40px; bottom: 30px; left: 0; right: 0;}
#body-menu-div {position: absolute; top: 0px; bottom: 0px; left: 0; width: 200px; border: 1px solid #000;}
#body-content-div {position: absolute; top: 0px; bottom: 0px; right: 0; left: 201px; border: 1px solid #000; overflow: auto;}
#footer-div {position: absolute; bottom: 0px; height: 29px; left:0px; right: 0px; border: 1px solid #000;}
</style>
</head>

<body>
<div id="header-div">This is the header container</div>
<div id="body-div">
<div id="body-menu-div">This is the navagation container</div>
<div id="body-content-div">
content for scrolling div<br>
content for scrolling div<br>
</div>
</div>
<div id="footer-div">This is the footer container</div>
</body>
</html>


Donc voilà, ça marche sans Javascript, mais ce n'est pas très fluide.
Sujet clos
Aller à