28172 sujets

CSS et mise en forme, CSS3

Galère de mise en page

Bonjour à tous,

Je navigue depuis quelques temps sur votre forum qui m'a apporté pas mal d'aide par le passé.
Je me décide à venir vous proposer mon problème qui vous semblera peut-être bête mais je ne suis pas trop à l'aise avec le CSS.

Je travaille sur la mise en page de mon site mais je ne sais pas comment coder cette mise en page en CSS :
upload/30451-Aide.png

Donc le code html est le suivant :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<div id="TopBg">TopBg</div>
<div id="Header">
  <div id="HeaderCont">Header</div>
</div>
<div id="Content">Content</div>
<div id="BotBg">BotBg</div>
<body>
</body>
</html>


Le code CSS que j'utilise pour le moment :
* {
	padding: 0;
	margin: 0;
}
html, body {
	background-color: #fff;
	height:100%;
}
/* Haut de page */
#Header {
	width:100%;
	background-color:#0e3e64;
	height:127px;
}
#HeaderCont {
	width:950px;
	height:100%;
	margin:0 auto;
}
/* Fond haut et bas */
#TopBg, #BotBg {
	background-color:#256fae;
	position:absolute;
	width:100%;
}
#TopBg {
	top:127px;
	height:40px;
}
#BotBg {
	bottom:0px;
	height:30px;
	padding-top:40px;
	z-index:0;
}
/* Contenu */
#Content {
	border:solid #000 1px;
	height:100%;
	margin:10px auto 50px auto;
	width:950px;
	z-index:1;
}


Mes problèmes sont les suivants :
- Le div Content est en dessous des div TopBg et BotBg alors que je voudrais les avoir en dessous
- Le div BotBg est en bas du navigateur eu lieu d'être en bas de ma page
- Le div Content prend la hauteur de la page entière au lieu de prendre la hauteur de la page moins les "marges" en haut et en bas

Si quelqu'un peut m'aider, ça serait super sympa.

Merci d'avance et à très bientôt Smiley ravi
Modifié par TeDeum (18 Jun 2010 - 10:53)
Bonjour,

J'ai repris mon problème à tête reposé et j'ai essayé une autre voie qui me semble plus viable.
Au lieu de faire des blocs enfant de body, j'ai décidé de faire des blocs imbriqués avec une image de fond positionné en haut ou en bas du bloc pour faire les fond bleus.

Cela donne ça pour le moment (je vous met tout en une seule page) :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css" />
<style>
* {
	padding: 0;
	margin: 0;
}
html, body {
	background-color: #fff;
	height:100%;
}
/* Fond haut et bas */
#TopBg, #BotBg {
	width:100%;
	height:100%;
}
#TopBg {
	background-image:url(images/top_bg.png);
	background-repeat:repeat-x;
	background-position:top;
}
#BotBg {
	background-image:url(images/bot_bg.png);
	background-repeat:repeat-x;
	background-position:bottom;
}
/* Bloc central */
#Conteneur {
	width:950px;
	margin:0 auto;
	height:100%;
}
/* Haut de page */
#Header {
	width:100%;
	height:127px;
}
/* Contenu */
#Content {
	border:solid #000 1px;
	padding: 10 0 50 0;
	width:950px;
	position:absolute;
	top: 137px;
	bottom:50px;
}
</style>
</head>
<div id="TopBg">
<div id="BotBg">
<div id="Conteneur">
	<div id="Header">Header</div>
	<div id="Content">Contenu de ma page</div>
</div></div>
</div>
<body>
</body>
</html>

Le problème qui persiste c'est le bloc Content que je n'arrive pas à forcer à prendre la hauteur restante sans mettre une position fixed ou absolute Smiley ohwell
Or dans ces modes, le contenu dépasse du bloc par le bas s'il est trop long au lieu d'étirer la page en hauteur Smiley decu
Peut-être faut-il ajouter un bloc en dessous de Content !?

Je suis sur que la solution existe déjà... je vais donc chercher encore mais ce WE je suis AFK. Donc si vous avez une idée, je suis preneur Smiley smile

Merci d'avance de l'aide que vous saurez m'apporter...
salut
je poste cette réponse, juste pour te signaler un problème dans ton code html, peut être que ça joue un rôle dans ton problème:
dans ton code html tu a placé tes divs avant le body il faut corriger ça Smiley cligne
Sujet clos
Aller à