Bonjour 
J'ai un petit problème avec mon site :
Sur la page ici :
http://www.studio20.info/back/site/cv.html
il y'a le header
et en dessous le contenu.
dans le contenu, il y'a une div, si je ne met pas de marge en haut, la div est collé au header, vu qu'elle est placée tout en haut du contenu.
je voulais mettre une margin-top pour avoir entre le haut du contenu et le haut de la div, seulement le contenu se déplace avec, la div reste tout en haut du contenu.
j'espere que vous arrivez à comprendre mon charabia...
comment résoudre le probleme ?
code HTML :
CSS :
Merci
Modifié par fixyou (21 Mar 2006 - 10:46)
J'ai un petit problème avec mon site :
Sur la page ici :
http://www.studio20.info/back/site/cv.html
il y'a le header
et en dessous le contenu.
dans le contenu, il y'a une div, si je ne met pas de marge en haut, la div est collé au header, vu qu'elle est placée tout en haut du contenu.
je voulais mettre une margin-top pour avoir entre le haut du contenu et le haut de la div, seulement le contenu se déplace avec, la div reste tout en haut du contenu.
j'espere que vous arrivez à comprendre mon charabia...
comment résoudre le probleme ?
code 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>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title>Studio 20 - Curriculum Vitae</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
</head>
<body>
<div id="conteneur_global">
<div id="header">
<ul id="main">
<li><a href="http://www.studio20.info">ACCUEIL</a></li>
<li><a href="http://www.studio20.info/artistes.html">ARTISTES</a></li>
<li><a href="http://www.studio20.info/conception.html">CONCEPTION</a></li>
<li><a href="http://www.studio20.info/conception.html">LIENS</a></li>
<li><a href="http://www.studio20.info/cv.html">CV</a></li>
</ul>
</div>
<div id="contenu">
<div id="page">
<h1>Le commencement...</h1>
<p class="present">Passionnée par l'informatique, j'ai commencé à m'intéresser à la création de sites internet durant l'année 2004. J'ai lu quelques tutoriaux sur le langage HTML puis j'ai découvert les feuilles de styles CSS via le forum d'Alsacréations. Après m'être plongée dans le livre CCS 2 Pratique du design web de Raphaël Goetter (très bon livre pour l'apprentissage des feuilles de styles), j'ai décidé de commencé à mettre en pratique ce que j'avais retenu. Divers thèmes de sites ont traversés mon esprit : je ne voulais pas d'un site trop lourd et long à faire pour débuter, ni d'un site trop personnel, l'idée de présenter mon univers musical m'est venue ! </p>
<h1>Moi, moi et moi !</h1>
<p class="present">Cette année je repasse mon baccalauréat STT Action et Communication Administratives en candidat libre. Si tout se passe bien j'intégrerais le CFA Descartes de Champs sur Marne pour suivre un DUT Services et Réseaux de Communication en alternance.</p>
</div>
<p id="footer">Copyright 2006 - www.studio20.info - tous droit réservés | Hébergement | Contact</p>
</div>
</div>
</body>
</html>
CSS :
body {
margin: 0;
padding: 0;
text-align: left;
font: 0.7em "Arial", arial, sans-serif;
background: #fff;
}
#conteneur_global {
position: relative;
width: 700px;
margin: 0 auto;
padding: 0;
background: #fff;
border: 1px solid #818281;
}
* {margin: 0; padding: 0;}
h1 {
margin: 5px 5px;
text-align: left;
color: #D20039;
font: italic bold 1.1em Arial, sans-serif;
}
a img {
border: none;
}
.present {
margin: 0;
padding: 0;
text-align: justify;
color: #888686;
font: bold 1em Arial, sans-serif;
}
#header {
width: 700px;
height: 200px;
background-image: url(design/logo.png);
border-bottom: 1px solid #fff;
}
ul#main {
position: absolute;
margin-top: 45px;
margin-left: 275px;
padding: 0;
font: bold 1em Arial, sans-serif;
list-style-type: none;
}
ul#main li {
text-align: center;
}
ul#main li a {
width: 100px;
line-height: 15px;
font: 1.5em Trebuchet MS, sans-serif;
font-weight: bold;
letter-spacing: 1px;
color: #fff;
display: block;
text-decoration: none;
}
ul#main li a:hover {
color: #90AED6;
}
#contenu {
width: 700px;
height: 415px;
margin: 0;
padding-top: 10px;
background: #E6E3E4;
}
#zonegauche {
float: left;
background: #E6E3E4;
width: 250px;
height: 373px;
border: 1px dashed #AAA8A9;
}
#news {
overflow: auto;
width: 250px;
height: 160px;
margin: 0;
padding: 0;
background: #fff;
border: 1px dashed #AAA8A9;
}
#enbref {
width: 250px;
height: 183px;
margin: 30px 0;
background: #fff;
border: 1px dashed #AAA8A9;
}
#zonedroite {
float: left;
background: #E6E3E4;
width: 290px;
height: 375px;
border: 1px dashed #AAA8A9;
}
#lastfm {
width: 290px;
height: 375px;
margin: 0;
background: #fff;
border: 1px dashed #AAA8A9;
}
#page {
width: 675px;
height: 380px;
margin: 0;
background: #fff;
border: 1px dashed #AAA8A9;
}
#footer {
margin: 0;
padding: O;
clear: left;
color: #525252;
font: bold 0.9em Arial, sans-serif;
text-align: center;
border-top: 1px dotted #818281
}
Merci
Modifié par fixyou (21 Mar 2006 - 10:46)
