Gestion position div avec scroll

Version imprimable

30/09/2011, 10h31
ciran

Gestion position div avec scroll

Bonjour à tous,

je suis actuellement entrain de refaire mon portfolio mais je rencontre quelques difficultés (oui je suis nulle en js lol), voila j'ai crée une page de présentation de projet => ici jusque là tous va bien ! j'ai mis une galerie d'image qui dispose de deux flèches gauche et droite qui reste en position quand on défile le contenu, lorsqu'on est en grande résolution c'est parfait ! mais quand on passe à du 1024 x 768 voila les flèches dépasse de mes images, et je ne sais pas du tous comment faire pour les stopper afin qu'elles ne dépassent pas de mes images de projet :/ Je suis complétement perdue >< donc si vous avez des idées, je suis preneuse !!!

Merci d'avance!!! :mouarf:
30/09/2011, 10h49
coshibe

bonjour
tu as sans doute un soucis avec tes paddings, on a tendance à les oublier quand on resize donc mets les à

Code:

padding: 0px 0px 0px 0px;

mais le mieux pour t'aider serait que tu détailles un peu la structure que tu as adopté (bloc html et css)

Alors je détaille (désolé j'avais oublié !)

Pour le HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
          <div id="galerie-projets">
 
                <div id="navigation-fleche"> 
 
                    <div id="coda-nav-left-1" class="coda-nav-left">
 
                        <a href="#" title="Slide left"><img border="0" onmouseout="this.src='images/sites/fleche-gauche-off.png'" onmouseover="this.src='images/sites/fleche-gauche-on.png'" alt="Flèche gauche" src="images/sites/fleche-gauche-off.png" style="cursor: pointer;" /></a>
 
                    </div>
 
                    <div id="coda-nav-right-1" class="coda-nav-right">
 
                        <a href="#" title="Slide right"><img border="0" onmouseout="this.src='images/sites/fleche-droite-off.png'" onmouseover="this.src='images/sites/fleche-droite-on.png'" alt="Flèche droite" src="images/sites/fleche-droite-off.png" style="cursor: pointer;" /></a>
 
                    </div> 
 
                </div><!-- Fin navigation flèches-->     
 
                <div class="coda-slider-wrapper">
 
                    Contient ma galerie d'image...          
 
                </div>

Pour le CSS :

Code:

1
2
3
4
5
#navigation-fleche { width: 889px; height: 77px; top: 360px; position: fixed; z-index: 10; padding: 0px 0px 0px 0px; }	
 
#coda-nav-left-1 { float: left; }
 
#coda-nav-right-1 { float: right;   }

J'ai rajouté le padding, mais cela ne change rien, je pense qu'il faut que je mette du JS quelque part :/

Est-ce que c'est plus claire ? Sinon je peux joindre les fichiers HMTL et CSS maybe ? :D

30/09/2011, 11h04
RomainVALERI

Citation:

Envoyé par ciran

j'ai mis une galerie d'image qui dispose de deux flèches gauche et droite qui reste en position quand on défile le contenu, lorsqu'on est en grande résolution c'est parfait ! mais quand on passe à du 1024 x 768 voila les flèches dépasse de mes images, et je ne sais pas du tous comment faire pour les stopper afin qu'elles ne dépassent pas de mes images de projet :/

J'ai testé sur FF6, en 800x600 ça ne va plus, mais en 1024x768 ça me semble très bien :? (et très bien aussi pour les résolutions plus grandes)

Citation:

Envoyé par ciran

(oui je suis nulle en js lol)

:koi: mais là c'est quand même plutôt une histoire de CSS, le JS n'a qu'un très petit rôle à jouer dans l'opération ^^

Citation:

Envoyé par ciran

Est-ce que c'est plus claire ?

oui, mis à part que
1) nous avions déjà les éléments en consultant ton lien ^^ (enfin, pour moi, mais il est possible que certains forumeurs ne puissent pas consulter l'adresse, sait-on jamais ^^ (proxy, filtrage, etc.))
2) tu as oublié les balises CODE autour de l'extrait ;) si tu peux les rajouter c'est quand même plus lisible...
30/09/2011, 11h13
ciran

Déjà merci pour vos réponses !! Désolé pour la balise code, je savais bien que j'avais un truc à mettre mais je savais plus quoi ><

Chez moi en 1024x768, ça ne passe pas les flèches débordent en 1280x1024 ça va par contre :/

Mon raisonnement dans ma tête est que le Javascript devrait dire à mes flèches qu'à un certain niveau de scroll et par rapport à la résolution de la fenêtre, les flèches s’arrêtent de bouger/reste en place à la fin de l'image de mon projet (pour pas qu'elles rendent illisible ma superbe description de projet !!) quoi je sais pas si c'est logique ?

Si c'est une histoire de CSS, que dois-je modifié ou est le problème ?! je patauge !!! :cry:

Merci =)
30/09/2011, 13h46
Watilin

Citation:

Envoyé par coshibe

Code:

padding: 0px 0px 0px 0px;

Code:

padding: 0;

Plus court, plus lisible :)
30/09/2011, 13h48
NoSmoking

Bonjour,
un coup d'oeil sur le lien et en guise de portofolio... des pages, mais bon il me semble avoir vu ton soucis.

Une première remarque, utilise un DOCTYPE HTML5 attendu que tu mets des balises <header>, <nav>... je ne pense pas que cela change le comportement mais ce sera plus mieux, ainsi que de rajouter la balise <body>.

Le comportement de tes flèches est standard, position:fixed, oblige le positionnement se faisant par rapport à la fenêtre de visualisation.

Donc pour une solution purement CSS j'en doute, mais je peux me tromper.

Une solution serait, sur le scroll de la page, de déplacer la DIV contenant les flèches qui elles seraient placées en absolute dans leur DIV parent.