Bonsoir,
bon, j'ai revu bcp de choses dans ton code. Je vais pas donc te citer toutes mes modifs, mais je soulignerais plusieurs choses :
- les balises ne s'inventent pas. nous sommes contraint d'utiliser celles qui existe, ainsi, un titre sera balisé en <h1></h1>. Mais si tu veux créer des calques, là il te faut employer la synthaxe <div id="menu"></div> par exemple.
- on ne fait pas la mise en page dans le xhtml mais plutot dans la css, donc <br><br><br><br><br><br><br><br><br><br><br> dans le xhtml pour "pousser" le texte en bas, ce n'est pas correct.
- Pour répondre à ta question intiale, pour faire des retraits dans tes paragraphes, il faut le faire sur l'élément contenu et pas sur le contenant.
Ainsi, dans ton code, on laisse le contenant tranquille, apres lui avoir attribué une largeur :
#midle {
[b]width:614px;[/b]
background: url(images/palmier_04.gif) repeat-y;
}
et on donne des marges aux éléments contenus dans ce contenant :
#menu, #midle p, h1, #footer{
[b]padding-left:40px;
padding-right:50px;[/b]
}
Voici tout ton site corrigé :
xhtml :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>4l Trophy 2008 - Equipage Telecom Lille</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="DC.title" content="equipage 4l trophy Telecom Lille 1">
<meta name="description" content="Site de l'equipage pour le raid humanitaire de l'ecole d'ingenieur Telecom Lille1">
<meta name="keywords" content="4L, R4, renault, maroc,trophy, ingénieur, telcom, lille, enic,raid, humanitaire">
<link href="style.css" rel="stylesheet" media="all" type="text/css">
</head>
<body>
<div id="document">
<div id="header"></div>
<div id="midle">
<div id="menu">:: Accueil :: Le 4l trophy :: Photos :: Sponsors :: Nous aider ::</div>
<h1>Bienvenue sur le site de l'equipage 4l Trophy de Telecom Lille 1</h1>
<p>Nous sommes deux étudiants de Telecom Lille 1 et allons participer au 4L Trophy 2008.</p>
<p>Etudiants dans le milieu scientifique et amis de longue date nous partageons le même souhait : vivre une aventure enrichissante et tournée vers les autres.</p>
<img title="4L Trophy 2007" alt="description de la photo" class="illustration" src="images/4L_Trophy_2007-0673.jpg">
</div>
<div id="footer">
<div id="copyright">
<p>copyright: Benoit Fabre et Colin Mousset</p>
<p>derniere mise a jour septembre 2007</p>
</div>
</div>
</div>
</body>
</html>
la css :
/* CSS Document */
*{
margin:0;
padding:0;
border:0;
}
body {
background : url(images/background.gif);
}
html, body {
text-align: center;
}
#document {
text-align:left;
width: 656px;
margin: 0 auto;
}
#header {
width:614px;
height: 167px;
background: url(images/palmier_03.gif) no-repeat;
}
#midle {
width:614px;
background: url(images/palmier_04.gif) repeat-y;
}
#midle p {
font-size : 10px;
font-family: Verdana;
font-style:normal;
text-align:justify;
margin-top: 5px;
margin-bottom: 5px;
}
.illustration {
border: solid 1px black;
width:370px;
height:260px;
margin-left:120px;
margin-top: 10px;
margin-bottom: 10px;
}
#menu, #midle p, h1, #footer{
padding-left:40px;
padding-right:50px;
}
#footer {
width: 649px;
height: 249px;
background: url(images/palmier_06.gif) no-repeat;
}
#copyright {
padding-top:120px;
}
#footer p {
font-size : 7px;
font-family: arial;
font-style:normal;
}
#menu {
text-align:center;
font-size : 12px;
font-family: Verdana;
font-style:bold;
color:#C3000C;
}
h1 {
margin-top: 10px;
margin-bottom: 10px;
text-align:center;
font-size : 13px;
font-family: arial;
font-style:bold;
color:#FF8C00;
}
Modifié par buh31 (07 Sep 2007 - 02:01)