Vollständige Version anzeigen : [CSS] Flexibles Webdesign


Spo0n22
11.04.2013, 19:30

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 (;;;youtube~com/user/OwnagePranks/videos)

Originalgröße:
(;;0;xup~in/exec/ximg;php?fid=12136347)

Verkleinertes Fenster:
(;;0;xup~in/exec/ximg;php?fid=12323034)

Und bei mir sieht es meist so aus:
(;;0;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

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
onip
11.04.2013, 20:48

kleines demo:

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


Nanobyte
11.04.2013, 21:18

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
<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
#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 (;cssdeck~com/labs/ogbxu4pe)


BlueSin
12.04.2013, 10:06

Das ganze nennt sich "Responsive Webdesign".
Hier mal eine gute Beispielseite: Was ist responsive Webdesign, wie funktioniert es? | wendweb (;;;responsive-webdesign;mobi/)

Wie Nanobyte schon erwähnte, arbeiten diese Layouts mit "Media-Queries".

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


Spo0n22
14.04.2013, 12:44

kleines demo:

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


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

Demo auf cssdeck~com/labs/ogbxu4pe (;cssdeck~com/labs/ogbxu4pe)


Danke dafür, danach habe ich gesucht =)


Das ganze nennt sich "Responsive Webdesign";

Das ist gut, danke für die Info, jetzt weiß ich wonach ich weitersuchen werde ;)


Ähnliche Themen zu [CSS] Flexibles Webdesign
  • Nokia Morph: Flexibles und biegbares Mobiltelefon
    Handy-Studie auf Basis von Nanotechnologie Zusammen mit der Universität von Cambridge aus Großbritannien hat Nokias Forschungslabor ein Handy-Konzept auf Basis von Nanotechnologie vorgestellt. Gezeigt wird die Morph genannte Studie derzeit im Museum of Modern Art (MoMA) in New York. ;scr3;g [...]

  • Paperphone: Flexibles Smartphone
    Paperphone: Flexibles Smartphone ;;0;xup~in/exec/ximg;php?fid=41987662 Dr. Roel Vertegaal von der kanadischen Queen’s University hat den Prototyp eines flexiblen Smartphones entwickelt, das "Paperphone". Das in der Diagonale 9,5 Zentimeter große Display des Paperphones besteht dabei [...]

  • Flexibles skalbierbares Layout
    Hey Rushler, ich habe mir überlegt meiner Website einen Relaunch zu verpassen. Nun würde ich gerne ein flexibles/skalierbares Layout umsetzen. Das bedeutet: Je nach Browserfenster-Größe sollte sich Layout (Also einzelnen divs), Schriftgröße und die Größe der Bilder verändern. Also das ko [...]

  • Flexibles Container in CSS!?
    Hi liebe RR'ler.. ich habe mir nun eine Seite gemacht.. sie beinhaltet mehrere Container.. ich hab nun ein Main Container der mir die Texte ausgeben soll.. leider sind diese Texte aber sehr lange und gehen über den Container hinüber! Ich bräuchte jetzt eine hilfe wie ich mir einen flexiblen Conta [...]



raid-rush.ws | Imprint & Contact pr