Bonjour à tous,
Encore un problème de positionnement dans une page :
J'ai créé une page avec des éléments en positions absolues sur une surface plus large que l'écran d'affichage.
Je souhaite maintenant insérer une "ligne de temps" centrée verticalement à 50% de la hauteur de la page affichée et autoriser un scroll horizontal de cette règle qui va jusqu'à 1800px et qui est donc plus large que la page affichée.
Avec les instructions "position: fixed; top: 50%;", je vois toujours la même partie de la règle, mais le positionnement vertical est correct.
Avec les instructions "position: absolute; top: 50%;", le déplacement horizontal de ma régle est correct, mais elle disparait avec le déplacement vertical.
En clair, je n'arrive pas à résoudre la contradiction entre positionner verticalement ma règle à un endroit fixe et autoriser le déplacement horizontal.
Merci.
Encore un problème de positionnement dans une page :
J'ai créé une page avec des éléments en positions absolues sur une surface plus large que l'écran d'affichage.
Je souhaite maintenant insérer une "ligne de temps" centrée verticalement à 50% de la hauteur de la page affichée et autoriser un scroll horizontal de cette règle qui va jusqu'à 1800px et qui est donc plus large que la page affichée.
Avec les instructions "position: fixed; top: 50%;", je vois toujours la même partie de la règle, mais le positionnement vertical est correct.
Avec les instructions "position: absolute; top: 50%;", le déplacement horizontal de ma régle est correct, mais elle disparait avec le déplacement vertical.
En clair, je n'arrive pas à résoudre la contradiction entre positionner verticalement ma règle à un endroit fixe et autoriser le déplacement horizontal.
Merci.
<!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">
<head>
<title>test</title>
<style type='text/css' media='all'>
html, body { text-align: center; font-family: Arial; font-size: 10pt;}
p { position: absolute; width: 100px; height: 20px; left: 0px; border: 1px solid black;}
</style>
<style type='text/css' media='all'>
ul.annees {
position: fixed;
width: 1800px;
top: 50%;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.annees li {
border-right: 1px solid red;
color: Gray;
float: left;
width: 5.87%;
}
ul.annees li.dernier {
border-right: 0px;
float: left;
width: 5%;
}
</style>
</head>
<body>
<div id='frise'>
<ul class='annees'>
<li>1960</li>
<li>1950</li>
<li>1940</li>
<li>1930</li>
<li>1920</li>
<li>1910</li>
<li>1900</li>
<li>1890</li>
<li>1880</li>
<li>1870</li>
<li>1860</li>
<li>1850</li>
<li>1840</li>
<li>1830</li>
<li>1820</li>
<li>1810</li>
<li class='dernier'>1800</li>
</ul>
</div>
<p style='top: 120px; left: 10px'>du texte...</p>
<p style='top: 240px; left: 200px'>du texte...</p>
<p style='top: 360px; left: 400px'>du texte...</p>
<p style='top: 480px; left: 600px'>du texte...</p>
<p style='top: 600px; left: 800px'>du texte...</p>
<p style='top: 720px; left: 1000px'>du texte...</p>
<p style='top: 840px; left: 1200px'>du texte...</p>
<p style='top: 960px; left: 1400px'>du texte...</p>
<p style='top: 1080px; left: 1600px'>du texte...</p>
<p style='top: 1200px; left: 1800px'>du texte...</p>
</body>
</html>