Problèmes de marges et de décalage de menu par Miccagrassu - page 1

Salut,
Voilà la page en question (le problème devrait vous sauter aux yeux je pense)

1.Comment faire tenir ma liste <ul> qui sert de menu dans le div prévu à cet effet ?
2.Comment faire tenir mon corps là où il devrait être, c'est à dire à droite de mon menu flottant, avec une marge de 5px entre chaque autre partie du site ?

Les sources:

XHTML

<!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=iso-8859-1" />
<title>titre blabla</title>
<link href="styleblabla.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="site">

<div class="logoheader">



</div>



<div class="contenu">



<div class="menu">

<h4 class="rubrique">AAAAA</h4>

<ul>

<li>aaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbbbbbb</li>
<li>ccccccccc</li>
<li>dddd</li>

</ul>

<h4 class="rubrique">BBBB</h4>

<ul>

<li>aaaaaaaaaaaaaaa</li>
<li>bbbbbbbbb</li>
<li>ccccccccccccccccccccc</li>

</ul>

</div>



<div class="corps">

corps blabla

</div>

</div> 

<div class="footer">© Copyright blabla</div>


</div>

</body>
</html>

CSS

/* CSS Document */

body{
background-color:#0066FF;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

/* Boîtes de mise en forme */

.site {
height:420px;
width:760px;
display:block;
margin-left:auto; /* pour centrer le site sur la page */
margin-right:auto;
}

.logoheader{
display:block;
height:68px;
width:760px;
padding: 0 0 0 0;
background-color:#000066;
background-image:url(logoheader.png);/* Insérer l'image dans le CSS et non dans la page HTML permet de changer complètement le design du site si on le désire */
}
/* On peut décider de séparer le logo et le header si on le souhaite
.logo{
height:68px;
width:134px;
display:block;
padding: 0 0 0 0;
background-image:url(logo.png);
}

.header{
height:68px;
width:626px;
display:block;
float:right;
padding: 0 0 0 0;
background-image:url(header.png);
} */

.contenu{
height:332px;
width:760;
display:block;
background-color:#33FFCC;
}

.menu{
background-color:#003399;
color:#FFFFFF;
float:left;
height:322px;
width:134px;
display:block;
font-size:10px;
}

.corps{
/* On enlève 5 pixels de marge de chaque coté (haut,droite,bas,gauche), soit 10 px sur la hauteur et 10px sur la largeur*/
height:322px; /*332-10=322*/
width:616px; /*626-10=616*/
padding: 5px 5px 5px 5px;
background-color:#33FF33;
}

.footer{
height:20px;
width:760;
display:block;
text-align:center;
text-decoration:underline;
font-size:10px;
background-color:#0033FF;
}

ul{
list-style-type:square;
padding-left:0px;
}

h4.rubrique{
text-align:center;
}

Des idées ?

Merci

edit: j'ai rajouté les px après 760 là où ils manquaient, mais ça ne change rien sur le problème posé

Problèmes de marges et de décalage de menu

Problèmes de marges et de décalage de menu

Supprimer

Modérer

Signaler le message aux modérateurs