28172 sujets

CSS et mise en forme, CSS3

Problème de scroll

Bonjour,

J'ai un problème :
- j'ai un conteneur central de 980px de large
- J'ai une div à l'intérieure qui dépasse des 2 côtés de 100 px (soit 1180px en tout), qui contient un petit slider javascript.

Je voudrai que cette div ne soit PAS prise en compte par les barres de scroll quand on réduit la taille de la fenêtre…
Si on réduit la taille entre 980px et 1180px, il n'y ai pas de scroll horizontal, la div est cachée de chaque côté.
Si on réduit la taille de la fenêtre en dessous de 980px de large, alors la barre de scroll se créée.

upload/37929-div.jpg

Cela se produit correctement avec une "position:fixed" mais du coup quand il y a un scroll vertical, cela casse mon design puisque l'image reste au même endroit. En gros je voudrai l'équivalent d'un "position:fixed" uniquement valable à l'horizontal Smiley smile

Si cela n'est pas possible en CSS, en javascript cela est-il jouable ?

Merci beaucoup pour ce forum qui m'aide régulièrement Smiley smile
salut,

parles tu d'une barre de scroll horizontale de la fenêtre du navigateur ?
ou bien d'un scroll sur un de tes divs ?
o06 a écrit :
salut,

parles tu d'une barre de scroll horizontale de la fenêtre du navigateur ?
ou bien d'un scroll sur un de tes divs ?


Je parle de la fenêtre du navigateur.

Je veux que la barre de scroll du navigateur fonctionne comme si le site était de 980px de large alors qu'il y a une div qui dépasse des 2 côtés Smiley decu
la barre de scroll horizontale du navigateur elle apparaitra si ton site contient un élément de largeur 980px et que tu descends en dessous je crois.

après pour que cette barre n'apparaisse pas tant qu'on est pas en dessous de 980px (mais en dessous de 1180px) peut être que mettant la propriété owerflow:hidden; pour le div conteneur ?
o06 a écrit :
après pour que cette barre n'apparaisse pas tant qu'on est pas en dessous de 980px (mais en dessous de 1180px) peut être que mettant la propriété owerflow:hidden; pour le div conteneur ?


J'ai essayé, de mettre des "overflow:hidden" un peu partout, en vain…
Modifié par ederntal (19 May 2011 - 18:44)
o06 à raison,

Mais il ne faut pas mettre l'overflow:hidden "... un peu partout ..." Smiley smile juste dans le bloc conteneur. (celui de 980px)
ptitvincent a écrit :
o06 à raison,

Mais il ne faut pas mettre l'overflow:hidden "... un peu partout ..." Smiley smile juste dans le bloc conteneur. (celui de 980px)


Si je met "overflow:hidden" dans le conteneur, les éléments qui dépassent de ce bloc ne sont pas visibles sur les côtés !? Moi, je veux qu'on les voient Smiley smile

Un exemple que j'ai testé rapidement :

<!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>Eulerian</title>
  		<style type="text/css">
  		#contener {
			width: 980px;
			height: 1000px;
			background-color: red;
			margin: auto;
			overflow: hidden}
		#large {
			width: 1180px;
			height: 300px;
			margin: 0 0 0 -100px;
			background-color: aqua;}
  		</style>
	</head>
	<body>
	
	<div id="contener">
		<div id="large">
		</div>
	</div>
	
	</body>
</html>

Modifié par ederntal (20 May 2011 - 11:05)
au temps pour moi, je n'avais pas compris que tu souhaitais afficher le reste de la div.

Accepterai-tu de nous/me mettre ton travaille en ligne ? j'aimerais jouer avec plutôt que de re-créer la situation, si cela ne t’ennuies pas.
Modifié par ptitvincent (20 May 2011 - 14:02)
ptitvincent a écrit :
au temps pour moi, je n'avais pas compris que tu souhaitais afficher le reste de la div.

Accepterai-tu de nous/me mettre ton travaille en ligne ? j'aimerais jouer avec plutôt que de re-créer la situation, si cela ne t’ennuies pas.


Voici (avec de fausses images) le squelette du site :
http://www.ederntal.com/test-alsa/

Il y a :
- le header noir, qui fait 100% de large, avec un conteneur centré de 980px pour le logotype (et un menu à venir sur la droite)
- le slider avec 2 images qui dépassent du conteneur de chaque côté. Il fait exactement 1289px. L'information principale contenue dans ce slider sera à l'interieur des 980px, mais des éléments graphiques partiront sur les côtés.
- Le reste du site qui sera en dessous, dans un conteneur centré de 980px.

Quand on réduit la taille de la fenêntre, le scroll se créé logiquement dès que la fenêtre être plus petite que 1289px de large. Je voudrai que le scroll ne commence qu'à 980px !

Merci pour votre aide Smiley smile
Sujet clos
Aller à