28173 sujets

CSS et mise en forme, CSS3

[Résolu] Petit souci de mise en page

Bonsoir @ tous,

Voilà je suis en train de refaire un peu la mise en forme de mon site.
Au tout départ je suis parti sur une mise en forme avec des tableau Smiley confused mais bon je m'apperçois que cela est très lourd à gérer et si jamais je veux changer de style, je suis (pardonnez l'expression) dans le caca.
Je refais donc le squellette de mon site pour ne dédier la mise en forme qu'au CSS.
Et donc alsacréation m'a bien aider à comprendre la philosophie de ce "code".
Mais aujourd'hui je me retrouve bloqué devant quelque chose que je n'arrive pas à comprendre.

En fait j'essaie d'avoir le style suivant (assez basique je pense) :

http://www.siteduzero.com/uploads/files/43001_44000/43165.jpg

Seulement la Page de cette image se retrouve sous le sondage impossible de la refaire remonter Smiley sweatdrop

Voici le code de la page en question :


<body>
		<div id="corpspage">
			<div id="banniere">	
				<div id="meteo">
					<?	include("meteo.php");	?>
				</div>
				<div id="flash">
					<?	include("haut.php");	?>
				</div>
			</div>
			<div id="espacemenu">
				<div id="menu">
					<?	include("menu.php");	?>
				</div>
				<div id="sondage">
					<?	include("sondage.php")	?>
				</div>
			</div>
			<div id="corps">
				<div class="Style12">
					<h1>Bienvenue sur le Site de P£@ym0B!£ !</h1>
					<h2>Les news</h2>
				</div>
				<?	include("news.php");	?>
			</div>
			<div id="footer">
				<?	include("compteurlec.php");	?>
			</div>
		</div>
	</body>


Ainsi que le CSS qui va avec :

body {

	border: 1px solid white;
	background-color: black;
	margin: 5px;
}



#corpspage{
	margin: auto;
	background-color: #3f3f3f;
}



#banniere{
	height: 80px;
}
#meteo{
	position: absolute;
	width: 192px;
	background-image: url("../images/meteo/nuage.gif");
	background-repeat: no-repeat;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: black;
	text-align:center;
	vertical-align:middle;
}
#flash{
	position: relative;
	padding-top: 10px;
	margin-left: 192px;
	height: 60px;
	text-align: center;
}



#espacemenu{
	width: 192px;
	text-align: center;
	vertical-align: middle;
	display: block;

}
#menu{
	margin-top: 5%;
}
#sondage{
	margin-top: 25%;
	background-color: #F6F6F6;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: 1px solid black;
}



#corps{
	margin-left: 192px;
}



#footer{
	margin-left: 192px;
	text-align: center;
}


Je suis désolé si mon problème est un souci basique mais là je ne vois pas très bien ??

Merci pour votre aide.
Modifié par playmobil77d (26 Oct 2006 - 10:38)
Bonjour,
Ok cela fonctionne (merci merci beaucoup Smiley cligne ) mais j'ai découvert un autre sushi.

Non, non ! Ne me tapez pas Smiley langue !!

Si vous regardez cette page, ben le rectangle gris border de blanc (avec l'id #corpspage) ne va pas jusqu'en bas du menu !!!

Pourquoi ??

Merci
Salut.

Le menu est positionné en float, ce qui veut dire qu'il ne fait plus partie du flux et n'est par conséquent pas pris en compte par le navigateur dans le calcul de la hauteur des éléments.

Heureusement, il y a une solution Smiley cligne Dans ce cas, le plus simple est d'appliquer la propriété 
clear: both;
au pied de page, ce qui va l'obliger à s'afficher sous les flottants (le menu) et ainsi allonger le cadre jusque sous le menu.
Sujet clos
Aller à