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;
}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>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