28173 sujets

CSS et mise en forme, CSS3

[Résolu] Comment remplacer les frames ?

Bonjour,

Une question simple mais je n'ai pas trouvé de solution satisfaisante :
J'aimerais réaliser un site sur deux colonnes dont celle de gauche reste fixe (cette colonne contient le menu vertical du site et une image de fond) et celle de droite (qui contient le contenu du site) puissent utiliser une scrollbar verticale pour faire défiler verticalement le contenu du site.

J'ai trouvé des solutions mais celles-ci présentent des défauts de conceptions notamment sur la position de la scrollbar :

1ère solution (principal défaut, les scrollbars sont situés à la limite du block 2 et non complétement à droite de la fenêtre) :

<html> 
<head> 
	<title>Menu fixe</title> 
	<style type="text/css"> 
		body { 
			margin: 0; 
			padding: 0; 
			border: 0;
			background-color: green;
			overflow: hidden; 
		} 
		 
		#body2 { 
			position: absolute; 
			margin: 0 0 0 250px;
			padding: 0px;
			width: 640px;
			z-index: 5; 
			top: 0; 
			left: 0; 
			height: 100%; 
			background-color: grey;
			overflow: auto; 
		} 
 
		#fix1 { 
			position: absolute; 
			z-index: 6; 
			left: 0px; 
			top: 0px; 
			width: 250px; 
			height: 600px;
			color: white;
			background-color: blue; 
		} 
	</style> 
</head> 
<body> 
	<div id="body2"> 
		<br /><br /><br /><br /><br /><br /><br /><br /> 
		Ceci est la partie principale de la page. C'est à dire le contenu du block "body2". 
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
		Cette&nbsp;partie&nbsp;contient&nbsp;une&nbsp;scrollbar&nbsp;verticale&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;et&nbsp;une&nbsp;horizontale&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
	</div> 
	<div id="fix1"> 
		Je suis la partie fixe 1. Je suis placé <b>a gauche</b> de la partie principale ou block "body2". Si vous faites défiler la page, vous verrez le texte du block "body2" passer <b>a cote de</b> moi. 
	</div> 
 
</body> 
</html>


2ème solution : Celle développée par andreas n°7(que je félicite au passage pour ces templates) qui présente sous IE un défaut de positionnement de la scrollbar (pas complètement à droite de la fenêtre lorsque l'on place dans la colonne de droite d'autres balises div) et utilise la propriété fixed qui n'est pas prise en compte par IE6 :

body > #sidebar
{position:fixed;}


Si parmi-vous vous avez d'autres solutions, je serais ravi de les étudier.
Merci
Modifié par MacBee (19 Jul 2006 - 19:16)
Merci pour cette réponse aussi rapide.
Mais non ce code ne donne pas réellement ce que je recherche.
Le voici quelques peu modifier pour le rendre sur deux colonnes et surtout la colonne de droite avec une largeur fixe (exemple de 450 px) et non 100%.


<!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>
<title>Frames en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin: 0;
padding:0;
position: absolute;
width: 100%;
height: 100%;
font-family: verdana, arial, sans-serif;
}
.haut {
width: auto;
height: 126px;
background-color: #06C;
color: #fff;
font-size: 36px;
padding: 10px;
}
.conteneur {
height: 100%;
width: 100%;
}
.gauche {
position: absolute;
left: 0;
width: 180px;
height: 600px;
background-color: blue;
}
.frame {
margin-left: 180px;
width: 450px;
height: 338px;
background-color: grey;
overflow: auto;
font-size: 14px;
}
.bas {
width: auto;
height: 30px;
background-color: #06C;
color: #fff;
font-size: 12px;
padding: 10px;
}
ul, li {margin: 0; padding: 0; list-style-type: none;}
ul {margin-top: 60px; margin-left: 20px;}
-->
</style>
</head>

<body>
<div class="conteneur">
	<div class="gauche">
	</div>
	<div class="frame"> 
	  <h1>Une présentation sans Frames !</h1>

	  <p>Bonjour, voici un bloc scrollable : vous pouvez faire d&eacute;filer son 
	    contenu... sans alt&eacute;rer le reste du site et sans utiliser d'iframes.</p>
	  <p>Il est &eacute;galement possible de rendre ce bloc dynamique, c'est &agrave; 
	    dire de modifier son contenu pour simuler les jeux de cadres (frame) : votre 
	    site restera fixe mais cette partie centrale variera en fonction des choix 
	    dans le menu. </p>
	  <p>Voir pour cela la seconde partie du tuto : "simuler les 
	    frames en CSS" (des connaissances minimales en PHP sont n&eacute;cessaires)</p>
	  <p>Blablabla blablabla blablabla blablabla blablabla blablabla</p>

	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>

	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>

	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>

	  <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla</p>
	</div>
</div>

</body>
</html>


La largeur fixe de la frame fait apparaître la scrollbar à 450 px et non complétement à droite de la fenêtre.
C'est ce défaut que je présente dans le premier post que je cherche à éliminer.
Encore merci pour ta réponse. Je continue mes investigations Smiley cligne
j'ai édité mon post quand je me suis aperçu que c'était la même chose et que ça n'allait pas t'avancer !
mainteantn, je crois avoir compris ce que tu voulais faire... ça semble mission impossible Smiley smile

bonne recherche et encore désolé de mon intervention Smiley cligne
S'il s'agit juste d'une petite facilité ergonomique qui consiste à toujours garder un menu de navigation à l'écran même quand on fait défiler la page, la propriété CSS background: fixed est faite pour ça. Certes, elle n'est pas implémentée par IE6 (il me semble qu'elle l'est avec IE7, à vérifier), mais un repli sur une solution dégradée (un positionnement absolu par exemple, ou même un positionnement statique) est tout à fait acceptable.

Ensuite, tout dépend de la situation. S'il y a un client qui veut absolument que tout soit parfait dans IE MAIS que l'on arrive à faire faire à IE6 ce qu'il ne sait pas faire, il risque d'y avoir un peu d'explications à avoir…

On a donc les solutions suivantes :

1 – Si la fonctionnalité ergonomique est plus importante que l'accessibilité ou surtout que l'efficacité de l'indexation des pages, les frames sont tout à fait adaptées. Ne pas oublier que les frames ne sont pas une technologie dépréciée : certains usages des frames ont été remplacés par d'autres choses (principalement la génération automatisée de contenu via les langages serveur), mais d'autres persistent. D'ailleurs, le Doctype Frameset existe aussi en XHTML !

2 – S'il s'agit juste d'une coquetterie parce que « tout de même ça fait plus sympa », une solution hybride en position fixed avec dégradation dans IE6 me semble un compromis intéressant. Si on fait les choses proprement (commentaire conditionnel qui va bien), ça reste rétro-compatible avec IE5 et IE6, tout en laissant à IE7 la possibilité d'appliquer la fonctionnalité avancée.

Dans tous les cas, je déconseille fortement les bidouillages à base de positionnement absolu, de div en height: 100% et de body et html en overflow: hidden. Ça a l'air séduisant comme ça, mais :
– ça reste du bidouillage ;
– ça peut poser un certain nombre de problèmes ergonomiques à certains navigateurs (une barre de défilement pas vraiment réactive, pas toujours activée via la molette, etc).
salut,

css principale :

html,body {
margin:0;
padding:0;/*  ça c'est pour se simplifier la vie  [smile]  */
}
#gauche {
position:fixed;
width:18%;
left:0;
top:;
}

#frame {
margin-left:20%;
}


commentaire conditionnel :

<!--[if IE]>

<![endif]-->

ou

<!--[if ltIE7]>

<![endif]-->

y placer css spéciale IE

html,body {
overflow:hidden;
height:100%;
}
#gauche {
position:absolute;
}
#frame {
overflow:auto;
height:100%;
}
Merci pour vos réponses.

Je n'ai pas pu vous répondre plus rapidement. J'était hier en train de négocier cette présentation pour supprimer la largeur fixe de la frame central qui pose le problème de compatibilité entre les navigateurs.

@clb56 : ton code fonctionne très bien mais présente ce pb de compatibilité entre les navigateurs. Pour t'en rendre compte, il suffit de rajouter la ligne width dans #frame :

#frame {
width:480px;
margin-left:20%;
}


@mpop : Merci pour ces réflexions. Oui, il s'agit bien d'un problème d'ergonomie et d'esthétique avec une personne très à cheval pour la présentation et très perfectionniste.
Les frames posent le problème du référencement même si aujourd'hui certains moteurs prennent en compte cette technique. Personnellement, je préfère m'en passer. J'ai vu trop de sites ou le contenu s'affichait dans la colonne de gauche au lieu de la frame central. Cela fait fuire les internautes, moi le premier.
J'ai retenu ta 2ème remarque (solution développée par Andreas. Voir lien plus haut) qui utilise un mode dégradé pour IE mais reste un bon compromis. Par contre, l'emploi de bidouillages à base de positionnement absolu, de div en height: 100% et de body et html en overflow: hidden, etc. est d'usage et posent ces problèmes ergonomies que tu cites.
Pour résoudre l'un de ces problèmes, j'ai dû développer un petit javascript (abus de langage, je devrais écrire un script à base de javascript) pour venir corriger les effets pervers de l'overflow sous IE.

...
var oBody = document.body;
if (browser=="Microsoft Internet Explorer" && version>=4 && version<7) {
	oBody.style.overflowX  = "hidden";
	oBody.style.overflowX  = "visible";
	oBody.style.width="100%";
	oBody.style.height="100%";			
	oBody.style.overflow = "auto";
}
//On corrige un defaut de Internet Explorer avec une utilisation de la propriété overflow:hidden; sur l'élément Body.
...

Quelle bidouillage Smiley decu Smiley decu Smiley decu .
Le pire, si j'enlève l'une des premières lignes (oBody.style.overflowX = "hidden"; ou oBody.style.overflowX = "visible";) cela ne fonctionne plus. A ne rien y comprendre. Bravo Bill pour la conformité au normes W3C.

Ma question reste simple : comment ce passer de ces bidouillages ?
Merci

PS: je n'ai pas encore trouvé le code qui convient. Je me rabat pour le moment et pour avancer sur le code de Andreas. Si je trouve la solution, je la publirais sur ce post Smiley cligne
J'ai trouvé une solution qui convient.
En fait le code présenté par clb56 est convenable. Je suis parti de ce code pour finaliser la solution que je vous présente. Dans la div frame, j'ai rajouté une div content pour placer les différents éléments de la page.
C'est cette div content qui est définie en largeur :

Code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Frames en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<!--[if IE 6]>
	<link rel="stylesheet" href="frameIE.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="gauche">
	Menu Verticale<br />
	<ul>
		<li>Menu 1</li>
		<li>Menu 2</li>
		<li>Menu 3</li>
		<li>Menu 4</li>
		<li>Menu 5</li>
		<li>Menu 6</li>
	</ul>
</div>
<div id="frame">
	<div id="content"> 
	  <h1>Une présentation sans Frames !</h1>

	  <p>Bonjour, voici un bloc scrollable : vous pouvez faire d&eacute;filer son 
	    contenu... sans alt&eacute;rer le reste du site et sans utiliser d'iframes.</p>
	  <p>Il est &eacute;galement possible de rendre ce bloc dynamique, c'est &agrave; 
	    dire de modifier son contenu pour simuler les jeux de cadres (frame) : votre 
	    site restera fixe mais cette partie centrale variera en fonction des choix 
	    dans le menu. </p>
	  <p>Voir pour cela la seconde partie du tuto : "simuler les 
	    frames en CSS" (des connaissances minimales en PHP sont n&eacute;cessaires)</p>
	  <p>Blablabla blablabla blablabla blablabla blablabla blablabla</p>

	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>

	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>

	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>

	  <p>blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla blablabla blablabla blablabla blablabla blablabla</p>
	  <p> blablabla</p>
	</div>
</div>
</body>
</html>


CSS (fichier style.css) :

html,body {
margin:0px;
padding:0px;
background-color: yellow;
}

#gauche {
position:fixed;
width:180px;
height:100%;
left:0px;
top:0px;
background-color: blue;
}

#frame {
background-color: grey;
margin:0 0 0 180px;
border: 0px none;
}

#content {
background-color: #ccc;
padding:20px 5px;
width:480px;
height:100%;

/*border:1px solid blue;*/
}


Enfin le code CSS pour IE (fichier frameIE.css) :

/**************** IE fixes ****************/

html,body {
overflow:hidden;
height:100%;
background-color: red;
}

#gauche {
position:absolute;
}

#frame {
overflow:auto;
height:100%;
}


J'ai volontairement spécifié des couleurs de fond pour bien distinguer les différentes zones et leurs influences. N'oublier pas de les retirer ou les modifier. Smiley cligne

PS : Cette solution m'a permis de supprimer le code Javascript qui corrigait les imperfections de IE. C'est déjà un bon point. Reste quand même des incompatibilités de certaines fonctions dans IE (overflow et la gestion de la molette). Mais cela est un autre problème.
Modifié par MacBee (19 Jul 2006 - 19:29)
Il me reste une question d'ordre connaissance générale :

Que signifie cette écriture ?

#gauche {
position:absolute;
...
}
body > #gauche
{position:fixed;}

Esc-ce simplement pour tout les navigateurs #gauche a une position "fixed" et pour les navigateur telque IE qui ne prennent pas en compte les directives W3C la position sera "absolute" ?
C'est comme cela que je le comprends mais j'avoue avoir des doutes.
Le symbol ">" me perturbe.

Merci de vs éclairages sur le sujet.
MacBee a écrit :
Il me reste une question d'ordre connaissance générale :

Que signifie cette écriture ?

#gauche {
position:absolute;
...
}
body > #gauche
{position:fixed;}

Esc-ce simplement pour tout les navigateurs #gauche a une position "fixed" et pour les navigateur telque IE qui ne prennent pas en compte les directives W3C la position sera "absolute" ?
C'est comme cela que je le comprends mais j'avoue avoir des doutes.
Le symbol ">" me perturbe.

Merci de vs éclairages sur le sujet.



> est le sélecteur d'enfants directs :

body>ul {

}


donne tous les ul enfants directs de body.
Ce sélecteur n'est effectivement pas reconnu par IE dans les versions antérieures à la 7.
Il s'agit donc d'un hack qu'il convient de ne pas utiliser au profit des commentaires conditionnels comme indiqué dans mon précedent post.

Tu sais celui que tu trouves "convenable" Smiley cligne
<edit>
ah là là, cette manie des dimensions fixes ^^
Sinon la solution du double conteneur pour être assez radicale au niveau html n'en est pas moins assez peu problématique au final et est le plus souvent très efficace.
</edit>

Christian
Modifié par clb56 (20 Jul 2006 - 11:13)
Je conviens que fixer les dimensions n'est pas une pratique à garder comme référence.
Préférer le dimensionnement relatif est conseillé et j'adhère à cette technique.
Dans le cas précédent, il s'agit d'une demande du donneur d'ordre. Alors peux pas faire autrement. D'où la nécessité de trouver un code qui convienne.

Je profite au passage pour te remercier de cette solution que j'ai ensuite adapté pour mes besoins.
Sujet clos
Aller à