Webmaster Hub > Je voudrais scroller horizontalement.

Version complète: sur le forum Webmaster Hub : Je voudrais scroller horizontalement.

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

massstreamer

jeudi 23 juin 2005 à 15:59

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:

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">&nbsp;</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

vendredi 24 juin 2005 à 11:18

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

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

Mamat

vendredi 24 juin 2005 à 13:59

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

samedi 25 juin 2005 à 09:31

CITATION(Mamat @ vendredi 24 juin 2005, 14h59)

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 ?

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

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

samedi 25 juin 2005 à 09:45

CITATION(Axe @ vendredi 24 juin 2005, 12h18)

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

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

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

samedi 25 juin 2005 à 14:26

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

samedi 25 juin 2005 à 16:44

CITATION(Mamat @ samedi 25 juin 2005, 15h26)

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

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

) n'interprète pas du tout les dimensions de la même manière.

Voici le code.

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

samedi 25 juin 2005 à 16:48

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

samedi 25 juin 2005 à 17:24

CITATION(Mamat @ samedi 25 juin 2005, 17h48)

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

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

lundi 27 juin 2005 à 16:09

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).

CODE

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.