[CSS] Flexibles Webdesign

Dieses Thema im Forum "Webdesign" wurde erstellt von Spo0n22, 11. April 2013 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 11. April 2013
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Flexibles Webdesign

    Guten Tag =)

    ich bin im Moment dabei für ein Größeres Projekt ein Webdesign anzufertigen,
    dabei komme ich im Moment an meine Grenzen.

    Gerne würde ich eine Auflistung wie bei Youtube haben.
    Die Größe einer Auflistung soll sich jeweils der Fenstergröße anpassen.
    Dies alles sollte in CSS realisiert werden und auch ohne JavaScript funktionieren.

    Siehe folgenden Channel:
    Ownage Pranks - YouTube

    Originalgröße:
    https://www0.xup.in/exec/ximg.php?fid=12136347

    Verkleinertes Fenster:
    https://www0.xup.in/exec/ximg.php?fid=12323034

    Und bei mir sieht es meist so aus:
    https://www0.xup.in/exec/ximg.php?fid=10081007

    Desweiteren überlege ich auf das CSS Framework YAML umzusteigen.
    Lohnt sicht der Umstieg auf YAML für Webdesigns, die eine komplette Seite einnehmen?

    Freundliche Grüße
     
  2. 11. April 2013
    AW: Flexibles Webdesign

    kleines demo:
    HTML:
    <div style="width:100%;">
     <div style="width:33%;float:left;background:#f00;"></div>
     <div style="width:33%;float:left;background:#0f0;"></div>
     <div style="width:33%;float:left;background:#00f;"></div>
    </div>
    
     
    1 Person gefällt das.
  3. 11. April 2013
    AW: Flexibles Webdesign

    Die Funktionsweise ist etwas komplizierter als bei onip

    Youtube nutzt display:inline-block an stelle von float:left und dazu noch Media-Querys um bei verschiedenen breiten des Fensters/Viewports den Width-Wert zu ändern.

    HTML
    HTML:
    <div id="video-content">
     <ul id="video-grid">
     <li><span>1</span></li>
     <li><span>2</span></li>
     <li><span>3</span></li>
     <li><span>4</span></li>
     <li><span>5</span></li>
     <li><span>6</span></li>
     </ul>
    </div>
    CSS
    Code:
    #video-content {
     display: block;
     font-size: 100%;
     border: 0;
     margin: 0;
     padding: 15px 15px 0;
    }
    
    #video-grid {
     display: block;
     position: relative;
     list-style: none;
     margin: 0;
     margin-right: -15px;
     padding: 0;
     font-size: 0;
     border: 0;
    }
    
    #video-grid li {
     display: inline-block;
     position: relative;
     margin: 0 0 20px 0;
     padding: 0;
     width: 33.3333333333%;
    }
    
    #video-grid li span {
     display: block;
     position: relative;
     min-height: 80px;
     font-size: 16px;
     color: #fff;
     margin-right: 15px;
     background: #b00;
    }
    
    @media (max-width:1280px) {
     #video-grid li {
     width: 33.333333%;
     };
    }
    
    @media (min-width:1281px) and (max-width:1480px) {
     #video-grid li {
     width: 25%;
     };
    }
    
    @media (min-width:1481px) {
     #video-grid li {
     width: 20%;
     };
    }
    Demo auf cssdeck.com/labs/ogbxu4pe
     
    1 Person gefällt das.
  4. 12. April 2013
    AW: Flexibles Webdesign

    Das ganze nennt sich "Responsive Webdesign".
    Hier mal eine gute Beispielseite: Was ist responsive Webdesign, wie funktioniert es? | wendweb

    Wie Nanobyte schon erwähnte, arbeiten diese Layouts mit "Media-Queries".
    Code:
    @media only screen 
    and (max-width : 1023px)
    and (min-width : 480px)
    
    Damit kannst du bestimmen, bei welcher Breite/Höhe des Fensters, welcher Style geladen wird.

    Damit die Div's/images nicht unschon skaliert werden, kannst du dem Element "#video-grid li" noch den Style "max-width:250px" geben. Somit werden die Elemente dynamisch skaliert, aber bis maximal 250px Breite.
    Sollte das Fenster breiter werden, rutscht das nächste Li-Element eine Zeile nach oben (daher auch der leere Bereich, bei deiner YT-Ansicht - es fehlen ein paar PX, damit das nächste Li-Element nach oben rutscht).

    Die "max-width" kannst du mittels "Media-Queries" anpassen, damit das ganze besser ausschaut.
    Z.B. könntest du für größere Displays auch die Höhe erhöhen/dynamisch skalieren lassen.
     
    1 Person gefällt das.
  5. 14. April 2013
    AW: Flexibles Webdesign

    Wie von Nanobyte bereits erwähnt, klappt es leider nicht^^


    Danke dafür, danach habe ich gesucht =)


    Das ist gut, danke für die Info, jetzt weiß ich wonach ich weitersuchen werde
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.