28172 sujets

CSS et mise en forme, CSS3

Div & Ascenseur

Bonjour à tous !

Je bloque sur le problème suivant : Comment faire pour que la div de droite ne déclenche pas l'ascenseur horizontal ? Actuellement, l'image de gauche ne s'affiche qu'à partir d'une résolution de 1920px de large. Ainsi en 1024px ou 1280px, seule la partie du milieu est visible. Seulement, je n'arrive pas à trouver la solution (hors frames) pour masquer l'ascenseur en dehors de la zone centrale (+/- 1000px).

D'avance merci...



!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>CSS</title>

<style>
body {
	color: #FFF;
}

.bande {
	left: 50%;
	top: 50%;
	height: 500px;
	width: 100%;
	margin-top: -250px;
	margin-left: -50%;
	position: absolute;
	background-color: #333;
	z-index: 1;
	text-align: center;
}

.gauche {
	left: 50%;
	top: 50%;
	height: 100px;
	width: 100px;
	margin-top: -50px;
	margin-left: -900px;
	position: absolute;
	background-color: #F00;
	z-index: 2;
	text-align: center;
}

.droite {
	left: 50%;
	top: 50%;
	height: 100px;
	width: 100px;
	margin-top: -50px;
	margin-left: 800px;
	position: absolute;
	background-color: #F90;
	z-index: 2;
	text-align: center;
	
}
</style>
</head>

<body>
<div class="bande">Bande centrale</div>
<div class="gauche">Gauche</div>
<div class="droite">Droite</div>
</body>
</html>

Modifié par webmc (13 Jan 2012 - 18:24)
Bonjour et merci de ton intervention Smiley cligne !

Et bien, l'exemple concret est présent dans mon premier post avec le code CSS et la partie HTML.

Sur l'exemple, les cubes de couleur apparaissent lorsque la fenêtre est d'une largeur d'environ 1650px. Ils sont complètement visibles avec une largeur d'écran de 1920px. Résolution avec laquelle, il n'y a pas d'ascenseur horizontal.

Et, j'aimerai que le cube orange présent à droite ne déclenche pas l’ascenseur horizontal si la fenêtre est réduite à une largeur inférieure à 1920px.

Je connais un peu overflow mais si celui-ci est utile à la situation, je ne vois pas bien comment le mettre à profit Smiley ohwell

Peut-être que la solution passe obligatoirement par du JS ?
Bonjour,

N'ayant aucune idée de la mise en page exacte que tu essayes d'obtenir, pas grand chose à conseiller ici. On peut voir un design ou un schéma?
ReBonjour,

En complément de mon post destiné à Benkusz et pour mieux exprimer mon souhait à fvsch, voici un site (semble-t'il aidé par du javascript) qui permet de découvrir le décor en arrière-plan sans déclencher l'ascenseur horizontal : http://www.chapeaupointu.com

De mon côté, je préférerai tout de même que l’ascenseur se déclenche en dessous d'une largeur de 1024px. Sachant que dans mon projet, il doit y'avoir un centrage automatique horizontal et vertical.
Dans le site que tu donnes en exemple, ils ont placé des images de décoration de 2000px de large comme image de fond d'éléments vides (DIV) positionnés en absolu. Quand tu positionnes un élément en absolu et qu'il dépasse du viewport (zone d'affichage du navigateur) en bas ou à droite, ça va effectivement faire apparaitre une barre de défilement. Pour éviter ce souci ils ont utilisé un overflow-x: hidden; sur l'élément BODY.

Deux choses à noter:
1. Tu aurais pu retrouver ces informations toi-même, en analysant le code du site que tu donnes en exemple. Smiley cligne Pour te faciliter la tâche tu peux utiliser des outils tels que Firebug ou Web Inspector, en mode «Inspection», par exemple.
2. Pour réaliser ces éléments un peu subtils du design du site, le fait d'utiliser des éléments de 2000px de large est une technique possible mais ce n'est à mon avis pas la meilleure. Il y a d'autres solutions qui n'imposent pas le recours à overflow ou overflow-x.

Voilà donc pour chapeaupointu.com.

Par ailleurs j'ai testé le code que tu as donné plus haut (petite remarque: une page de test en ligne ça permet de tester directement un code sans avoir à recréer la page en local), et apparemment overflow-x: hidden; pourrait être une solution. Mais sans savoir quels contenus et quels besoins réels de design se cachent derrière ces rectangles colorés, difficile à dire.
Bonjour !

Avec un peu de retard, je viens vous remercier. Fvsch m'a bien aidé. En effet, overflow-x: hidden; sur l'élément BODY a réglé le problème de l'ascenseur.

Je viens de découvrir Web Inspector qui effectivement peut-être utile.

Dans l'alinéa 2, tu parles d'une autre technique. Aurais-tu un lien qui évoquerait la technique n'utilisant pas overflow ? Car, ce qui m'ennuie un peu, c'est que l'ascenseur disparaît totalement alors qu'il serait préférable de faire disparaître ce dernier en fonction d'une largeur d'écran prédéfinie.

Merci encore d'avoir pris un peu de temps !
webmc a écrit :
Dans l'alinéa 2, tu parles d'une autre technique. Aurais-tu un lien qui évoquerait la technique n'utilisant pas overflow ?

Il y en a plusieurs et ça dépend de ce qu'on veut faire. Mais en gros on peut placer des images de fond sur des éléments ou conteneurs qui ne seront pas plus larges que le viewport (zone d'affichage du navigateur). Ça peut être:
- l'élément HTML (racine) ou BODY;
- un conteneur (DIV le plus souvent);
- un élément de décoration positionné en absolu, et dimensionné avec left:0;right:0 pour prendre toute la largeur du viewport mais pas plus.
Merci fvsch,
Je vais étudier ça à l'occasion...
A la vue ton nombre impressionnant de posts, merci de faire partager ta passion du web Smiley smile
Sujet clos
Aller à