Problème affichage PA

par Solid6Snake Lun 4 Jan 2016 - 21:12

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : http://www.entraide-youtubers.com/

Description du problème

Bonsoir, je viens vous voir parce que je me trouve devant un nouveau problème sur l'affichage de ma page d'accueil.

Voilà quelques temps que j'ai demandé à un codeur de never-utopia (superbe site au passage) de me réaliser une page d'accueil en slide.

C'est choses faite aujourd'hui est tout fonctionne parfaitement sauf que pour certains utilisateurs il y à un décalage de flèche pour le coulissant du second module vidéos.

Problème affichage PA Sans_t10

Vous voyez sur un grand écran les deux petites flèches se retrouvent en bas à gauche du cadre et ce n'est pas l'effet que je souhaite.

Le problème c'est que sur un petit écran (comme moi par exemple) tout est nickel alors je ne sais pas comment satisfaire tout le monde.

Si vous avez une solution je suis preneur Wink

Merci d'avance et bonne soirée.

par tupac Mar 5 Jan 2016 - 17:11

Bonjour,

Votre code est-il placé dans un tableau et si c'est le cas lui avez-vous donné une largeur ?

par Solid6Snake Mar 5 Jan 2016 - 20:20

Bonjour non mon code n'est pas dans un tableau.

Mon code:

Code:: <div class="pa_total"> <div class="slide_bloc" id="shidden"> <div class="slide"> <object style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/8cz1kHp6DvI" type="text/html"></object><object style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/fV1nGsMEcjo" type="text/html"></object><object style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/q8nXQT8socA" type="text/html"></object> </div> </div> <div class="selecteur"> </div> <a style="position: absolute; right: 45px; font-size: 8px; margin-top: -14px; color: rgba(0,0,0,0.5); text-decoration: none!important;" href="http://www.never-utopia.com/">(c) Never-Utopia</a> <div class="slide_bloc" id="shidden2"> <div class="slide_content"> <div class="slide"> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/ldRQDA8_pN4" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/UzTDnVn83BM" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/87eOfYxHiBk" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/h1cMDcy0iKg" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/8cz1kHp6DvI" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/XcvlU5ySwH0" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/wEX9ClQqJXc" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/d6ugUtHN31w" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/_FuMvu4f21I" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/cFRD9pRRHgM" type="text/html"></object> </div> </div> </div> <div class="selecteur"> </div> <div class="fleches"> <img class="fleche gauche cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche13.png" /> <img class="fleche droite cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche12.png" /> </div> </div> <div class="selecteur"> </div> <a style="position: absolute; right: 45px; font-size: 8px; margin-top: -14px; color: rgba(0,0,0,0.5); text-decoration: none!important;" href="http://www.never-utopia.com/">(c) Never-Utopia</a> <div class="slide_bloc" id="shidden2"> <div class="slide_content"> <div class="slide"> <object type="text/html" data="https://www.youtube.com/embed/btV3H4NnuyY" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/fV1nGsMEcjo" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/db5s0OJXqLg" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/ZkHvcFwx26I" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/R7heIrwvypY" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/lEq93PC6WFw" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/JzH0qGcTwh4" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/VWdC8ojcPvY" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/E6fla3qMJT8" type="text/html"></object><object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/JzH0qGcTwh4" type="text/html"></object> </div> </div> </div> <div class="selecteur"> </div> <div class="fleches"> <img class="fleche gauche cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche13.png" /> <img class="fleche droite cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche12.png" /> </div>

Ce qui pose problème c'est le dernier morceau de code:

Code:: <div class="fleches"> <img class="fleche gauche cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche13.png" /> <img class="fleche droite cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche12.png" /> </div>

Après ça fonctionne sur les petits écran j'y comprend pas grand chose.. c'est certinement un problème de code.

par tupac Mer 6 Jan 2016 - 1:04

RE !

Voila je pense que ça devrait aller comme ceci, J'ai intégré votre code dans un tableau et lui ai défini une hauteur et largeur ça permet aux flèches de bien s’aligner à gauche par rapport a la première vidéo.

Remplacer votre code HTML par celui-la.

Code:: <table style="height: 350px;"> <tbody> <tr> <td> <div class="pa_total"> <div class="slide_bloc" id="shidden"> <div class="slide"> <object style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/8cz1kHp6DvI" type="text/html"></object><object style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/fV1nGsMEcjo" type="text/html"></object><object style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/q8nXQT8socA" type="text/html"></object> </div> </div> <div class="selecteur"> </div> <a style="position: absolute; right: 45px; font-size: 8px; margin-top: -14px; color: rgba(0,0,0,0.5); text-decoration: none!important;" href="http://www.never-utopia.com/">(c) Never-Utopia</a> </div> </td> </tr> </tbody> </table> <table style=" width: 1100px;height: 130px;"> <tbody> <tr> <td> <div class="slide_bloc" id="shidden2"> <div class="slide_content"> <div class="slide"> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/ldRQDA8_pN4" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/UzTDnVn83BM" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/87eOfYxHiBk" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/h1cMDcy0iKg" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/8cz1kHp6DvI" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/XcvlU5ySwH0" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/wEX9ClQqJXc" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/d6ugUtHN31w" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/_FuMvu4f21I" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/cFRD9pRRHgM" type="text/html"></object> </div> </div> </div> <div class="selecteur"> </div> <div class="fleches"> <img class="fleche gauche cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche13.png" /> <img class="fleche droite cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche12.png" /> </div> <div class="selecteur"> </div> <a style="position: absolute; right: 45px; font-size: 8px; margin-top: -14px; color: rgba(0,0,0,0.5); text-decoration: none!important;" href="http://www.never-utopia.com/">(c) Never-Utopia</a> </td> </tr> </tbody> </table> <table style=" width: 1100px;height: 130px;"> <tbody> <tr> <td> <div class="slide_bloc" id="shidden2"> <div class="slide_content"> <div class="slide"> <object type="text/html" data="https://www.youtube.com/embed/btV3H4NnuyY" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> <object type="text/html" data="https://www.youtube.com/embed/fV1nGsMEcjo" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> <object type="text/html" data="https://www.youtube.com/embed/db5s0OJXqLg" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> <object type="text/html" data="https://www.youtube.com/embed/ZkHvcFwx26I" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> <object type="text/html" data="https://www.youtube.com/embed/R7heIrwvypY" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> <object type="text/html" data="https://www.youtube.com/embed/lEq93PC6WFw" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> <object type="text/html" data="https://www.youtube.com/embed/JzH0qGcTwh4" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/VWdC8ojcPvY" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/E6fla3qMJT8" type="text/html"></object> <object style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);" data="https://www.youtube.com/embed/JzH0qGcTwh4" type="text/html"></object> </div> </div> </div> <div class="selecteur"> </div> <div class="fleches"> <img class="fleche gauche cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche13.png" /> <img class="fleche droite cliquable" src="http://i21.servimg.com/u/f21/17/84/80/30/fleche12.png" /> </div> </td> </tr> </tbody> </table>

par Solid6Snake Mer 6 Jan 2016 - 8:05

J'ai placé votre nouveau code sur ma PA de forum test ça semble bien sauf que j'ai un trop gros espace entre le gros module et les deux petits du dessous c'est normal? C'est modifiable?

http://testentraideyoutube.forumactif.org/

par tupac Mer 6 Jan 2016 - 9:09

Bonjour,

Ce sont deux tableaux placé l'un sur l’autre il ne devrait pas y avoir un tel d'écart et je ne l'ai pas chez moi, avez-vous essayé de le placer sur le bon forum ?

par Solid6Snake Mer 6 Jan 2016 - 11:02

Après vérification c'est bon oui il n'y à plus d'écart sur les grands écrans mais sur les petits oui mais c'est normal donc c'est parfait !

1000 fois merci de m'avoir aide c'est vraiment sympa de votre part Yes

Problème affichage PA