28172 sujets

CSS et mise en forme, CSS3

Petit défi pour vous : fullscreen et scroll horizontal

Bonjour,

cela fait quelques heures que je passe à essayer d'obtenir ce que je veux mais rien n'y fait, alors je m'en remet, je l'avoue, un peu à vous :

le défi du soir est tout simple à comprendre... J'aimerais trouver un moyen pour que 2 div qui font 100% en width et en height de la fenêtre du navigateur se retrouvent l'une à coté de l'autre, avec un scroll horizontal.

J'ai gardé ce code de base pour y voir plus clair :


<div id="test1">TEST</div>
<div id="test2">TEST</div>




*{margin: 0; padding: 0;}
html{ height: 100%;}
body{ height: 100%;}
div{width: 100%; height: 100%;}
#test1{background: cyan;}
#test2{background: magenta;}


Evidemment, avec cet exemple, les divs sont l'une au dessus de l'autre et le scroll est comme d'hab vertical. Le but étant d'inverser tout ça.

J'espère vraiment que quelqu'un pourra m'aider, toute l'intégration d'un de mes projet est basée sur cette idée! Smiley confus
Modifié par jupelletier (16 Mar 2010 - 23:54)
Bonjour,

Ton idée n'est pas forcement bonne et le resultat a toute les chances d'etre instable , peu ergonomique et peu intuitif .

Sinon , basiquement tu peut faire ceci :

*{margin: 0; padding: 0;} 
html{ height: 100%;width:100%;} 
body{ height: 100%;width:200%;} 
div{width: 50%; height: 100%;float:left;} 
#test1{background: cyan;} 
#test2{background: magenta;}

si pour l'exemple ça va couçi couça , aucune idée de coment ça peut evolué avec des contenu et du coté du visiteur.

GC
Salut,

gc-nomade a écrit :
Ton idée n'est pas forcement bonne et le resultat a toute les chances d'etre instable , peu ergonomique et peu intuitif .
+1

Sinon je pense que c'est plutôt quelque chose comme ça :
html, body {
	height: 100%;
}
body {
	margin: 0;
}

#global {
	width: 200%;
	height: 100%;
}
#test1, #test2 {
	width: 50%;
	height: 100%;
	float: left;
}
#test1{background: cyan;} 
#test2{background: magenta;}
<div id="global">
	<div id="test1">TEST</div> 
	<div id="test2">TEST</div> 
</div>

Modifié par Heyoan (17 Mar 2010 - 00:07)
Merci à vous 2, le resultat donne exactement ce que j'ai demandé. Si je n'y ai pas pensé moi même plus tôt, c'est parce que je cherchait, et que j'aurais pu le préciser, une solution qui pourrait convenir pour un nombre n indéfini de div à 100%x100%

Du coup, j'imagine que ça change complétement la donne... Smiley ohwell

Merci aussi de vous intéresser à l'ergonomie et l'intuitivité de mon projet, mais ne vous en faites pas, je vais ajouter des gros gros boutons pour faire défiler la page en JS.
jupelletier a écrit :
Du coup, j'imagine que ça change complétement la donne...
Puisque c'est pour un slider JavaScript tu pourrais modifier les width via JavaScript.

Par exemple :
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
} 
 
#global { 
    width: auto;
    height: 100%; 
} 
div.test { 
    width: 100%; 
    height: 100%; 
    float: left; 
} 
#test1 {background: cyan;}  
#test2 {background: magenta;}
#test3 {background: thistle;}
</style>
</head>
<body>
<div id="global"> 
    <div id="test1" class="test">Test 1</div>  
    <div id="test2" class="test"><div>Test 2</div></div>  
    <div id="test3" class="test">Test 3</div>  
</div>
<script type="text/javascript"><!--
var nb_div = 0;
var oGlobal = document.getElementById('global');
var oDivGlobal = oGlobal.getElementsByTagName('DIV');
for(iDiv=0; iDiv < oDivGlobal.length; iDiv++) {
	if(oDivGlobal[iDiv].className == 'test') nb_div++;
}
oGlobal.style.width = (nb_div * 100) + '%';
for(iDiv=0; iDiv < oDivGlobal.length; iDiv++) {
	if(oDivGlobal[iDiv].className == 'test') oDivGlobal[iDiv].style.width = (100 / nb_div) + '%';
}
--></script>
</body>
</html>
(pour faire ça plus "proprement" voir getElementsByClassName par Julien.

Il risque avec cette méthode d'y avoir des problèmes d'arrondi suivant les navigateurs.
C'est très classe ça ! Faudrait bien que j'me mette sérieusement au JavaScript moi plutôt que d'adapter des trucs existants.

Je vais bosser avec ça ce soir, et je repasserai vous montrer ce que ça donne.

Merci beaucoup en tout cas pour tes contributions Heyoan.
Sujet clos
Aller à