Je voudrais scroller horizontalement.

massstreamer · 23 Juin 2005

Bonjour à tous. J'espère qu'une bonne âme va une foi de plus me sauver la peau sur ce forum.

Comme expliqué dans le titre, je voudrais que ma div de gauche dans l'exemple ci-dessous fasse un scrolling horizontal. Le tout sans javascript et conforme W3C.

J'ai essayé overflow:auto avec une hauteur en pxl et pour les boites contenues dedans, un attribut float:left.

Voici le code:


<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="fr">
  <head>
  <style type="text/css">
    .conteneur_volets{
	border:1px solid #000000;
	height:142px;
	width:700px
	}
	.gauche{
	overflow:auto;
	position:relative;
	width:154px;
	height:130px;
	float:left;
	margin:5px;
	border:1px solid #ff0000;
	}
	.gauche div{
	overflow:auto;
	position:relative;
	background-color:#bbbbbb;
	height:120px;
	width:120px;
	margin:5px;
	float:left; /* sensé faire partir les box vers la droite */
	}
	.droite{
	height:130px;
	border:1px solid #00ff00;
	margin:5px 5px 5px 166px;
	}
	.spacer{clear:both}
  </style>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  </head>
  <body>
    <div class="conteneur_volets">
   <div class="gauche">
     <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
  <div>07</div>
  <span class="spacer"> </span>
   </div>
   <div class="droite">Je voudrais que ce foutu ascenceur soit horizontal.</div>
	</div>
  </body>
</html>

J'accepte de recourir au javascript si il n'y a pas moyen autrement et s'il est compatible dans un max de navigateur.(desiderata légitime du client)

merci d'avance.

Axe · 24 Juin 2005

Peut-être que ceci pourra te donner des idées :

http://www.csszengarden.com/?cssfile=048%2F048%2Ecss

Mamat · 24 Juin 2005

Hm je ne pige pas le sens de ta question... si tu veux avoir un ascenceur horinzontal alors fais une fenetre trop large !

Ou alors c'est une "pseudo-iframe" avec l'attribut overflow:scroll ?

massstreamer · 25 Juin 2005

Hm je ne pige pas le sens de ta question... si tu veux avoir un ascenceur horinzontal alors fais une fenetre trop large !
Ou alors c'est une "pseudo-iframe" avec l'attribut overflow:scroll ?

<{POST_SNAPBACK}>

Merci c'est presque ce que je cherchais. C'est bête, j'avais vraiment pas pensé à rajouter une fenêtre trop large. :lol:

Faudrais juste que cette fenêtre trop large puisse s'étendre parceque la série de <divs> numérotées est appelée d'un serveur et je n'en connais pas le nombre à l'avance. En attendant la fenêtre trop large sera vraiment trop large, bien que ce scroll à ralonge donne sur du vide (un peu bizarre).

Je pense aussi aux attributs css "min-width" ça pourrait améliorer cette solution (mais faut que je vérifie la compatibilité).

Pour le overflow:scroll, ça me donne deux ascenceurs (vertical et horizontal) je ne veux qu'un seul ascenceur horizontal.

Mais on vas y arriver, c'est cool, merci.

massstreamer · 25 Juin 2005

Peut-être que ceci pourra te donner des idées :

http://www.csszengarden.com/?cssfile=048%2F048%2Ecss

<{POST_SNAPBACK}>

Je connais mais ça ne s'applique pas exactement à mon problême. Mais je recommande cette adresse à tous ceux que le webdesign de qualité intéresse.

Mamat · 25 Juin 2005

A toi de faire en sorte que la hauteur tienne dans le bloc parent comme ca il n'y aura un ascenceur qu'orizontal.

massstreamer · 25 Juin 2005

A toi de faire en sorte que la hauteur tienne dans le bloc parent comme ca il n'y aura un ascenceur qu'orizontal.

<{POST_SNAPBACK}>

Je ne comprend pas. La hauteur de quelle fenêtre? la gauche, les divs numérotées?

Sinon j'étais parti sur la piste de l'attribut css "min-width" mais ça n'a pas marché.

Alors, j'ai tapé un javascript qui calcule le nombre de "<divs> numérotées" et leur encombrement total pour en déduire la largeur de la <div id="conteneur_div">.

Et ça marche. (J'ai juste du transformer les class en id).

Un petit bémol cependant, IE(encore lui :thumbdown: ) n'interprète pas du tout les dimensions de la même manière.

Voici le code.


<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="fr">
  <head>
  <script type="text/javascript">
  function set_width(ID,encombrement){
  var conteneur = document.getElementById(ID);
  var nbEnfants = conteneur.childNodes.length;
  var Largeur = ( nbEnfants / 3 ) * encombrement;
  document.getElementById(ID).style.width = Largeur + "px";
  }
  </script>
  <style type="text/css">
    #conteneur_volets{
	border:1px solid #000000;
	height:165px;
	width:700px
	}
	#gauche{
	overflow:auto;
	position:relative;
	width:130px;
	height:153px;
	float:left;
	margin:5px;
	padding:0;/* Pour les browsers qui ne l'atribueraient pas par défaut */
	border:1px solid #ff0000;
	}
	* html #gauche{margin:5px 5px 5px 3px;width:155px}/* hack qui donne des infos juste aux navigateurs IE */
	#conteneur_divs{/* Fenêtre trop large */
	width:100px
	}
	#conteneur_divs div{
	overflow:auto;
	position:relative;
	background-color:#bbbbbb;
	height:120px;
	width:120px;
	margin:5px;
	float:left;
	}
	* html #conteneur_divs div {margin:5px 5px 5px 3px}
	#droite{
	height:153px;
	border:1px solid #00ff00;
	margin:5px 5px 5px 145px;
	}
	.spacer{clear:both}
  </style>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  </head>
  <body onload="java script:set_width('conteneur_divs',182)">
    <div id="conteneur_volets">
   <div id="gauche">
     <!-- Fenêtre trop large -->
  <div id="conteneur_divs">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
  </div>
   </div>
   <div id="droite"></div>
	</div>
  </body>
</html>

Faudrais juste un sniffeur javascript qui repère IE dans une structure conditionnelle avec une instruction qui réajuste la largeur de <div id="conteneur_div">

P.S: C'est compatible Opera, Firefox et IE(si j'arrive à faire le sniffeur).

Mamat · 25 Juin 2005

Le min-width n'est pas géré par ie effectivement... par contre tu parle d'id tu n'as pas le droit d'avoir deux fois le meme id sur la meme page... jusqte au cas ou

massstreamer · 25 Juin 2005

Le min-width n'est pas géré par ie effectivement... par contre tu parle d'id tu n'as pas le droit d'avoir deux fois le meme id sur la meme page... jusqte au cas ou

<{POST_SNAPBACK}>

C'est pas grave le seul élément qui revient plusieurs fois, à savoir la/les <div> contenues dans <div id="conteneur_divs"> n'a pas d'ID mais est/sont atteinte(s) par le sélecteur css: #conteneur_divs div{}

Donc pas de problème.

massstreamer · 27 Juin 2005

Toutes mes excuses pour le javascript additionnel qui calcule la largeur de la fenêtre trop large, il y avais quelques erreurs.

Le voici entièrement corrigé (à remettre dans la balise <head> à la place de l'autre).

  <script type="text/javascript">
  /* Script édité par Erik Lamy avec l'aide du "QuickGuide - développeur - Javascript" de Michel Dreyfus aux éditions Campus Press */
  function set_width(ID,encombrement){
  var conteneur = document.getElementById(ID);
  var nbCHILD = conteneur.childNodes.length;
  var nav = navigator.appName;
 	 if ((j = navigator.userAgent.indexOf("Opera")) != -1){/* si c'est Opera (Obligatoir car Opera est un caméléon */
  var nbEnfants = (nbCHILD - 1)/2;
  alert('nombre d\'enfants : ' + nbEnfants);
  }
	else if ( nav == 'Microsoft Internet Explorer' ){/* si c'est Microsoft */
  var nbEnfants = nbCHILD;
  alert('nombre d\'enfants : ' + nbCHILD);
  }
	else if ( nav != 'Microsoft Internet Explorer' ){/* DOM ou autres navigateurs */
  var nbEnfants = (nbCHILD - 1)/2;
  alert('nombre d\'enfants : ' + nbEnfants);
  }

  var Largeur = nbEnfants * encombrement;
  document.getElementById(ID).style.width = Largeur + "px";
  }
  </script>

Ca marche sur Opera, IE et Firefox. Si qulqu'un a envie de le tester dans d'autres navigateurs, je suis ouvert à toute remarque.

Connexion

Je voudrais scroller horizontalement.

Sujets conseillés

massstreamer

Axe

Mamat

massstreamer

massstreamer

Mamat

massstreamer

Mamat

massstreamer

massstreamer

Veuillez vous connecter pour commenter

Parcourir

Activité