onjour à tous,
Cela fais quelques jours que je penche sur un problème sans résultat, lorsque je réduis ou augmente la fenêtre de mon navigateur, un des éléments de mon site bougent comme je le souhaite, mais pas l'autre (mon titre), je voudrais que celui-ci suive le mouvement de mon contenu et ne reste pas statique.
Par exemple si j'ai une marge de 100px entre mon contenu et mon titre, je voudrais que cette marge de 100px reste ainsi que j'augmente ou diminue la taille de la fenêtre.
Voici mon code:
Cela fais quelques jours que je penche sur un problème sans résultat, lorsque je réduis ou augmente la fenêtre de mon navigateur, un des éléments de mon site bougent comme je le souhaite, mais pas l'autre (mon titre), je voudrais que celui-ci suive le mouvement de mon contenu et ne reste pas statique.
Par exemple si j'ai une marge de 100px entre mon contenu et mon titre, je voudrais que cette marge de 100px reste ainsi que j'augmente ou diminue la taille de la fenêtre.
Voici mon code:
<!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=UTF-8" />
<title>Jules Egger</title>
<link rel="stylesheet" media="screen" type="text/css" title="style css" href="style.css" />
</head>
<body>
<div id="site">
<div id="vignettes">
<a href="jules_egger_1.html"><img src="vignettes/vignette_44.jpg" width="160" height="103" style="padding-right:15px;"/></a>
<img src="vignettes/vignette_28.jpg" width="160" height="103" style="padding-right:15px;"/>
<img src="vignettes/vignette_18.jpg" width="160" height="103" style="padding-right:15px;"/>
<img src="vignettes/vignette_31.jpg" width="160" height="103" style="padding-right:15px;"/>
<br />
<a href="series/jules_egger_2.html"><img src="vignettes/vignette_35.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" /></a>
<img src="vignettes/vignette_24.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/vignette_10.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/vignette_4.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<br />
<a href="series/jules_egger_3.html"><img src="vignettes/vignette_42.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" /></a>
<img src="vignettes/vignette_47.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/vignette_19.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/vignette_38.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<br />
<a href="series/jules_egger_4.html"><img src="vignettes/vignette_29.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" /></a>
<img src="vignettes/vignette_45.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/vignette_6.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/vignette_33.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<br />
<a href="series/jules_egger_5.html"><img src="vignettes/vignette_3.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" /></a>
<img src="vignettes/vignette_40.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/vignette_8.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/vignette_15.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
</div><!--fin div vignettes -->
<div id="titre">
<h1> Elfy ****</h1>
<h2> <a href="personnalites.html">Personnalités</a> - <a href="studio.html">Studio</a> - <a href="infos.html">Infos</a> - <a href="contact.html">Contact</a></h2>
</div><!--fin div titre -->
</div><!--fin div site -->
</body>
</html>
#vignettes {
width:800px;
margin-left:90px;
margin-top:90px;
margin-bottom:90px;
}
#titre {
float:right;
}
h1 {
width:800px;
color:#000;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
letter-spacing:4px;
position:absolute;
left:900px;
top:475px;
}
h2 {
width:800px;
color:#000;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
position:absolute;
left:900px;
top:525px;
}
a {
color:#000000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}