Ankündigung

Einklappen
Keine Ankündigung bisher.

display inline-block geht beim Smartphone nicht

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • display inline-block geht beim Smartphone nicht

    Guten Tag

    Ich habe ein kleines Problem. Ich programmiere gerade eine Gallery und fast alles geht perfekt ausser der Ansicht auf dem Smartphone.
    Da habe ich folgendes Problem, dass sich die einzelnen Bilder nicht je nach Grösse des Displays anders anordnen. Also z.B es hat Vier Bilder neben einander und wenn nun der Browser/Display kleiner wird sind es nur noch zwei, dafür sind die restlichen zwei unten dran.
    Für diese Anordnung arbeite ich mit Display inline-block aber komischer weisse geht es auf dem Pc perfekt und auf dem Smartphone geht es nicht. Weil da verschwinden einfach die Bilder, statt sich unter einander an zu ordnen.

    Hier mal mein HTML Teil und mein CSS Teil. Dazu bedanke ich mich jetzt schon für eure HilfeJ

    HTML

    PHP-Code:

    <main id="Gallery">

           <
    div class="Gallery">

           <
    div ><table id="GalleryTitel"><tr><td class="GalleryTitelTd">Snowboard</td></tr></table></div>




           <
    table id="GalleryInhalt1">

              <
    tr id="GalleryTR">

                <
    td id="GalleryTD">  <a href="#Bild1" tabindex="1"><img src="../Galleryimag/Bild1.JPG" alt="Snowboard"></a></td>

                <
    td id="GalleryTD"><a href="#Bild2" tabindex="1"> <img src="../Galleryimag/Bild2.JPG" alt="Snowboard"></a></td>

                <
    td id="GalleryTD"><a href="#Bild3" tabindex="1"> <img src="../Galleryimag/Bild3.JPG" alt=" Snowboard"></a></td>

                <
    td id="GalleryTD"><a href="#Bild4" tabindex="1"><img src="../Galleryimag/Bild4.JPG" alt="Snowboard"></a></td>






               </
    tr>

               </
    table>




             <
    figure id="Bild1" class="BildGross"><img src="../Galleryimag/Bild1.JPG" alt=" Snowboard"><class="close" id="c1" href="#c1" title="schließen">schließen</a></figure>

             <
    figure id="Bild2" class="BildGross"><img src="../Galleryimag/Bild2.JPG" alt=" Snowboard"><class="close" id="c1" href="#c1" title="schließen">schließen</a></figure>

             <
    figure id="Bild3" class="BildGross"><img src="../Galleryimag/Bild3.JPG" alt=" Snowboard"><class="close" id="c1" href="#c1" title="schließen">schließen</a></figure>

             <
    figure id="Bild4" class="BildGross"><img src="../Galleryimag/Bild4.JPG" alt=" Snowboard"><class="close" id="c1" href="#c1" title="schließen">schließen</a></figure>







           </
    main

    CSS

    PHP-Code:

     
    #Gallery{
        
    positionrelative;
        
    margin-leftauto;
        
    margin-rightauto;
        
    width100%;
        
    heightauto;}

    .
    Gallery{
        
    width100%;
        
    heightauto;
        
    min-height100%;
        
    max-height5000px;
        
    min-width100px;
        
    max-width4069px;
        
    background-color#ffffff;
        
    margin-leftauto;
        
    margin-rightauto;}


    #GalleryTitel{
       
    width100%;
        
    height50px;
        
    margin-leftauto;
        
    margin-rightauto;
        
    padding-bottom4%;  
    }

    .
    GalleryTitelTd{
        
    width100%;
        
    height144px;
        
    margin-leftauto;
        
    margin-rightauto;
        
    padding0.2em;
        
    colorrgba(10380.8);
        
    font-family"Georgia"sans-serif;
        
    text-aligncenter;
        
    font-size12vw;  
    }

    #GalleryInhalt1{
        
    width100%;
        
    heightauto;
        
    margin-leftauto;
        
    margin-rightauto;

    }


    #GalleryTR{
        
    width100%;
         
    margin-leftauto;
        
    margin-rightauto;
        
    text-aligncenter;
    }

    #GalleryTD{
        
    displayinline-block;    
        list-
    style-typenone;
        
    width25%;
        
    padding2em;
        
    margin-leftauto;
        
    margin-rightauto;
        
    text-aligncenter;



    }


    img {
        
    padding0;
        
    margin0;    
        
    width100%;

    }


    #GalleryButton{
        
    padding0.1em;

    }

    button:focus,
        
    button:hover {
            
    backgroundrgba(4949490.87);
        }










        .
    GalleryTD {
            
    width10em;
            
    top0;
        }


    .
    BildGross{
        
    positionfixed;
        
    top: -2%;
        
    border0px;
        
    margin-left0px;
        
    margin-right0px;
        
    background-colorrgba(0000.79);
        
    border0.1em solid #3983ab;
        
    border-radius0 8px 8px;
        
    padding1em 1em 0.2em;
        
    width97.7%;
        
    height97%;
        
    overflowauto;
        
    displaynone;
        
    z-index5000;



    }

    .
    BildGross img{
        
    width75%;
        
    margin-top:0.5%;
        
    margin-left14%;
    }



    .
    BildGross:target {
        
    displayblock;


    }

    .
    close {
        
    width:0;
        
    height:0;
        
    border0;
        
    text-shadownone;
        
    colortransparent;
    }


    .
    close:after {
       
    positionabsolute;
       
    top1em;
       
    right1em;
       
    content:"X";
       
    color#ffffff;
       
    background#a30606;
       
    fontfontbold 1em/150GeorgiaTimesserif;
       
    border0.1em solid rgba(0000.76);
       
    border-radius0 8px 0px 8px;
       
    displayblock;
       
    text-align:center;
       
    width1.5em;
       
    height:1.5empadding:0.2em 0 0 0em;
      } 


  • #2
    Du hast Tabellen als Designelemente missbraucht, das ist schon lange Zeit ein no-go und zudem verwendest du Ids mehrfach, dafür gibt es aber Klassen.
    Ich würde dir raten den Code auch immer durch den Validator zu schicken, dann erfährst du alle Fehler.

    Kommentar


    • #3
      Zitat von protestix Beitrag anzeigen
      Du hast Tabellen als Designelemente missbraucht, das ist schon lange Zeit ein no-go und zudem verwendest du Ids mehrfach, dafür gibt es aber Klassen.
      Ich würde dir raten den Code auch immer durch den Validator zu schicken, dann erfährst du alle Fehler.
      Wie meinst du als Designelement?

      Ich weis eigentlich nutze ich fast keine id's mehr aber bei der Gallery habe ich es eben mal mit mehr id's versucht das es besser ausschaut ind der css datei.

      Kommentar


      • #4
        Zitat von protestix Beitrag anzeigen
        Du hast Tabellen als Designelemente missbraucht, das ist schon lange Zeit ein no-go und zudem verwendest du Ids mehrfach, dafür gibt es aber Klassen.
        Ich würde dir raten den Code auch immer durch den Validator zu schicken, dann erfährst du alle Fehler.
        Ich habs jetzt verstanden Weniger id's und Tabellen und mehr class und div's

        Vielen dank

        Kommentar

        Lädt...
        X