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


        • #5
          Zitat von Meister333 Beitrag anzeigen

          Ich habs jetzt verstanden Weniger id's und Tabellen und mehr class und div's

          Vielen dank
          Nein, hast Du nicht. ID's kannst Du weiterhin verwenden, aber wie der Name schon sagt: ID = einzigartig. Das heißt sie darf nur einmal in Deinem gesamten HTML Dokument vor kommen. Das löst zwar in vielen Browsern keinen Syntax Fehler aus, führt aber trotzdem zu unerwarteten Nebenwirkungen.

          Und ja, Tabellen zu formatieren kann mitunter sehr schwer sein, gerade wenn es um die display Eigenschaft geht (siehe diverse Stack Overflow Fragen dazu). Mit div Containern hast Du es wesentlich leichter. Außerdem sind die auch zeitgemäß. Layouts auf Basis von Tabellen aufzubauen ist seit dem Jahrhundertwechsel veraltet. Zudem liefern Tabellenlayouts auch nicht immer das gewünschte Ergebnis, weil Tabellen für ein komplettes Layout auch einfach nicht gemacht sind.

          Just my 2 Cents...

          Kommentar

          Lädt...
          X