28172 sujets

CSS et mise en forme, CSS3

Texte aligné dans une div en overflow

Bonjour,

Voir le lien :
http://www.an16.org/viewforum.php?f=261

J'aimerai que le texte "les 50 derniere..." reste à sa place, c'est à dire entre la barre de scroll et les images.

Mais que le texte soit centré dans la partie visible de la div. Elle fait 800px dont le texte devrait être centré 400px. Quelque soit la traille de l'overflow.
Et que ce texte y reste toujours centré même quand je bouge la scroll barre.
Donc quand je bouge la scroll barre, les images défiles mais pas le texte.

Et j'ai pas d'idée sur le sujet Smiley decu
Il y a toujours un truc qui ne va pas que je tente d'y arriver.

Bonne journée
J'ai tenté des truc mais je n'y arrive pas.
Je te montre mon code que je recompose ici (en retirant l'inutile)

<div align='center'>
<div style='max-width:700px; border:solid 1px #aaa; padding:5px; overflow-x:scroll; overflow-y:hidden IE2'>
<table class='Table_100'><tr><td align='left'><table class='Table_100'><tr>

Dans une boucle, un td par image :
<td align='center'>mon image</td>
Fin de la boucle

</tr></table></td></tr><tr><td align='left'>
<a href='viewartiste.php?b=ventes&a=".$url_f."'><font color='#da26d4'><b>Les 50 dernières oeuvres mises en vente.</b></font></a></td></tr></table>
</div></div><br>


La fenêtre est visible sur la 1ere page de 
http://www.an16.org

Impossible de faire rester le texte entre les images et la scrolllbar, au centre horizontal des 700px de la div, sans que le texte ne bouge quand la scrollbar bouge.

Bonne journée
Bonsoir à toutes et à tous,

voici une solution qui fonctionne : un texte (id=banniere) qui subit le scrolling et un autre texte (id=fixe) toujours fixe sur le scrolling et le tout dans une div. J'ai fait cela en javascript mais rien ne t'empêche de le faire aussi en jquery.
<!doctype html>
<html>
<head>
<title>Texte fixe sur un scrolling</title>

<!-- ========== -->
<!-- JavaScript -->
<!-- ========== -->

<script type="text/javascript">
function scrollIt()
{
	var posit = document.getElementById("banniere").scrollLeft + 20;	
	document.getElementById("fixe").style.left = posit + "px";
}
</script>

<!-- ====================== -->
<!-- Cascading Style Sheets -->
<!-- ====================== -->

<style type="text/css">
#banniere {
			position			: relative;
			width				: 800px;
			height				: 60px;
			overflow			: scroll;
			white-space			: nowrap;
			border				: 3px double red;
}

#fixe {
			position			: absolute;
			left				: 20px;
			background-color	: lightyellow;
}
</style>
</head>

<body>

	<div id="banniere" onscroll="scrollIt();">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
	<div id="fixe">un texte toujours au même endroit</div>
	</div>
</body>
</html>
@+
Modifié par Artemus24 (17 May 2012 - 22:21)
Modérateur
J'ai une solution beaucoup plus simple, cross-browser, légère et idéale:
mettre le lien en dehors de la div scrollable. genre juste en dessous de la div par exemple. ça fonctionne parfaitement sans une ligne de js ou de css Smiley biggrin
Bonjour kustolovic,

bien sûr que l'on peut faire différemment !
Personnellement, ce titre, je l'aurai mis en dehors de la zone scrolling.
Sinon, j'essaye de répondre à la question posée.

@+
Merci pour ton code Smiley smile
Je dois l'ajuster pour ma page mais il fonctionne bien comme je le veux.
J'ai compris le principe qui était tout simple, seulement je ne savait pas qu'on pouvait le faire si facilement.

Merci
Bonne journée
EDIT :

J'ai du refaire mais en prenant ton principe pour modèle.


nb : quand je tente de connaitre le width qui est dans une feuille de style, ca me répond vide Smiley decu Mais c'est bien pris en compte. C'est juste vide dans l'alerte, donc j'ai collé des valeur à 2 endroit au lieu de coller de appel de valeur.

<script type="text/javascript">
function scrollIt()
{
	if (document.body){ window_long = (document.body.clientWidth);}
	else{ window_long = (window.innerWidth);}
	// 80 = 80% soit la longueur de la div banniere_vente dans son style
	// 150 = 150 px soit la moitié de la longueur de la div banniere_vente_fixe dans son tyle 
	posit = ((document.body.clientWidth * 80 / 100)/2)-150+document.getElementById("banniere_vente").scrollLeft;
	document.getElementById("banniere_vente_fixe").style.left = posit + "px";
}
window.onresize = function() {scrollIt();}

</script>


<div align='center'>
<div id='banniere_vente' onscroll='scrollIt()' class='banniere_vente'>
mes trucs
<div id='banniere_vente_fixe'>
<a href='".$phpbb_root_path."viewartiste.php?b=ventes&a=".$url_f."'><font color='#da26d4'><b>Les 50 dernières oeuvres mises en vente.</b></font></a>
</div></div></div><br>


<script type="text/javascript">
if (document.body){var window_long = (document.body.clientWidth);}
else{var window_long = (window.innerWidth);}
// 80 = 80% soit la longueur de la div banniere_vente dans son style
// 150 = 150 px soit la moitié de la longueur de la div banniere_vente_fixe dans son tyle 
var posit = ((document.body.clientWidth * 80 / 100)/2)-150;
document.getElementById("banniere_vente_fixe").style.left = posit + "px";
</script>

Modifié par westernz (19 May 2012 - 13:17)
Sujet clos
Aller à