Demande d'aide pour l'élaboration de deux idées
Maarek28
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention - 26 mai 2014 à 02:29
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention - 26 mai 2014 à 02:29
A voir également:
- Demande d'aide pour l'élaboration de deux idées
- Deux ecran pc - Guide
- Nombre de jours entre deux dates excel - Guide
- Comment faire deux colonnes indépendantes dans word - Guide
- Deux whatsapp sur un téléphone - Guide
- Itinéraire google map entre deux adresses - Guide
2 réponses
Salut, pour le déroulement latéral il faut utiliser jquery.
google : jquery scoll horizontal
premier lien : https://www.sitepoint.com/10-jquery-horizontal-scroll-demos-plugins/
pour le menu fix
il faut mettre dans ton css par exemple :
bonne journée
google : jquery scoll horizontal
premier lien : https://www.sitepoint.com/10-jquery-horizontal-scroll-demos-plugins/
pour le menu fix
il faut mettre dans ton css par exemple :
#menu{ position: fixed; }
bonne journée
animostab
Messages postés
2829
Date d'inscription
Statut
Membre
Dernière intervention
738
css suffit pour ca pas besoin de jquery
Maarek28
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
Merci infiniement pour l'utilité Fixed, si simple et si pratique =)
Salut
en fait le principe est le suivant
<div id="gauche"> ici ce qui est a gauche </div>
<div id="droite">
<div class="box">contenu 1</div>
<div class="box">contenu 2</div>
<div class="box">contenu 3</div>
etc...
</div>
le css
html, body {
margin:0;
padding:0;
height:100%;
}
#gauche {
position:fixed;
top:0;
left:0;
width: 200px;
height: 100%;
border:1px solid black;
background: white;
z-index:10;
opacity:0.8;
}
#droite {
position: relative;
height:100%;
width:5000px; /** a adapter selon le nombre de .box**/
margin : 100px 0 100px 210px;
z-index:1;
}
.box {
display:inline-block;
width: 300px;
height: 500px;
margin: 50px;
border:1px solid black;
}
voila le principe est a adapter selon ce que tu veux.
ca te vas ?
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
en fait le principe est le suivant
<div id="gauche"> ici ce qui est a gauche </div>
<div id="droite">
<div class="box">contenu 1</div>
<div class="box">contenu 2</div>
<div class="box">contenu 3</div>
etc...
</div>
le css
html, body {
margin:0;
padding:0;
height:100%;
}
#gauche {
position:fixed;
top:0;
left:0;
width: 200px;
height: 100%;
border:1px solid black;
background: white;
z-index:10;
opacity:0.8;
}
#droite {
position: relative;
height:100%;
width:5000px; /** a adapter selon le nombre de .box**/
margin : 100px 0 100px 210px;
z-index:1;
}
.box {
display:inline-block;
width: 300px;
height: 500px;
margin: 50px;
border:1px solid black;
}
voila le principe est a adapter selon ce que tu veux.
ca te vas ?
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Oui tout cela me semble bien mais en fait selon ce que je peux voir, je dois déterminer une grandeur de page sur la largeur à l'avance (Ce qui n'est pas le cas pour un défilement vertical)
Et donc, je pense que ce que tu me donne ne me permet pas de dérouler vers la droite en utilisant la molette de la souris (Si oui, j'aimerais savoir quel partie du code le permet car là je ne vois pas)
En tout cas, merci si c'est le mieux que je peux obtenir du CSS/HTML ce sera parfait.
Et donc, je pense que ce que tu me donne ne me permet pas de dérouler vers la droite en utilisant la molette de la souris (Si oui, j'aimerais savoir quel partie du code le permet car là je ne vois pas)
En tout cas, merci si c'est le mieux que je peux obtenir du CSS/HTML ce sera parfait.
avec le code que je t'ai donné tu rajoute ce pluging jquery pour scroller avec la molette
tu recupère le js
http://www.designedbyaturtle.co.uk/demos/horizontal-scrolling/jquery.mousewheel.min.js
tu crée un dossier que tu nomme js et que tu mets a la racine de ton site
dans ce dossier js tu mets le fichier "/jquery.mousewheel.min.js"
ensuite dans ta page dans le <head> tu mets ces 2 lignes de code
et après <body> tu mets ce code
il y avait une petite erreur dans mon css je te le reposte (la les .box seront centrées en hauteur)
tu recupère le js
http://www.designedbyaturtle.co.uk/demos/horizontal-scrolling/jquery.mousewheel.min.js
tu crée un dossier que tu nomme js et que tu mets a la racine de ton site
dans ce dossier js tu mets le fichier "/jquery.mousewheel.min.js"
ensuite dans ta page dans le <head> tu mets ces 2 lignes de code
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
et après <body> tu mets ce code
<script>
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
});
</script>
il y avait une petite erreur dans mon css je te le reposte (la les .box seront centrées en hauteur)
html{
margin:0;
padding:0;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
min-height:100%;
}
#gauche {
position:fixed;
top:0;
left:0;
margin:0;
width: 200px;
height: 100%;
border-right:1px solid black;
background-color: #FFFFFF;
z-index:10;
opacity:0.8;
}
#droite {
position:absolute;
width: 300px;
height:300px;
width:5000px; /** a adapter **/
top: 50%;
margin: -150px 0 0 260px; /**la moitié de height en margin (-150px)**/
z-index:1;
}
.box {
display:inline-block;
width: 300px;
height: 300px;
border:1px solid black;
margin: 0 50px;
}
