Header et footer plein écran puis un contenu centré Comment faire????

Question

pauligno

29 Dec 2006 à 19:54

Bonjour,

je suis en train de réaliser un site pour mon groupe de danse basque et je rencontre quelque probléme de positionnement et je me pose aussi des question sur l'architecture de mes div.

Alors voici ce que j'aimerai obtenir:
upload/10166-objectif-p.gif

des bords en haut et en bas adaptable à la taille de l'écran. puis un contenu centré.

Mais voicis ce que j'obtient sous ff puis sous ie:
upload/10166-resultatff.gif

Je croiyais que mon probléme venait du footer mais sans le contenu cela donne un truc comme ca:

upload/10166-resultatsa.gif

ET voici mon code:

body{
margin:0px;
padding:0px;
height:100%;
width:100%;
}

/******************************************/
#header{
height:95px;
width:100%;
min-width:995px;
background-image:url(../images/header.gif);
background-repeat: repeat-x;
display:table;
color:#4f8a10;
}

/******************************************/
#page{
width:995px;
background-color:black;
position: relative;
margin-left:auto;
margin-right:auto;
min-height:100%;
}
#danseur{
background-image:url(../images/danseur.gif);
background-repeat: no-repeat;
height:438px;
width:195px;
margin-top:5px;
position:relative;
display:table;
}
#contenu{
width:800px;
height:100%;
background-color:red;
margin-top:10px;
margin-bottom:40px;
position:relative;
left:195px;
display:table;
}
#footer{
height:31px;
width:100%;
min-width:995px;
background-image:url(../images/footer2.gif);
background-repeat: repeat-x;
position:relative;
bottom:0px;
}

/******************************************/

<!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 profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>garaztarrak</title>
	
	<style type="text/css" media="screen">
		@import url(css/style.css );
	</style>
</head>
<body>
	
	<div id="header">
		<h1>Garaztarrak</h1>
	</div>

	<div id="page">
		<div id="danseur"><div>
		<div id="contenu">
		<h2>Titre d'un post</h2>
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		</p>
		</div><!-- fermeture de contenu -->
	</div><!-- fermeture de page-->
	<div id="footer"></div>
</body>
</html>

Comment positionner les deux div centrale? Les imbriqués dans une grande? Et les mettres en quelle type de positionnement? Je pensais que le relatif était le mieux.

Merci de me laisser vos conseils Smiley smile

Modifié par pauligno (29 Dec 2006 - 21:31)

Raphael

Administrateur

29 Dec 2006 à 20:12

Hello et bienvenue ici,

Comme tu es dans le salon CSS, tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "Problème de positionnement".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre Smiley decu

fvsch

29 Dec 2006 à 21:34

position: relative sans indications de position (propriétés top, bottom, left, right), display: table sur certains blocs... c'est un peu le foutoir, quand même.

Une petite révision sur le positionnement CSS ?
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/

Pour ce que tu veux faire, on utilisera à priori un flottant (sur le bloc de l'image, par exemple).

Par contre, je trouve ça bizarre d'avoir un bloc vide utilisé pour placer une image de fond. Si c'est une image décorative, pourquoi ne pas simplement la mettre comme image de fond du bloc de contenu principal ?

pauligno

29 Dec 2006 à 21:36

Merci du conseil.

Je m'étais concentré sur le post en lui même au point d'en oublier le plus important.

Je crois que la c'est mieux Smiley cligne

pauligno

29 Dec 2006 à 21:44

En fait mon bloc vide je l'utilise pour avoir toujour le contenu centré en faisant un margin-left:auto; margin-right:auto;

Faire un div rien que pour cela est déconseillé?!?

L'image que je compte mettre a la gauche du contenu sera toujour la même. C'est en quelque sorte l'embléme du groupe. Et il faudrait donc que je centre l'image et le contenu sans les imbriqué dans une div?

fvsch

31 Dec 2006 à 02:31

pauligno a écrit :
En fait mon bloc vide je l'utilise pour avoir toujour le contenu centré en faisant un margin-left:auto; margin-right:auto;

Faire un div rien que pour cela est déconseillé?!?

Tu utilises une div vide à l'intérieur de div#page pour pouvoir centrer div#page via la technique des marges automatiques ? Euh... je suis pas sûr d'avoir tout suivi là.

Disons qu'utiliser un élément vide pour placer une image de décoration et/ou pour créer des espaces « vides » n'est pas formellement interdit, mais s'il s'agit simplement de décoration visuelle il y a des moyens plus performants, en général. Penser à utiliser les padding, à positionner les images de fond (propriété CSS background-position), etc.
Modifié par mpop (31 Dec 2006 - 02:31)

gcyrillus

Modérateur

2 Jan 2007 à 00:12

bonsoir,

voici peut-etre une autre approche:

un conteneur principale en hauteur minimale de 100%; , positionné en relatif pour placé en absolue l'entete et le pied.

Ensuite un conteneur de contenu avec des marges interne pour ne rien afficher dans les zones ou se trouve l'entete et le bas de page.

A partir de la , mise en forme se refait normalement dans le div que j'intitule sous-contenu , il ne sert la qu' a dessiner les bordures.

<!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"><head><title>XHTML 1.0 Strict</title><style type='text/css'>html , body {
	height:100%;
	background:#fff;
}
* {
	margin:0;
	padding:0;
}
#page {
	height:auto!important;
	height:100%;
	min-height:100%;
	background:#fff;
	position:relative;

}
#entete {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:50px;
	background:#4F8A10;
	text-align:center;
}
#copy-tact {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:30px;
	background:#4F8A10;
	text-align:center;
}
#contenu {
	width:800px;
	margin:auto;
	padding-top:60px;
	padding-bottom:40px;

}
#sous-contenu {
	border:2px solid #999;
	padding:10px;
}
#sous-contenu p  {
	margin-left:130px;
	background:#644DB8;
}
#sous-contenu img {
	float:left;
	width:100px;
	padding:10px;
	background:#F06565;
}</style><script type='text/javascript'></script></head><body><div id="page" >
	<h1 id="entete">Titre 1	</h1>

<div id="contenu">	
	<div id="sous-contenu">
		<h2>Titre d'un post</h2>
<img src="http://forum.alsacreations.com/upload/10166-resultatff.gif" alt="" />
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.

		</p>
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		</p>
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		</p>
<h2>Titre d'un post</h2>

<img src="http://forum.alsacreations.com/upload/10166-resultatff.gif" alt="" />
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		</p>
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		</p>
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.

		</p>
<h2>Titre d'un post</h2>
<img src="http://forum.alsacreations.com/upload/10166-resultatff.gif" alt="" />
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		</p>
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.

		</p>
		<p>Voici quelques fotos de notre escale a Venise, lors du voyage de l&#8217;&eacutet&eacute 2006 en Slov&eacutenie.
		</p>
	</div>
</div>
	<adress id="copy-tact">copyright, credits , coordonnées</adress>

</div><!-- fermeture de page --></body></html>

A prendre comme gabarits ou exemple de base.

GC

Sujet clos

CSS et mise en forme, CSS3

Header et footer plein écran puis un contenu centré Comment faire????