Problème d'affichage

vanvan68_0410 Messages postés 15 Statut Membre -  
declique69 Messages postés 21 Statut Membre -
Bonjour à tous,
Je suis débutant en code html et css...
Je reviens vers vous car j'ai un problème d'affichage sur une page web.
mes blocs qui contiennent une image, s'alignent bien par 2 dans la largeur de la page mais pour une raison inconnue il se crée un trou, au lieu de m'aligner 2 blocs il n'y en a qu'un seul sur la ligne..
Une image sera plus explicite:


voici mes codes: 
<style>
            html {
                width:100%;
                height: 100%;
                }
            body {
                margin: 0;
                padding: 0;
                text-align: center;
                }

            @media screen and (min-width: 1216px) {
            
            #container { 
                width: 1216px !important;
                margin: auto;
                display: table;
                position:relative;
                }
            #image { 
                width: 100%;
                height: auto;
                margin-bottom: 0px;
                }
            .scale {
                Width:540px;
                height:315px
            }
            .rotation180 {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
                }
            .box {
                width:560px;
                height: 230px;
                border: 4px solid rgb(50, 205, 50);
                border-radius: 10px;
                display:table;
                float:left;
                position:relative;
                margin: 20px 10px 5px 10px;
                padding: 5px 5px 0px 5px;
                }
            
            .titlebox {
                width:500px;
                height: 1.6em;
                border: 4px solid rgb(50, 205, 50);
                border-radius: 25px;
                margin: 20px auto 5px auto;
                padding: 5px 5px 0px 5px;
                }
            .title{
                text-align: center;
                color: blue;
                font-size: 40px;
                }  
            .nom {
                text-align: center;
                color: blue;
                font-size: 26px;
                }
                } 
            @media screen and (max-width: 1215px) {
            #container { 
                width: 100% !important;
                margin: auto;
                display: table;
                position:relative;
                }       
            #image { 
                width: 100%;
                height: auto;
                margin-bottom: 0px;
                }
            .scale {
                Width:480px;
                height:315px
            }
            .rotation180 {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
                }
            .box {
                width:500px;
                height: 230px;
                border: 4px solid rgb(50, 205, 50);
                border-radius: 10px;
                display:table;
                float:none;
                position:relative;
                margin: auto;
                margin-top: 10px;
                
                padding: 5px 5px 0px 5px;
                }
            .titlebox {
                width:460px;
                height: 1,9em;
                border: 4px solid rgb(50, 205, 50);
                border-radius: 25px;
                margin: 20px auto 5px auto;
                padding: 5px 5px 0px 5px;
                }
            .title{
                text-align: center;
                color: blue;
                font-size: 32px;
                }  
            .nom {
                text-align: center;
                color: blue;
                font-size: 24px;
                }
                }
                @media screen and (max-width: 533px) {
            #container { 
                width: 100% !important;
                margin: auto;
                display: table;
                position:relative;
                }       
            #image { 
                width: 100%;
                height: auto;
                margin-bottom: 10px;
                }
            .scale {
                Width:330px;
                height:315px
            }
            .rotation180 {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
                }
            .box {
                width:350px;
                height: 200px;
                border: 4px solid rgb(50, 205, 50);
                border-radius: 10px;
                display:table;
                float:none;
                position:relative;
                margin: 10px auto;
                padding: 5px 5px 0px 5px;
                }
            .titlebox {
                width:350px;
                height: 2em;
                border: 4px solid rgb(50, 205, 50);
                border-radius: 25px;
                margin: 10 px auto 5px auto;
                padding: 5px 5px 0px 5px;
                }
            .title{
                text-align: center;
                color: blue;
                font-size: 26px;
                }  
            .nom {
                text-align: center;
                color: blue;
                font-size: 22px;
                }
                }
            
        </style>


et le body: 

 <body>  
           <h1 class="title titlebox"><em> Webcams autour de nous</em></h1>
            <div id="container">
            <div class="box"><h1 class="nom"><em>Beauregard-Barret </em></h1><img id="image" src="https://images-webcams.windy.com/52/1495291252/current/full/1495291252.jpg" alt="Beauregard-Barret"></img></div> 
            <div class="box"><h1 class="nom"><em>Col de Rousset </em></h1><iframe class="scale" src="http://m.webcam-hd.com/la-drome/col-du-rousset" name="webcam" width="100%" height="auto" frameborder="no" scrolling="vertical" allowfullscreen="allowfullscreen"></iframe></div> 
            <div class="box"><h1 class="nom"><em>Grenoble </em></h1><img id="image" src="https://images-webcams.windy.com/54/1583957954/current/full/1583957954.jpg" alt="Grenoble"></img></div>
            <div class="box"><h1 class="nom"><em>Gresse en Vercors </em></h1><img id="image" src="https://images-webcams.windy.com/34/1415717734/current/full/1415717734.jpg" alt="Gresse en Vercors"></img></div> 
            <div class="box"><h1 class="nom"><em>Les Estables </em></h1><img id="image" src="https://www.previmeteo.com/meteo/image_webcam.php?image=aHR0cHM6Ly9pbWFnZXMtd2ViY2Ftcy53aW5keS5jb20vMTcvMTUxMzU5NTIxNy9jdXJyZW50L3ByZXZpZXcvMTUxMzU5NTIxNy5qcGc=" alt="Les Estables"></img></div> 
            <div class="box"><h1 class="nom"><em>St Jean décollage / Combe Laval </em></h1><img id="image" src="http://jean-max.fr//webcams/EEECam.jpg" alt="Combe Laval decollage"></img></div>
            <div class="box"><h1 class="nom"><em>St Jean ACRV / Combe Laval SE 140° </em></h1><img id="image" src="https://www.acrv.org/webcam-acrv/output.jpg" alt="Combe Laval SE"></img></div>         
            <div class="box"><h1 class="nom"><em>St Jean ACRV / Rochechinard NO 310° </em></h1><img id="image" src="https://www.acrv.org/webcam-acrv/output2.jpg" alt="Rochecinard NO"></img></div> 
            <div class="box"><h1 class="nom"><em>St Jean ACRV / SO 240° </em></h1><img id="image" src="https://www.acrv.org/webcam-acrv/output3.jpg" alt="St Jean SO"></img></div> 
            <div class="box"><h1 class="nom"><em>St Léger du Ventoux </em></h1><img id="image" src="https://images-webcams.windy.com/85/1565047585/current/preview/1565047585.jpg" alt="St Léger du Ventoux"></img></div> 
            <div class="box"><h1 class="nom"><em>St Marcellin </em></h1><img id="image" src="http://www.st-marcellin.meteoamikuze.com/Webcam/webcam.jpg" alt="St Marcellin"></img></div> 
            <div class="box"><h1 class="nom"><em>St Martin en Vercors </em></h1><img id="image"src="http://laberthuniere.free.fr/webcam/photo.jpg?1359444504" alt="St Martin en Vercors"></img></div>
            <div class="box"><h1 class="nom"><em>Villard de lans / Côte 2000 </em></h1><img id="image" src="https://apical.espace-villard-correncon.fr/webcam2/webcam_CAM1.jpg" alt="Villard de lans"></img></div> 
            <div class="box"><h1 class="nom"><em>Villard de Lans / Grand Canyon 1920m </em></h1><img id="image" src="http://www.neos360.com/villard_de_lans/grand_canyon/img/panojavascript/nojava/pano_PV.jpg" alt="Villard Grand Canyon 1920m"></img></div>
            <div class="box"><h1 class="nom"><em>Villard de Lans / Prey des Peys </em></h1><img id="image" src="https://images-webcams.windy.com/11/1298028211/current/full/1298028211.jpg" alt="Villard Pré des Peys"></img></div>
            </div>

            <meta http-equiv="Refresh" content="360"> 
             
             
              
            
    </body>


Si quelqu'un à une idée
merci et à bientôt...




Configuration: Macintosh / Safari 13.1

2 réponses

Réponse 1 / 2
Autobot
 
Salut,
display:table; n'existant pas c'est de ce côté là que je vous conseille de regarder.
En effet une erreur de ce type revient à laisser le comportement par défaut car ne fait rien du tout.

Voir ici la propriété display:
https://www.w3schools.com/CSSref/pr_class_display.asp

éventuellement:
https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Introduction

https://la-cascade.io/la-difference-entre-block-et-inline/

Vous spécifiez aussi des marges automatiques ce qui ne semble pas cohérent avec vote idée de mettre 2 éléments su la même ligne, qui plus est vous utilisez des dimensions fixées(absolues comme des valeurs en pixels). Celles ci ne s'adapteront donc pas à toute les tailles d'écrans. Utilisez plutôt pour toutes vos dimensions des valeurs relatives qui permettront de prendre l'échelle 'relative' à chaque dimension d'écran.

Les différences d'unités expliquées:
pour le pourcentage:
http://fr.learnlayout.com/percent.html
pour les textes:
https://www.w3.org/Style/Examples/007/units.fr.html
0
Réponse 2 / 2
declique69 Messages postés 21 Statut Membre 2
 
C'est parce que la première image est légèrement plus haute que la deuxième. C'est un casse-tête habituel avec les éléments flottants.
Je te conseillerais vivement de changer de technique et d'utiliser par exemple des flex-box (http://stylescss.free.fr/v2-tutoriels/flex-box.php). C'est vraiment beaucoup plus souple pour les alignements, les retours à la ligne, etc.

Quelque chose comme ça : 

#container {
   display:flex;
   flex-flow:wrap;
}
#container div {flex:0 0 50%;}


Le 50% devra peut-être être modifié pour prendre en compte les marges/padding.
0

Discussions similaires

pinterest bug affichage
aminux -
Sid -

3 réponses
Les images ne s'affichent plus
papyrus95 -
melle -

15 réponses
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses
Problème d'affichage d'une page web.
mk51 -
mk51 -

33 réponses