28173 sujets

CSS et mise en forme, CSS3

Faire coulisser une balise DIV imbriquée en overflow

Bonjour,
Tout d'abbord voici le code, cela sera plus explicite..

<style type="text/css">
#naviyear {
	list-style-image: none;
	list-style-type: none;
	height: 30px;
	width: 650px;
	margin-top: 100px;
	margin-left: 100px;
	border: 1px solid #000000;
}
#naviyear #navig {
	float: left;
	height: 30px;
	width: 25px;
	text-align: center;
	background-color: #FFCC00;
}
#naviyear #navig a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	text-decoration: none;
	color: #000000;
	display: block;
	height: 30px;
	width: 25px;
	margin: 0px;
	padding: 0px;
}
#naviyear #navig a:hover {
	background-color: #FF0000;
}
#naviyear #menpho {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 30px;
	width: 600px;
	overflow: hidden;
}
#naviyear #menpho #menphoul {
	padding: 0px;
	float: left;
	height: 30px;
	width: auto;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -100px;
}
.menphoil {
	float: left;
	height: 30px;
	width: 50px;
	list-style-image: none;
	list-style-type: none;
	background-color: #000000;
}
.menphoa {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	height: 20px;
	width: 50px;
	margin: 4px;
	padding: 0px;
	display: block;
}
.menphoa:hover {
	text-decoration: underline;
}
#naviyear #navid {
	float: left;
	height: 30px;
	width: 25px;
	text-align: center;
	background-color: #FFCC00;
}
#naviyear #navid a {
	display: block;
	margin: 0px;
	padding: 0px;
	height: 30px;
	width: 25px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #000000;
}
#naviyear #navid a:hover {
	background-color: #FF0000;
}
-->
</style>
</head>

<body>
	<div id="naviyear">
	<div id="navig"><a href="#" id="navag">&#8249;</a></div>
	<div id="menpho">
	<ul id="menphoul">
		<li class="menphoil"><a href="#" class="menphoa">1994</a></li>
		<li class="menphoil"><a href="#" class="menphoa">1995</a></li>
		<li class="menphoil"><a href="#" class="menphoa">1996</a></li>
		<li class="menphoil"><a href="#" class="menphoa">1997</a></li>
		<li class="menphoil"><a href="#" class="menphoa">1998</a></li>
		<li class="menphoil"><a href="#" class="menphoa">1999</a></li>
		<li class="menphoil"><a href="#" class="menphoa">2000</a></li>
		<li class="menphoil"><a href="#" class="menphoa">2001</a></li>
		<li class="menphoil"><a href="#" class="menphoa">2002</a></li>
		<li class="menphoil"><a href="#" class="menphoa">2003</a></li>
		<li class="menphoil"><a href="#" class="menphoa">2004</a></li>
		<li class="menphoil"><a href="#" class="menphoa">2005</a></li>
		<li class="menphoil"><a href="#" class="menphoa">2006</a></li>
		<li class="menphoil"><a href="#" class="menphoa">2007</a></li>
	</ul>
	</div><!--menpho-->
	<div id="navid"><a href="#">&#8250;</a></div>
	</div><!--naviyear-->
</body>


J'aimerais qu' un clic sur un des signes > ou < fasse défiler vers la droite ou vers la gauche la barre "chronologique" noire.
Cette barre va de 1970 à 2007, mais seulement 12 années doivent apparaîtrent. Ensuite un clic sur un date fera remonter une photo...
Le tout est-il possible en CSS/XHTML, sans utiliser du PHP ou autre Javscript ? Merci
zest a écrit :
J'aimerais qu' un clic sur un des signes > ou < fasse défiler vers la droite ou vers la gauche la barre "chronologique" noire.
Cette barre va de 1970 à 2007, mais seulement 12 années doivent apparaîtrent. Ensuite un clic sur un date fera remonter une photo...
Le tout est-il possible en CSS/XHTML, sans utiliser du PHP ou autre Javscript ?

Non, pas possible juste avec du HTML et du CSS.
Ça se fera à priori en Javascript (mais là, ça peut prendre du temps à coder, cette histoire).
Sujet clos
Aller à