28173 sujets

CSS et mise en forme, CSS3

[resolu]Centrer le site

Bonjour tout le monde! J'ai un petit soucis... je n'arrive pas a centrer mon site au milieu de la pages web...
j'ai plusieur <Div>.. et je suis bien enmer**
Voilà mon code 
<body>
	<div class="haut">
</div>

	<div class="gauche">
<dl id="menu">

		<dt onclick="javascript:montre();"><a href="index.php?page=accueil">Accueil du site</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">PRESENTATION</dt>

			<dd id="smenu2">
				
etc.......
	</div>
	<div class="frame">
	  <?php 
$pages=array(
   'accueil'=>'inc_accueil',
   'presentation'=>'inc_presentation',
   'pageX'=>'inc_pageX',
   'pageY'=>'inc_pageY'
);

if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
   include $pages[$_GET['page']].'.php';
else
   include 'inc_accueil.php'; // ou une page d'erreur inc_erreur.php
?>
	</div>
	<div class="bas"></div>
</div>
</body>

et le CSS (j'ai deux fichier CSS..un qui est specifique au menu...)

Le "style.css"
body 
{
margin:0;
padding:0;
position: absolute;
width: 70%;
height: 100%;
font-family: verdana, arial, sans-serif;


}
.haut
 {
width:80%;
height: 126px;
background-image:url(banniere.gif);
color: #fff;
font-size: 36px;
background-repeat: no-repeat;
left: auto;
top: auto;
right: auto;
bottom: auto;


}
.conteneur
{
height: 338px;
width: 100%;
}

.frame {
margin-left:200px; /* on place ce bloc à droite du bloc menu de 200px de large */
width: auto;
height: 500px;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
font-size: 14px;
 
}
.bas {
	width: auto;
height:: 50px;
	background-image:url(bas.gif);
	color: #fff;
	font-size: 36px;
	padding: 10px;
	background-repeat: no-repeat;
}

le "style-menu.css:

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 126px;
left: 1px;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

#menu li a:hover, #menu dt a:hover {
background: #eee;
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}

J'espere ne pas trop vous déranger... mais je n'ai trouvé nul part ailleur
Merci par avance!
Modifié par SicK_35 (15 Nov 2006 - 18:16)
Salut.

Centrage horizontal dans la FAQ ... item 74 !

Regarder dans la FAQ (attentivement) & faire une recherche sur le forum avant de poster Smiley cligne

Dans ton cas, il manque juste 
body {
   margin: 0 auto;
}
Sujet clos
Aller à