Une bannière avec un logo et une anim flash...

Question

Tino

6 Dec 2007 à 20:45

Bonsoir à tous, Smiley smile

pour avoir effectué une recherche juste avant j'ai trouvé des milliers de résultats, mais rien qui corresponde à ce que je cherche vraiment.

Pourtant ce que je cherche à faire n'est pas très sorcier : je voudrais faire un site centré horizontalement, et avec dans le header un logo et une anim Flash... il faudrait aussi que les éléments du header soient centrés verticalement et qu'ils se mettent les uns à la suite des autres.

N'étant pas de formation WebDesigner j'ai pas mal de diffucultés avec le CSS et le positionnement des divs, c'est pourquoi j'appelle à l'aide.

J'ai donc fait une page web tout ce qu'il y a de plus simple, voici le code html :


<html>
	<head>
		<link rel="stylesheet" type="text/css" href="test.css" media="screen"/>
	</head>
	<body>
		<div id="main">
			<div id="header">
				<div id="shoppingCart">Panier</div>
				<div id="login">Login</div>
				<div id="logo">Logo</div>
				<div class="addBanner">Publicit&eacute;</div>
			</div>
		</div>
		<div id="page">
			<span>Contenu de la page</span>
		</div>
	</body>
</html>

et voici mon bout de code CSS (pour l'instant c'est très basique...


html, body
{
	padding: 		0;
	margin: 		0;
	height: 		100%;
}

body
{
	font-family: 	Arial, Helvetica, sans-serif;
	font-size: 		12px;
}

div
{
	padding: 		0;
	margin: 		0;
	text-align: 	left;
}

/* Page Container */
div#main
{
	position: 		relative;
	margin-left: 	auto;
    margin-right: 	auto;
    width: 			990px;
    text-align: 	left;

}

/* Page Header */
div#header
{
	width:				100%;
	height:				100px;
	background-color:   green;
}

div#header div#logo
{
	height: 			90px;
	width:				90px;
	margin-left: 4px;
	background-color:   red;
}

div#header div.addBanner
{
	display: 			inline;
	height: 			80px;
	width:				600px;
	background-color:   black;
}

div#header div#login
{
	float: 				right;
	height: 			90px;
	width:				90px;
	background-color:   yellow;
}

div#header div#shoppingCart
{
	float: 				right;
	height: 			60px;
	width:				60px;
	right: 				5px;
	background-color:   blue;
}

Est-ce que quelqu'un pourrait m'expliquer comment mettre le tout en forme seulement avec des divs et du CSS ?

D'avance merci.

Sujet clos

CSS et mise en forme, CSS3

Une bannière avec un logo et une anim flash...