[CSS]Petit problème de mise en page

30 mars 2006 à 21:04:45

Voilà mon design, bon c'est pas beau je sais mais juste du fait rapide pour faire des test

cliquer ici

Alors j'aimerais bien coller les 3 elements qui sont fleches!

Alors voila mon code:

<!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" >

<head>
<title>Bienvenue sur mon site et blog, fr0d0n !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="cssindex.css" />

</head>

<body>
<div id="header">
</div>

<div id="sousmenu">
<p>rien--rien--rien--rien--rien</p>
</div>

<div id="menu">
<ul>
<br/>
<br/>
<li><a href="http://fr0d0n01.skyblog.com">Blog</a></li>
<li>Rien</li>
<li>Rien</li>
</ul>
</div>

<div id="corps">
<h1>Bienvenue sur mon site</h1>
<h2>News</h2>
<h4>Concert dust</h4>
Un concert de dust aura lieu le 15 Avril, pour plus d'info direction <a href="http://dustmusic.free.fr"> leur site</a>
<br/>
<img src="affiche_dust.jpg" alt="affiche dust"/>
<br/>
<br/>
<h4>Site valide au W3C!!</h4>
<p>Bon apres quelques recherches dans le code du site, j'ai corige mes erreurs pour le site soit valie W3C, et c'est fait, il est valide
voila donc @+</p>
<br/>
<br/>
<h4>Welcolme</h4>
<p>
Bienvenue sur mon tout premier site internet realise grâce aux tutoriaux du <a href="http://www.siteduzero.com">Site du zero</a>
, bon le site est vide je l'avoue, mais je vais pas tarder à le remplir, avec je sais pas quoi mais on va bien trouver :p.
</p>
<br/>
<p>A tres bientôt</p>
</div>

<div id="pied_de_page">
<p>Site realise par fr0d0n</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
<script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=6/59/6098/8/1 & ID=43443"></script>visiteurs sont passe par ici
<script type="text/javascript" src="http://www.abcompteur.com/live/?code=0/101/6098/6/1 & ID=43444"></script>
</div>
</body>
</html>

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #bfdcfc;
}

#header
{
width: 800px;
height: 200px;
background-image: url("headerv1.jpg");
background-repeat: no-repeat;
margin-bottom: 0px;
}

#sousmenu
{
width: 800px;
height: 20px;
background-image: url("sousmenu.jpg");
background-repeat: no-repeat;
margin-bottom: 20px;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
top: 200px ;
}

#menu
{
float: left; width: 130px;
background-repeat: repeat-x;
border: 1px solid #bfdcfc;
margin-bottom: 20px;
background-image: url("fondmenu.jpg");
h3
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;

ul
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 10px;

#corps
{
margin-left: 200px;
margin-bottom: 20px;
padding: 5px;
border: 1px solid #bfdcfc;
}

#corps h1
{
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;
background-repeat: no-repeat;
padding-left: 30px;
text-align: center;
}

#pied_de_page
{

   padding: 5px;
   text-align: center;
   border: 1px ;
}

Donc j'aimerais bien coller reelement pour le moment le header et la barre en dessous.

okens

30 mars 2006 à 21:13:47

Je ne comprends pas puisque tu n'as pas de "margin-bottom" dans ton header et pas de "margin-top" dans ton sous-menu.

http://www.encheres-cents.com - http://www.checkmycomposer.com

jp949

31 mars 2006 à 5:59:22

faut mettre les accolades a h3 et ul.
pour les autres elements il faut programmer les margin-top et bottom a0; ensuite il faut aussi mettre les margin des balises contenues a 0;
comme<p> <ul> etc..

atly

31 mars 2006 à 18:01:54

Salut,
De toute façon, quand tu as des espaces non-souhaités entre tes éléments, il va falloir que tu regardes du côté des marges.

fr0d0n

1 avril 2006 à 15:20:46

J'ai reussi a coller le menu au sous menu mais pas le sous menu au header.

body
{
width: 760px;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
background-color: #bfdcfc;
}

#header
{
width: 800px;
height: 200px;
background-image: url("headerv1.jpg");
background-repeat: no-repeat;
margin-bottom: 0px;
margin-top: 0px ;
}

#sousmenu
{
width: 800px;
height: 20px;
background-image: url("sousmenu.jpg");
background-repeat: no-repeat;
margin-bottom: 0px;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
margin-top: 0px ;
}

#menu
{
float: left;
width: 130px;
background-repeat: repeat-x;
border: 1px solid #bfdcfc;
margin-bottom: 20px;
background-image: url("fondmenu.jpg");
h3
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;

ul
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 10px;
}

#corps
{
margin-left: 200px;
margin-bottom: 20px;
padding: 5px;
border: 1px solid #bfdcfc;
}

#corps h1
{
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;
background-repeat: no-repeat;
padding-left: 30px;
text-align: center;
}

#pied_de_page
{

padding: 5px;
text-align: center;
border: 1px ;
}