Comment adapter la taille de sa page d'accueil à tous les écrans automatiquement?

par Solid6Snake Jeu 28 Avr 2016 - 21:24

Détails techniques

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

Description du problème

Bonsoir Forumactif, j'espère que la communauté se porte bien

Je me permet de vous poser encore une question, et oui encore je sais mais c'est pour tester la modération et savoir si vous n'avez pas perdu la main hé hé ^^

Plus sérieusement, je viens de me rendre compte que sur une vidéo de présentation d'un membre de notre forum sa page d'accueil n'est pas adaptée à la taille de son écran..

En gros il restait plein de place à droite alors que chez moi l'écran d'accueil est entièrement centré.

Il est possible d'avoir un code pour ajuster automatiquement la page d'accueil à toutes les tailles d'écrans?

Voilà une capture de son écran:

Comment adapter la taille de sa page d'accueil à tous les écrans automatiquement? Captur10

Comment adapter la taille de sa page d'accueil à tous les écrans automatiquement? Captur10

Chez moi l'image est collée sur la droite par exemple contrairement à lui.

J'espère avoir été assez clair scratch

Merci d'avance en tout cas.

par Invité Jeu 28 Avr 2016 - 21:50

bonsoir Solid6Snake

apparemment ce n'est que la partie ou il y a les vidéo qui ne s'adapte pas , et non la page d’accueil proprement dis .

il faut la partie de ce codage slide stp.

par Solid6Snake Ven 29 Avr 2016 - 7:54

Bonjour R-max et encore une foi merci de venir m'aider Wink

Effectivement je me suis mal exprimé c'est bien mon code le problème d'affichage puisque mon bloc accueil lui est bien au bon format.

Voilà mon code slide:

Code:: <table style="height: 350px;"> <tbody> <tr> <td> <div class="pa_total"> <div id="shidden" class="slide_bloc"> <div class="slide"> <object type="text/html" data="https://www.youtube.com/embed/puNSA1gFZDI" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/WHS695-FtfU" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/Ng5QFEv2fCQ" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/mHua8fhvCS8" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/q8nXQT8socA" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> </div> </div> <div class="selecteur"> </div> <a href="http://www.never-utopia.com/" style="position: absolute; right: 45px; font-size: 8px; margin-top: -14px; color: rgba(0,0,0,0.5); text-decoration: none!important;">(c) Never-Utopia</a> </div> </td> </tr> </tbody> </table> <table style=" width: 1100px;height: 130px;"> <tbody> <tr> <td> <div id="shidden2" class="slide_bloc"> <div class="slide_content"> <div class="slide"> <object type="text/html" data="https://www.youtube.com/embed/Dxx0mj010Yk" 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/JHfILi7OkI8" 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/Zbqt0MA9SmQ" 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/KsZRx9D55wM" 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/Aj2u9SlXIkw" 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/biCPGRt-q0w" 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/WHS695-FtfU" 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/UWZnQyRIVSQ" 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/u7zNh4Aa4P0" 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/wH-UXMbesAE" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> </div> </div> </div> <div class="selecteur"> </div> <div class="fleches"> <img src="http://i21.servimg.com/u/f21/17/84/80/30/fleche13.png" class="fleche gauche cliquable" /> <img src="http://i21.servimg.com/u/f21/17/84/80/30/fleche12.png" class="fleche droite cliquable" /> </div> <div class="selecteur"> </div> <a href="http://www.never-utopia.com/" style="position: absolute; right: 45px; font-size: 8px; margin-top: -14px; color: rgba(0,0,0,0.5); text-decoration: none!important;">(c) Never-Utopia</a> </td> </tr> </tbody> </table> <table style=" width: 1100px;height: 130px;"> <tbody> <tr> <td> <div id="shidden2" class="slide_bloc"> <div class="slide_content"> <div class="slide"> <object type="text/html" data="https://www.youtube.com/embed/Ng5QFEv2fCQ" 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/ZSXp_0iDcNU" 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/9JWT8uplvWQ" 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/Ya5-M9hifBU" 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/ZsewjXuBeCI" 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/ZbnAnlP8Glc" 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/jg13_AtyMKg" 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/KskvLArc91s" 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/N7shOG24Ijc" type="text/html"></object><object type="text/html" data="https://www.youtube.com/embed/IWso4BngDCM" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> </div> </div> </div> <div class="selecteur"> </div> <div class="fleches"> <img src="http://i21.servimg.com/u/f21/17/84/80/30/fleche13.png" class="fleche gauche cliquable" /> <img src="http://i21.servimg.com/u/f21/17/84/80/30/fleche12.png" class="fleche droite cliquable" /> </div> </td> </tr> </tbody> </table>

par Invité Ven 29 Avr 2016 - 22:38

arff il me faut aussi le css associer . merci

par Solid6Snake Sam 30 Avr 2016 - 21:01

Pas de problème le voici:

Code:: /*slide page accueil grosse vidéos*/ .youtuber{ background-color: #A09E9E; width: 550px; margin:auto; text-align:center; } .youtuber .titre{ font-family: 'Oswald', sans-serif; font-size: 25px; color: #ffffff; text-align: left; padding-left: 70px; position: relative; top: 0.6em; } .youtuber .table{ background-color: #000000; padding: 20px; width: 93%; border-left: 4px solid #CCEF6D; border-right: 4px solid #CCEF6D; margin:auto; } .youtuber .mini { width: 90%; padding: 10px; font-family: 'Oswald', sans-serif; font-size: 25px; color: #ffffff; background-color: #9ACDE1; margin:auto; } .youtuber .select { font-family: 'Parisienne', cursive; font-size: 25px; color: #ffffff; position: relative; top: -0.3em; } .youtuber .prez { width: 90%; padding: 10px; font-family: 'Oswald', sans-serif; font-size: 25px; color: #ffffff; background-color: #F04B4F; margin:auto; } /*slide page accueil miniature dessous*/ .pa_total { position: relative; width: 1290px; height: 400px; margin: auto; } .slide_bloc { position: relative; width: 1290px; border: 1px solid #000; overflow: hidden; margin: auto; z-index: 3; } #shidden { height: 350px; } #shidden2 { height: 180px; } .slide { display: inline-block; position: relative; left: 0; height: 0; transition: 6s all; } .contenu { display: inline-block; background: red; } .contenu:first-child { background: yellow; } #shidden .contenu { width: 1100px; height: 450px; } #shidden2 .contenu { width: 150px; height: 100px; } .selecteur { text-align: center; margin-bottom: 5px; } .selecteur img { opacity: 0.4; height: 10px; padding: 3px 1px 0; cursor: pointer; } .selecteur img:hover { opacity: 0.6; } .selecteur img.selected { opacity: 1; cursor: default; } .fleche:hover { opacity: 1; } .gauche { left: 6px; } .droite { right: 6px; }

par Invité Lun 2 Mai 2016 - 22:09

bonsoir , remplace ton code html par celui et teste pour voir si cela est mieux

Code:: <table style="width:100%;height: 350px;"> <tbody> <tr> <td> <div class="pa_total"> <div id="shidden" class="slide_bloc"> <div class="slide"> <object type="text/html" data="https://www.youtube.com/embed/puNSA1gFZDI" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/WHS695-FtfU" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/Ng5QFEv2fCQ" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/mHua8fhvCS8" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object><object type="text/html" data="https://www.youtube.com/embed/q8nXQT8socA" style="width:550px;height:350px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> </div> </div> <div class="selecteur"> </div> <a href="http://www.never-utopia.com/" style="position: absolute; right: 45px; font-size: 8px; margin-top: -14px; color: rgba(0,0,0,0.5); text-decoration: none!important;">(c) Never-Utopia</a> </div> </td> </tr> </tbody> </table> <table style=" width: 100%;height: 130px;"> <tbody> <tr> <td> <div id="shidden2" class="slide_bloc"> <div class="slide_content"> <div class="slide"> <object type="text/html" data="https://www.youtube.com/embed/Dxx0mj010Yk" 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/JHfILi7OkI8" 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/Zbqt0MA9SmQ" 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/KsZRx9D55wM" 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/Aj2u9SlXIkw" 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/biCPGRt-q0w" 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/WHS695-FtfU" 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/UWZnQyRIVSQ" 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/u7zNh4Aa4P0" 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/wH-UXMbesAE" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> </div> </div> </div> <div class="selecteur"> </div> <div class="fleches"> <img src="http://i21.servimg.com/u/f21/17/84/80/30/fleche13.png" class="fleche gauche cliquable" /> <img src="http://i21.servimg.com/u/f21/17/84/80/30/fleche12.png" class="fleche droite cliquable" /> </div> <div class="selecteur"> </div> <a href="http://www.never-utopia.com/" style="position: absolute; right: 45px; font-size: 8px; margin-top: -14px; color: rgba(0,0,0,0.5); text-decoration: none!important;">(c) Never-Utopia</a> </td> </tr> </tbody> </table> <table style=" width: 100%;height: 130px;"> <tbody> <tr> <td> <div id="shidden2" class="slide_bloc"> <div class="slide_content"> <div class="slide"> <object type="text/html" data="https://www.youtube.com/embed/Ng5QFEv2fCQ" 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/ZSXp_0iDcNU" 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/9JWT8uplvWQ" 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/Ya5-M9hifBU" 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/ZsewjXuBeCI" 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/ZbnAnlP8Glc" 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/jg13_AtyMKg" 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/KskvLArc91s" 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/N7shOG24Ijc" type="text/html"></object><object type="text/html" data="https://www.youtube.com/embed/IWso4BngDCM" style="width:300px;height:175px;margin-top:0px; margin-left: 0px; border: 3px solid rgb(202, 202, 202);"></object> </div> </div> </div> <div class="selecteur"> </div> <div class="fleches"> <img src="http://i21.servimg.com/u/f21/17/84/80/30/fleche13.png" class="fleche gauche cliquable" /> <img src="http://i21.servimg.com/u/f21/17/84/80/30/fleche12.png" class="fleche droite cliquable" /> </div> </td> </tr> </tbody> </table>

en fait le soucie ces que tes tables sont mal indiqué ..

la 1er n'avait pas de width;
la 2 avait une valeur en px;
la 3 aussi

j'ai passé les 3 a 100%

donc normalement elle s'adapteront au différent écran ?

bonne nuit ..

par Solid6Snake Mar 3 Mai 2016 - 21:20

Ok je comprend, j'ai remplacé le slide sur ma page d'accueil.

Encore une fois merci R-max Affirmatif

Comment adapter la taille de sa page d'accueil à tous les écrans automatiquement?