Ergebnis 1 bis 3 von 3

Thema: Tabellen-Layout mit Grafiken - responsiv Design

  1. #1
    HTML Newbie
    Registriert seit
    14.10.2016
    Ort
    Mönchengladbach
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Tabellen-Layout mit Grafiken - responsiv Design

    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

  2. #2
    Azubi(ne)
    Registriert seit
    05.01.2016
    Beiträge
    94
    Danke
    8
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Tabellen-Layout mit Grafiken - responsiv Design

    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:
    
    
            <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>
    
    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
    Geändert von modem-kind (19.10.2016 um 13:30 Uhr)

  3. #3
    HTML Newbie
    Registriert seit
    27.10.2016
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellen-Layout mit Grafiken - responsiv Design

    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;
    }
    Wir haben hier eine Artikelreihe, wie man eine responsive Seitenstruktur aufbaut: https://sketch.media/blog/web/372-ei...-aufbauen.html
    Infos über Joomla, Webdesign und Co bei sketch.media

Ähnliche Themen

  1. Tabellen und Grafiken
    Von aila im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 22.04.2009, 16:43
  2. Tabellen und Grafiken
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 22.09.2008, 01:09
  3. HILFE - Grafiken ins Layout einfügen
    Von MariusKrug im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 14
    Letzter Beitrag: 26.04.2008, 11:10
  4. Tabellen-Layout in DIV-Layout umändern...
    Von Peter_Pan im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 22.03.2007, 21:29
  5. Tabellen Grafiken
    Von -=]BSS[=-Maverick im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 12
    Letzter Beitrag: 26.05.2004, 19:54

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •