28220 sujets

CSS et mise en forme, CSS3

Gabarit de page en 100%

Bonjour,

je souhaiterai avoir un site qui prennent toute la place disponible offerte par la fenêtre.

Il doit disposer de :

- un header de 100% de large et 85px de haut
- un menu à gauche de largeur fixe et qui descende jusqu'en bas
- le reste étant le centre (et doit être collé en bas également)

j'ai fais ca qui ne fonctionne que sous ie :

CSS :

body{
  background-color:#CCCCEE; 
  margin:0px;
  padding:0px;
}

#header {
  width: 100%;
  height: 85px;
  background-color:#FFCCCC;
}
#menu {
  width: 210px;
  height:100%;
  padding-top: 85px;
  background-color:#CCFFCC;
}
#centre {
  height:100%;
  background-color:#9999CC;
  padding-top: 85px;
  padding-left: 210px;
}


HTML :

<html>
<head>
  <link href="style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centre">centre</div>
<div id="menu">menu</div>
<div id="header">header</div> 
</body>
</html>


Ce qui donne ça sous ie :

upload/4714-exempleie.jpg

Avez vous une solution? Smiley sweatdrop
Modifié par Marloneyes (16 Jan 2006 - 17:00)
Sopo a écrit :
Et en ajoutant simplement 
width: 100%;

au body ?


J'ai toujours le même problème sous Firefox : le padding décale tout et j'ai des barres de défilement qui apparaissent. Sous ie, pas de problème.

Mais je dois avoir la mauvaise méthode pour arriver au résultat que je souhaite

Merci Smiley cligne
Curieux, je n'ai pas de problèmes sous Firefox ...

Cependant, une fois que la largeur de body est définie à 100%, il n'est pas nécessaire d'imposer une largeur aux <div> dans body : sauf indication contraire, ils occuperont toute la largeur disponible. Il faudrait p-e supprimer le 
width: 100%
sur le header
Sopo a écrit :
Curieux, je n'ai pas de problèmes sous Firefox ...

Cependant, une fois que la largeur de body est définie à 100%, il n'est pas nécessaire d'imposer une largeur aux <div> dans body : sauf indication contraire, ils occuperont toute la largeur disponible. Il faudrait p-e supprimer le 
width: 100%
sur le header


Si je supprime les 
width: 100%
les div prennent la largeur du contenu (sous ie et firefox) Smiley sweatdrop
Modifié par Marloneyes (16 Jan 2006 - 17:21)
Sur Firefox, pas de problèmes avec :

<html>
	<head>
                <title>Test</title>
		<style>
			div{
				background: #000; color: #fff;}
			body{
				width: 100%; margin: 0; padding: 0;
				}
		</style>
	</head>			
	<body>
	<div>Bonjour</div>
	<div>Chez moi, ça marche</div>
	<div>Coucou</div>
	</body>
	
</html>
Hmmm en effet ton code marche sour firefox

Mais le résultat que je voudrais obtenir est de la forme :
upload/4714-exempleie.jpg

En fait, mon problème, c'est le fait de coller le menu en bas et le centre, en bas et a droite
Modifié par Marloneyes (16 Jan 2006 - 17:47)
hé ho, moi je veux bien, mais ce n'est plus le même sujet, alors Smiley lol

je crois que le sujet "menu sur toute la hauteur" a dû être traité 2800 fois sur le forum Smiley cligne
Sopo a écrit :
hé ho, moi je veux bien, mais ce n'est plus le même sujet, alors Smiley lol

je crois que le sujet "menu sur toute la hauteur" a dû être traité 2800 fois sur le forum Smiley cligne


Oui, j'ai trouvé beaucoup de topic à ce sujet, mais aucun qui réponde à mon problème Smiley sweatdrop

Je me contenterai d'une compatibilité ie sinon Smiley sweatdrop
Maloneyes a écrit :
Je me contenterai d'une compatibilité ie sinon


Ca c'est vraiment un chantage infâme pour obtenir de l'aide ! Smiley lol

est-ce que ça ne fonctionnerait pas parfaitement si on utilisait une colonne factice ? On met l'image de fond avec la vraie fausse colonne dans le body auquel on applique 
height: 100%;
et tant qu'on y est on supprime le 
height: 100%;
des autres éléments, on donne une couleur de fond ou/et une image au header, on place le menu en float à gauche, on applique une marge de la largeur qu'il faut au contenu, et voilà, le tour est joué, emballez c'est pesé, il y a un peu plus, je vous le mets ? Smiley biggol
Modifié par Sopo (16 Jan 2006 - 18:40)
Sopo a écrit :

Ca c'est vraiment un chantage infâme pour obtenir de l'aide ! Smiley lol

Smiley rolleyes Smiley lol

Je viens de parcourir ton url et l'idée me semble intéressante Smiley biggrin

Je test ça demain

Merci beaucoup Smiley cligne
Sujet clos
Aller à