Tabellen-Layout mit Grafiken - responsiv Design

Lulu

Hallo,

ich bin ganz frisch hier und ebenfalls frisch sind meine Berührungspunkte in Sachen CSS.
Nun ist es so, ich benötige eine tabellarische Darstellung einer in Grafiken festgehaltenen Produktübersicht. Ursprünglich hatte ich eine Tabelle, jedoch konnte diese in einigen Browsern nicht mittig dargestellt werden. So war aber meine Absicht.

Also doch mit CSS. Nach langem hin und hersuchen bin ich auf diesen Code gestoßen:

Code

#container{
width: 785px;
height: 250px;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
}


.slider{
width: 800px;
height: 200px;
padding: 20px;
background: #ffffff;
}
.section{
margin:0;
width:750px;
float:left;
}


div.table { 
display: table; 
}
div.tr { 
display:table-row; 
}
div.td { 
display:table-cell; 
padding:5px; 
            }
.section{
margin:0;
width:125px;
float:left;
}

Alles anzeigen

Der entsprechende Bereich im HTML ist folgender:

Code

<div id="container">
<div class="slider">
<div class="table">
<div class="tr">
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
<div class="section"><img src="" alt=""></div>
</div>
</div>
</div>
</div>

Alles anzeigen

Funktioniert prima, bis auf die Sache mit dem Responsive Design. Was benötigt das CSS noch, damit auch das funktioniert?

Über eine kleine Hilfestellung würde ich mich sehr freuen!

Viele Grüße
Tanja

modem-kind

Hallo Lulu Tanja,
1. zu erstmal wie viele Bilder möchtest Du denn neben! einander darstellen ? Alle ?
2. wie breit sind die Bilder ?
3. Du benutzt das .td tabel-cell ja gar nicht - !
... somit sind Deine div .section alles Block Elemente
( es funktioniert nur weil die alle float left haben )
____________________________________________________

aber vergiß das mal ganz mit Deiner Tabelle Tabel-row usw.

mach es mit Display Flex
das ist Responsiv und funktioniert überall -

Code

[size=12]<style>
            #flex-box{
                display: -webkit-flex;        /* für Responsiv*/
                display: flex;               /* für Responsiv*/




                -webkit-flex-wrap: wrap;      /* für Responsiv*/
                flex-wrap: wrap;             /* für Responsiv*/




                 -webkit-align-items: center;  /* für Responsiv*/
                align-items: center;         /* für Responsiv*/




                 -webkit-justify-content:center; /* für Responsiv*/
                justify-content:center;        /* für Responsiv*/




                background-color: blue;
                margin-top: 15px;
                padding-top: 10px;
            }




            .section{
                margin-left: 10px;        
            }




            img{
                width: 200px;
                height:160px;
            } 




        </style>
    </head>
    <body>




        <div id="flex-box">
            <div class="section"><img src="bild1.xxx" alt=""></div>
            <div class="section"><img src="bild2.xxx" alt=""></div>
            <div class="section"><img src="bild3.xxx" alt=""></div>
            <div class="section"><img src="bild4.xxx" alt=""></div>
            <div class="section"><img src="bild5.xxx" alt=""></div>
            <div class="section"><img src="bild6.xxx" alt=""></div>
            <div class="section"><img src="bild7.xxx" alt=""></div>
            <div class="section"><img src="bild8.xxx" alt=""></div>
            <div class="section"><img src="bild9.xxx" alt=""></div>
            <div class="section"><img src="bildA.xxx" alt=""></div>
            <div class="section"><img src="bildB.xxx" alt=""></div>
        </div>
    </body>
[/SIZE]

Alles anzeigen

das ist jetzt aber nur für Deine Bilder-Box Responsiv -
was Du noch auf Deiner Seite/n hast ..weiß ich ja nicht

Gruß modem-kind

sketch.media

Damit sich Bilder bei Geräten mit kleineren Displays korrekt darstellen und nicht über den Rand herausragen braucht man max-width: 100%; .
Gleichzeitig die height auf auto setzen, damit der Ratio korrekt bleibt.
Damit alle section-divs ihre Breite automatisch an das Gerät anpassen ist hier ebenfalls eine Width: 100%; nötig.
Das slider-div benötigt dann nur noch eine max-width und keine fixe width. Dann wird dieser ebenfalls mitskalieren.

Ein Slider der grundsätzlich responsive ist, ist z.b. der Flexslider.

Code

.section img{
max-width: 100%;
height: auto;
}
.section{
width: 100%;
float: left;
clear: both;
}
.slider{
max-width: 800px;
}

Alles anzeigen

Wir haben hier eine Artikelreihe, wie man eine responsive Seitenstruktur aufbaut: https://sketch.media/blog/web/372-e…r-aufbauen.html

Tags