Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Petit défi pour vous : fullscreen et scroll horizontal
Auteur
jupelletier
# 16 Mar 2010 - 23:39:03
Citer
9 Posts
 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! confus
Modifié par jupelletier (16 Mar 2010 - 23:54)
^
gc-nomade
# 16 Mar 2010 - 23:55:15
Citer
gcyrillus en mode portable
790 Posts
 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
GC rien , mais GC encore ... et ça marche via la V.A.E. je passe d'un B.E.P. a un B.T.S. ... ce qui apparemment ne flatte que mon ego !?
Je vois le monde de ma porte, pas vous ?
http://yidille.free.fr/plux/valign 
^
Heyoan
# 17 Mar 2010 - 00:03:44
Citer
Modérateur
8101 Posts
 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)
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
jupelletier
# 17 Mar 2010 - 08:56:20
Citer
9 Posts
 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... 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.
^
Heyoan
# 17 Mar 2010 - 12:44:23
Citer
Modérateur
8101 Posts
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.
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
jupelletier
# 17 Mar 2010 - 13:57:44
Citer
9 Posts
 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.
^
Le sujet est clos.
Aller à