28173 sujets

CSS et mise en forme, CSS3

Débutant en CSS et petit problème

Bonjour tout le monde, je débute dans la mise en page CSS et je suis donc en train de refaire mon site, bref j'arrête de raconter ma vie et j'explique mon problème ! Smiley cligne

Voici mon index.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">
	<head>
		<title>..:: Ash's Blog ::..</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
        <link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	<div id="conteneur">
    	<!--HEADER-->	
		<div id="header"><div id="headerd"></div></div>
        <!--MENU-->
		<div id="menu">
            <div id="menu_menu"></div>
            <div id="texte_menu">
            	<a href="?r=news">Accueil</a><br />
                <a href="?r=rechercher">Rechercher</a><br />
                <a href="?r=presentation">Pr&eacute;sentation</a><br />
                <a href="?r=site">Le site</a><br />
                <a href="?r=contact">Contact</a><br />
                <a href="?r=lien">Lien</a><br />
                <a href="admin/index.php" target="_blank">Administration</a>
            </div>
            <div id="menu_wow"></div>
            <div id="texte_menu">
            	<a href="?r=wow_hall">Hall of Fame</a><br />
                <a href="?r=profil_wow">Mon Profil</a><br />
                <a href="?r=interface">Interface</a><br />
                <a href="?r=boss">Tableau de chasse</a><br />
            </div>
            <div id="menu_war"></div>
            <div id="texte_menu">
            	<a href="?r=profil_war">Mon Profil</a>
            </div>
            <div id="menu_aide"></div>
            <div id="texte_menu">
            	<a href="?r=php">PHP</a><br />
                <a href="?r=sql">SQL</a><br />
                <a href="?r=contact">Proposer</a>
            </div>
            <div id="menu_fin"></div>
		</div>
        <!--PAGE-->
		<div id="page">
        	<p>Te[st</p>
		</div>
        <!--FOOTER-->
		<div id="footer"></div>
	</div>
	</body>
</html>


et voici mon fichier css :

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	color: #ffd030 ;
	font: 14px Verdana, "Arial" ;
	background: #000000 ;
	scrollbar-face-color: #000000 ;
	scrollbar-shadow-color: #000000 ;
	scrollbar-highlight-color: #333333 ;
	scrollbar-3dlight-color: #000000 ;
	scrollbar-darkshadow-color: #000000 ;
	scrollbar-track-color: #333333 ;
	scrollbar-arrow-color: #FFDF00 ;
}

div#conteneur
{
	width: 840px ;
	margin: 0 auto ;
	text-align: left ;
	border: 0px ;
	background: url(image/centre.jpg) ;
}

div#header
{
	height: 210px ;
	background: url(image/haut.jpg) no-repeat top right ;
}

div#headerd
{
	height: 210px ;
	background: url(image/haut_d.jpg) no-repeat top right ;
}

div#footer
{
	height: 62px ;
	background: url(image/bas.jpg) no-repeat top right ;
}

div#menu
{
	width: 214px;
	background: url(image/fond_menu.jpg) ;
	text-align: center ;
}

div#menu_menu
{
	width: 214px;
	height: 106px;
	background: url(image/menu.jpg);
}

div#menu_wow
{
	width: 214px;
	height: 65px;
	background: url(image/wow.jpg);
}

div#menu_war
{
	width: 214px;
	height: 65px;
	background: url(image/war.jpg);
}

div#menu_aide
{
	width: 214px;
	height: 65px;
	background: url(image/aide.jpg);
}

div#menu_fin
{
	width: 214px;
	height : 27px;
	background: url(image/bas_menu.jpg) ;
}

div#texte_menu
{
	margin-left: 65px ;
	padding-left: 5px ;
	text-align: left ;
}

div#page
{
	width: 600px;
	margin-left: 220px;
	border: 2px solid #ffffff;
}

a:link {  font-family: Verdana, Arial; font-weight: bold; font-size: 8pt; color: #FFFFFF; text-decoration: none}
a:visited {  font-family: Verdana, Arial; font-weight: bold; font-size: 8pt; color: #E1E1E1; text-decoration: none}
a:active {  font-family: Verdana, Arial; font-weight: bold; font-size: 8pt; color: #FFFF99; text-decoration: none}
a:hover {color: #ffcc00; font-size: 8pt; font-weight: bold; font-family: Verdana, Arial; text-decoration: underline}



Le problème se site tu niveau du contenu (div id="page"), j'aimerai qu'il soit a côté du menu et juste en dessous du header, mais dans le cas présent, il se met en dessous du menu.
J'ai essayé de mettre un margin_top : X px; mais il se place toujours par rapport au menu.


Comment faire pour remonter la zone de contenu ?


Pour être plus concret voici le screen : http://romain.bertolucci.free.fr/prob.jpg


Merci de votre aide.
Modifié par Ashraam (08 Oct 2007 - 23:13)
J'ai trouvé la réponse tout seul finalement, au niveau du footer j'ai rajouté l'option clear: both;
et pour le menu et le contenu j'ai rajouté l'option float: left;

P.S : C'est Ashraam, j'ai eu un soucis de compte.
Sujet clos
Aller à