#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