28173 sujets

CSS et mise en forme, CSS3

[Résolu] Imbrication div

Bonjour

j'essaye en vain de faire une partie haute bannière, un menu côté gauche puis un contenu (#principal) côté droit. Je souhaite avoir ma page qui s'affiche dans la hauteur du navigateur avec une barre de défilement juste dans la partie contenu. J'ai tout essayé (pour moi mais visiblement pas encore la bonne solution !) et je ne sais plus quoi tenter ! Et d'ailleurs est-ce possible ? Je ne voudrais pas le scroll sur la fenêtre, mais faire défiler l'info dans la partie contenu. C'est peut-être pas la bonne méthode utilisée ???

Donc le code html
<html> 
<head> 
<meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
<LINK REL="stylesheet" TYPE="text/css" HREF="positionnement.css">
<Title>Histoire</title>
</HEAD>
<BODY>
<div id="conteneur">
	<div id="banniere">
		Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...Ceci est la bannière...
	</div> 
	<div id="menu">
		Ceci est le menu...<br />
		Ceci est le menu...<br />Ceci est le menu...<br />Ceci est le menu...<br />
	</div>
	<div id="principal">
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br />
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br />
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br />
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br /><br/>
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br />
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br />
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br />
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br /><br/>
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br /><br/>et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br />
		et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!et le texte !!!! yahoo !!!<br /><br />
	</div>
</div>
</body> 
</html>


le code css qui va avec
#conteneur {
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 0px; 
	padding: 0px;
	overflow: hidden;
	background-color:green;
	}
#banniere { 
	position: absolute; 
	top : 0px; 
	left : 75px;
	width : 750px; 
	height : 183px; 
	overflow: hidden;
	background-color:blue;
} 
#menu { 
	position: absolute; 
	top : 205px; 
	left : 5px; 
	width : 144px; 
	height : 317px;
	background-color:red;
} 
#principal { 
	position: absolute; 
	top: 190px;
	left: 165px; 
	width : 700px;
	height : 100%;
	overflow : auto;
	background-color: olive;
}


et le lien pour le résultat :
http://lbarbado.free.fr/essai_positionnement/essai.html

Merci

Loïc
Modifié par _Lolo (23 Dec 2007 - 03:42)
Bonjour,

_Lolo a écrit :
Et d'ailleurs est-ce possible ?

Oui et non. Plutôt non que oui.

C'est faisable avec le positionnement absolu, dans le genre suivant:
div#contenu {
position: absolute;
top: 150px;
bottom: 0;
overflow: auto;
}
Mais pas compatible IE6.

Après, on peut toujours employer des frames (pas une bonne idée pour diverses raisons...), ou des bidouilles diverses et variées ou alors un peu de Javascript pour IE6 (pour donner à div#contenu la bonne hauteur). C'est un peu lourd à mettre en place et pas super fiable.

Sinon, ça n'est pas lié au problème que tu rencontres mais ta page n'a pas de Doctype. Tu risques de rencontrer des problèmes à cause de ça.
Un peu de lecture:
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

_Lolo a écrit :
Je ne voudrais pas le scroll sur la fenêtre, mais faire défiler l'info dans la partie contenu.

Pourquoi, qu'est-ce qu'il a le scroll de la fenêtre? Il est pratique, facile à utiliser, accessible, etc. Il est bien moins problématique qu'un bloc de contenu figé avec une hauteur fixe et un overflow: auto.
Hello,

#conteneur {

	width: 100%;

	height: 100%;

	margin: 0px; 

	padding: 0px;

	overflow: hidden;

	background-color:green;

	}

#banniere { 
	width : 844px; 

	height : 20%; 

	overflow: hidden;

	background-color:blue;

} 

#menu { 
	width : 144px;

	background-color:red;
	
	float:left;

	height : 80%;

	overflow : auto;

} 

#principal { 
	width : 700px;

	height : 80%;

	overflow : auto;

	background-color: olive;

	float:left;
}


C'est quelque chose comme ça que tu voudrais ? ou alors je n'ai pas compris ^^

Ça donne ça http://vocotruyen.nuxit.net/test.html
oui oui c'est sûr ! Pourquoi faire simple quand on peut faire compliqué ?!
Bon ben je pense effectivement laisser tomber, et avoir la page enière qui défile. Je trouve plus pratique de n'avoir qu'une partie de la page à défiler et garder le reste fixe, les menus disponible même si ce principe élimine aussi un grosse partie du site avec une bannière fixe. ça se discute, je trouve cela plus design ... mais bon je ne vais pas en faire une pendule, je m'en passerai, je trouve juste dommage que ça ne fonctionne pas chez ie mais bon on ne se refait pas !

ouh là ! le temps que je réponde ces quelques lignes et pendant ce temps j'obtiens la réponse à la question ... bon, bon, bon, merci bien !

Et puis finalement en y regardant de plus près ce n'est pas vraiment ce que je veux. parceque tu remplaces mes pixels par du % et en fait j'ai bien une image dans ma bannière en fond et elle a une taille fixe pas un % de la taille de la fenêtre. Donc si tu as une idée avec une bannière en hauteur fixe et justement un contenu qui lui doit aller jusqu'en bas de la fenêtre et laisser une jolie barre de défilement ....
Modifié par _Lolo (22 Dec 2007 - 20:20)
Modérateur
bonsoir,

voilà un gabarit servit ici quelques avant la sortie de IE7 , il date et peut te servir a decouvrir les limites , frustration , et bug inherents à vouloir en passer par les css .


http://gcyrillus.free.fr/gabarits/faux-frame-ff-ie-quirk.html

Je te laisse découvrir ses quelques bugs ou défaut .
La plus grosse frustration te viendras de IE , car pour obtenir ce résulktat , on passe par le "mode quirk" , et en mode quirk , IE est trés limité en matiere de css .

une autre interface simili frame , qui date aussi , sans pied et avec une reprise d'un menu déroulant d'alsacréations , raccourci la page en hauteur et ouvre le menu , mise en evidence du bug si le menu ne tient pas dans la hauteur .
http://gcyrillus.free.fr/gabarits/simili-frame-extensible-fluide-et-scroll-a-la-roulette-IE-Firefoxe.html
on peut même remonter jusqu'a la banniere et rendre out le reste inaccessible à l'ecran.

Sinon , dans les doctypes valides , le frameset est aussi disponible en html 4.01 et xhtml 1.0 .

gc
Sujet clos
Aller à