28173 sujets

CSS et mise en forme, CSS3

Sortir un header du flot & positionner en bas de page

Bonsoir a tous

Une mise en page qui me parraissait toute simple mais qui me résiste Smiley fache

J'aimerais sortir du flot mon header pour le positionner en bas de pages et avoir mon #contenu scrollable si beaucoup d'infos.
Sous FF no problem, sous IE pas glop : j'ai l'impression qu'il ne prend en compte ni le averflow:auto, ni le heigth du header.

le html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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">
<title>test</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>
	<div id="container">
		<div id="header"> Header et  Menu</div>

		<div id="contenu">

			contenu<br />
			...
			contenu<br />

		</div>
	</div>
</body>
</html>


et la css :
*{margin:0;padding:0;}

#container {
position: absolute;
width: 100%;
height: 100%
}

#header {
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
background-color: #99CCCC;
}

#contenu {
height: 70%;
overflow: auto;
background-color:#9999CC;
}


Si vous aviez un début de réponse, une piste à exlporer ....

Merci à vous Smiley murf
Modifié par barbe douce (17 Aug 2006 - 07:00)
En voilà une mise en page bizarre ! Le header en pied de page Smiley biggol C'est toi qui voit, mais faudra pas s'étonner si le visiteur est un peu paumé !

Concernant la hauteur du header, il faut savoir qu'IE ne comprend pas height correctement, mais l'interprète comme min-height. Donc, si le contenu du header est trop grand, IE va laisser le div s'agrandir.
Le truc c'est pas de paumé le visiteur ...
Le probleme c'est : comment gardé un code XHTML dans "l'ordre" (header/menu/contenu/pieds de page) et faire une mise en page un peu differente.

Le bloc contenu se voit attribué un overflow:auto et le div contenant le header, le menu et le pied de page se trouvent collés en bas de la fenetre du navigateur. Je ne pense pas que cela soit trop perturbant !

C'est sur que si ma page faisais 3km de long et que mon header/menu se retrouvais au fin fond de la page; ça serait pas glop, mais là c'est pas le cas Smiley cligne
En fait en adoptant une structure :

<div id="header"></div>

  <div id="contenu"></div>

  <div id="footer">
    <div id="menu"></div>
  </div>


La mise en page est aisée
Mais si je désactive les CSS le menu se retrouve relégué en fin de page !
Et j'avais cru comprendre qu'il serait plus pertinent de le mettre au début ...

up
Modifié par barbe douce (09 Aug 2006 - 21:06)
Salut,

barbe douce a écrit :
le menu se retrouve relégué en fin de page !
Et j'avais cru comprendre qu'il serait plus pertinent de le mettre au début ...


Sur ce point les avis sont assez partagés je crois. De toute façon il n'y a pas particulièrement à considérer que l'ordre :

header
contenu
menu
footer


soit moins bien que 

header
menu
contenu
footer


Surtout si tu prévois des liens d'accès direct en début de flux.

Mais de toute façon cette organisation du document html doit se faire sans penser spécialement à une mise en page particulière.
Modifié par clb56 (09 Aug 2006 - 21:21)
Modérateur
bonjour,

pour appliqué les hauteurs de 30 et 70% a celle de la fenêtre , il faut donné une reference explicite a IE.

ajoute dans le css :
html , body {height:100%;}


et IE pourra prendre en reference la taille des parents , qui s'etaleront donc sur la hauteur de la page ...

++


<edit> pour reprendre aussi les remarque ci dessus , en inversant dans le flux de ton code footer et contenu , tu ne devrais plus avoir besoin de position:absolute; , des lien d'evitement ne sont peut-etre plus necessaire (enfin tu as probablement tes raisons) ,
par ailleurs container n'a plus besoin d'etre en dimensionnant html et body. et pour rappel attention au comportement de IE qui autorise un element a s'etirer si besoin (height = min-height pour IE6 par exemple.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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">
	<title>test</title>
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
	<!-- <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> -->
	<style type="text/css" >
	*{margin:0;padding:0;}
				html , body {height:100%;}
	#header {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 30%;
		background-color: #99CCCC;
		/* overflow:auto; en option */
	}
	#contenu {
		height: 70%;
		overflow: auto;
		background-color:#9999CC;
	}
	</style>
 </head>
<body>
		<div id="header"><p>Header et  Menu</p></div>
		<div id="contenu">
			<p>contenu</p>
			<p>...</p>
			<p>contenu<p>
		</div>
	</div>
</body>
</html>

</edit>
Modifié par gcyrillus (09 Aug 2006 - 22:18)
Salut,
d'une manière générale, j'ai cru comprendre que, bien que css permette de positionner les éléments dans un ordre différent au document HTML, c'est une pratique à proscrire.
Exemple, ce topic

A+
Re bonjour !

Je reviens vers vous car je me prends toujours la tête avec ma mise en page Smiley bawling

j'en suis là

Mes problèmes :

- le contenu ne "pousse" pas le bloc news+nav+radio+footer. Il devrait, si le conteu etait plus long, ne pas passer derriere ce bloc comme il le fait ...

- le bloc news+nav+radio+footer devrait etre integralement noir. Si je donne un height aux éléments, la mise en page part en sucette !

- Sous IE en général c'est le fête au village Smiley biggol !!! C'est pas trop grave du moment que le tout reste cohérent et compréhensible. Si j'arrive à faire tourner cette mise en page nickel sous FF je serais deja bien content ! et pour IE tant pis pour lui ...

Voila ... Si vous pouviez m'apporter des pistes de début de commencement de résolution à ces probleme, je vous en serais reconnaissant ...
Mais là je vais me coucher car ça me prend trop la tête ...

Bonne nuit !
Modifié par barbe douce (17 Aug 2006 - 20:09)
Modérateur
Salut,

barbe douce a écrit :
et pour IE tant pis pour lui ...

Juste une petite remarque... Smiley smile On ne code pas pour un navigateur mais pour les visiteurs... en somme ta phrase se transforme en :

"et pour la majorité des utilisateurs, tant pis pour eux..."
Modérateur
Pour compléter...

Pour positionner le menu en bas en bas de page, le positionnement absolu est indispensable. Lorsque tu l'appliques, tu sors du flux du document donc il est tout à fait normal que le corps de page ne pousse pas ce menu.

Pour obtenir un fond noir, cette couleur doit être appliquée au footer (auquel tu affectes une hauteur) et non aux éléments qui y sont contenus.

barbe douce a écrit :
Je ne pense pas que cela soit trop perturbant !
Si, bien sûr que çà l'est. Qui a l'habitude de voir un menu en pied de page ? Certaines conventions existent et tu ne les respectes pas dans le cas présent. Smiley cligne

coccimaster a écrit :
d'une manière générale, j'ai cru comprendre que, bien que css permette de positionner les éléments dans un ordre différent au document HTML, c'est une pratique à proscrire.
D'une manière générale, oui mais si on prend l'exemple d'un menu placé en fin de code html, je ne suis pas vraiment d'accord.
Le but du positionnement absolu (qu'on affecte à ce menu) est justement de faciliter la navigation sur les écrans d'ordinateur. Si on laissait le menu descendre avec le texte, le visiteur, à son arrivée sur la page, aurait l'impression qu'il n'existe qu'une page orpheline à moins bien sûr qu'on ne se mette à fonctionner avec des liens d'évitement...
Modifié par koala64 (17 Aug 2006 - 20:45)
a écrit :
Juste une petite remarque... smile On ne code pas pour un navigateur mais pour les visiteurs... en somme ta phrase se transforme en :

"et pour la majorité des utilisateurs, tant pis pour eux..."

Je voulais plus dire par là que si le design se dégrade agreablement sous Ie, ca me convient.


a écrit :
Pour positionner le menu en bas en bas de page, le positionnement absolu est indispensable. Lorsque tu l'appliques, tu sors du flux du document donc il est tout à fait normal que le corps de page ne pousse pas ce menu.

Ce qui voudrait dire que je ne peux pas avoir un footer collé en bas depage en cas de contenu restreint et en meme temps un footer poussé par un contenu plus important ? Et pourtant: une solution semble exister ...


a écrit :
Si, bien sûr que çà l'est. Qui a l'habitude de voir un menu en pied de page ? Certaines conventions existent et tu ne les respectes pas dans le cas présent. cligne

Faisons fi des conventions ... à conditions que cela reste accessible évidement Smiley lol
Modifié par barbe douce (18 Aug 2006 - 01:16)
Et aussi :

a écrit :
Pour obtenir un fond noir, cette couleur doit être appliquée au footer (auquel tu affectes une hauteur) et non aux éléments qui y sont contenus.

Le probleme est que j'ai déja une image en background sur mon footer ...
Modérateur
bonjour,

ton probleme par rapport au debut du topic a beaucoup evolué.

tu ne semble pas conseve l'idée de depart , garder le menu en bas de page et visible quelque soit le contenu.

(la solution du footer en bas de page et repoussable existe bien et a étè donnée plusieurs fois sur le forum sur des liens en langue française ).

Le probleme a priori n'est pas seulement le footer , mais la conception de la page en generale , elle supporte tres mal les redimensionnement entre autre.

Il est donc tres difficile de t'aider pour le footer en ignorant tout le reste , surtout que tu connait deja la soluce pour le footer Smiley smile .

++
Sujet clos
Aller à