28172 sujets

CSS et mise en forme, CSS3

Problème de mise en page en %

Bonjour à tous,
j'ai un petit probleme de mise en page sur mon site internet :
Voici le code : 


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>Fragments</title>
<style>
html,body {
	height: 99.8%;
	width: 99.8%;
	margin:0%;
	padding:0%;
	background-color:black;  
		margin-left: auto;
	margin-right: auto;
}
#global {
	
	/* ie6 : */width:auto!important;
	width:100%;/* fin adatation IE6 */
	min-width: 100%;
	
	/* ie6 : */height:auto!important;
	height:100%;/* fin adatation IE6 */
	min-height: 100%;
	
	background-color:black;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid white;
}
.menu {
	border: 1px solid white;
	background-color:black;
	position:absolute;
	width:280px;
	color:white;
	top:0;
	left:0;
	right:0;
	height: 99.6%;
}
#contenu {
	background-color:white;
	padding-left:280px;
	height:730px;
}

div#barremenu{
width:100%;
background-color:yellow;
height:40px;
}
#reste{
width:100%;
height:688px;
overflow-y:auto;
}

</style>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<div id="global">
<div class="menu">
	ICI
</div>
<div id="contenu">
<div id='barremenu'>
	BANDEAU
 </div>
 <div id='reste'>
RESTE11<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	RESTE<br/>	
	<br/>	<br/>	
	
	PIED DE PAGE
	</div>
</div>
</div>
</body>
</html>


J'aurais aimé que div "reste" prenne 100%-40px de la hauteur de l'ecran, et de créer une scrollbar si ça dépasse mais sur la div pas sur la page, car j'aimerais que ma div "menu" et "barremenu" reste toujour fixe à l'ecran.

Alors j'ai bien pensé faire : 

#contenu {
	background-color:white;
	padding-left:280px;
	/* ie6 : */height:auto!important;
	height:100%;/* fin adatation IE6 */
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
}

div#barremenu{
width:100%;
background-color:yellow;
position:absolute;
top:0;
left:280px;
height:40px;
}
#reste{
width:100%;
padding-top:40px;
overflow-y:auto;
}

Mais le problème c'est que "barremenu" ne fait plus la bonne largeur et que "reste" n'a plus de overflow....

Enfin je désespère la.... en esperant que vous pourrez m’éclairer.
Merci d'avance de votre aide
Pourquoi mettre width et height au body? tu ne voudrais pas plutôt mettre des valeurs précise au moins pour l'aspect général de ta page? Et les pourcentage tu peux les mettre quand tu as un tableau sur ta page ou pour ton menu. Mais au moins avoir une structure de base plus structurée. Faire un site avec que des pourcentage tu aura du mal à avoir tout ce que tu veux obtenir
Pour width et height au body c'est pour que toutes mes autres div fasse bien 100% de 99.8%... comme ça c'est pas collé non plus au bord de l'ecran....

Et sinon j'aimerais bien faire un site qui s'adapte à toute les tailles d'ecrans, ... il ne me manque presque rien pour arrivé au but... Smiley murf

Personne n'aurais une idée de comment faire pour mettre div "reste" à une hauteur 100%-40px ???

Merci de votre aide
Modérateur
widi7070 a écrit :
Personne n'aurais une idée de comment faire pour mettre div &quot;reste&quot; à une hauteur 100%-40px ???


javascript, je ne vois que ça pour obtenir une hauteur en pixel et pouvoir y retrancher 40.
Sinon en css, c'est encore un peu tôt mais bientôt on pourra:
http://www.w3.org/TR/css3-values/#calc

Peut-etre avec un visuel de ce que tu souhaites on pourra faire d'autres suggestions.
Voici ci-dessous ce que j'aimerais faire...

upload/19808-Sitemiseen.jpg

Pour la largeur j'ai réussi à faire 100%-280px mais si je fait la même chose pour la hauteur ben la largeur ne fonctionne plus.... Smiley confused

Je ne veut pas avoir de scrollbar sur la page seulement sur la div contenu, ainsi le menu et le bandeau sera toujours visible...

Merci d'avance de votre aide
Sujet clos
Aller à