PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Homepage für alle Bildschirmgrössen
Beitrag
<blockquote data-quote="mindraper" data-source="post: 2123380" data-attributes="member: 115163"><p><strong>AW: Homepage für alle Bildschirmgrössen</strong></p><p></p><p>hi</p><p></p><p>zwar haben sich hier ja mittlerweile alle auf das thema RWD (Responsive WebDesign) eingeschossen, obwohl du schon sagtest, dass dich das nicht wirklich interessiert und du es auch nicht benötigst, ich hätte da aber noch eine andere "alternative" für dich: fluid webdesign. fluid webdesign ist ein teil von rwd. der unterschied liegt darin, dass du keine media queries dabei nutzt. i. d. r. gibt es dabei auch keine änderungen am layout der seite/elemente/etc. ich gehe davon aus, dass du eher ein anfänger bist in dem bereich (zumindest lese ich das zwischen den zeilen raus, sorry falls unzutreffend). damit wäre fluid webdesign für dich warscheinlich auch zunächst einfacher umzusetzen als rwd, dein problem bekämst du damit aber ebenfalls gelöst.</p><p></p><p>es geht im prinzip darum, keine fixen größenangaben innerhalb deines CSS stehen zu haben, sondern verhältnisse. das hört sich zunächst verwirrend an, deshalb hier ein beispiel:</p><p></p><p>angenommen das wäre dein markup (html):</p><p>[HTML]</p><p>...</p><p><body></p><p> <div id="page"></p><p> ...</p><p> <ul id="navigation"></p><p> ...</p><p> </ul></p><p> ...</p><p> </page></p><p></body></p><p>...</p><p>[/HTML]</p><p></p><p>in deinen stylesheets stünden angaben wie</p><p>[CODE]</p><p>#page {</p><p> width: 960px;</p><p>}</p><p></p><p>#navigation {</p><p> width: 320px;</p><p>}</p><p>[/CODE]</p><p></p><p>um diese angaben fluid zu bekommen, gibt es eine einfache formel: </p><p>elementbreite / kontext * 100 = fluid angabe</p><p></p><p>als kontext wird das elternelement bezeichnet, in dem ein element liegt. bei #page beispielsweise wäre dass das body-element. nehmen wir mal spaßeshalber an, dein monitor hätte eine breite von 1920px und dein browser läuft im vollbild (noch mit browserleiste und so, also nicht richtig vollbild wie beispielsweise "vollbild youtube videos"). dann würde deine formel also so ausssehen:</p><p></p><p>#page / browserbreite * 100 = fluidbreite von #page</p><p></p><p>mit konkreten werten:</p><p></p><p>960 / 1920 * 100 = 50</p><p></p><p>fünfzig was? prozent! im verhältnis hätte deine seite dann eine breite von 50%. wo liegt der vorteil? nun, du bist damit unabhängig von größe und auflösung des monitors, mit dem die seite angeschaut wird. 50% auf einem 4:3 monitor sind – im verhältnis – genauso viel wie 50% auf einem 16:9 monitor.</p><p></p><p>dummerweise kommst du für echtes rwd an fluid webdesign nicht vorbei, weil es einer der integralen bestandteile von rwd ist. du kannst echtes fluid webdesign aber vollkommen ohne einen rwd ansatz implementieren.</p><p></p><p>dein verändertes stylesheet würde dann so ausschauen:</p><p>[CODE]</p><p>#page {</p><p> width: 50%; /* 50% of body-width */</p><p>}</p><p></p><p>#navigation {</p><p> width: 33.333333%; /* 1/3rd of #page */</p><p>}</p><p>[/CODE]</p><p></p><p>noch ein wort zum schluss: ich möchte hier keinesfalls aussagen, dass fluid webdesign dem responsive webdesign ansatz vorzuziehen ist. als endziel solltest du dir eine responsive page setzen, weil dass die einzige möglichkeit ist die dir bleibt, um sicher zu stellen dass jeder deine seite nutzen kann. du kannst ja schlecht ausschließen, dass jemand der deine page besucht das nicht mit einem smartphone macht. oder sich ausnahmslos mit einem tablet im www bewegt. oder mit einem webbook. oder einer spielekonsole. oder, oder, oder...</p><p></p><p>fakt ist aber, dass, wenn deine seite schon fluid ist, es dir wesentlich einfacher fallen dürfte, einen responsive ansatz zu implementieren, weil du einen der dafür wesentlichen grundpfeiler schon fertig hast.</p><p></p><p>hoffe das hilft</p></blockquote><p></p>
[QUOTE="mindraper, post: 2123380, member: 115163"] [b]AW: Homepage für alle Bildschirmgrössen[/b] hi zwar haben sich hier ja mittlerweile alle auf das thema RWD (Responsive WebDesign) eingeschossen, obwohl du schon sagtest, dass dich das nicht wirklich interessiert und du es auch nicht benötigst, ich hätte da aber noch eine andere "alternative" für dich: fluid webdesign. fluid webdesign ist ein teil von rwd. der unterschied liegt darin, dass du keine media queries dabei nutzt. i. d. r. gibt es dabei auch keine änderungen am layout der seite/elemente/etc. ich gehe davon aus, dass du eher ein anfänger bist in dem bereich (zumindest lese ich das zwischen den zeilen raus, sorry falls unzutreffend). damit wäre fluid webdesign für dich warscheinlich auch zunächst einfacher umzusetzen als rwd, dein problem bekämst du damit aber ebenfalls gelöst. es geht im prinzip darum, keine fixen größenangaben innerhalb deines CSS stehen zu haben, sondern verhältnisse. das hört sich zunächst verwirrend an, deshalb hier ein beispiel: angenommen das wäre dein markup (html): [HTML] ... <body> <div id="page"> ... <ul id="navigation"> ... </ul> ... </page> </body> ... [/HTML] in deinen stylesheets stünden angaben wie [CODE] #page { width: 960px; } #navigation { width: 320px; } [/CODE] um diese angaben fluid zu bekommen, gibt es eine einfache formel: elementbreite / kontext * 100 = fluid angabe als kontext wird das elternelement bezeichnet, in dem ein element liegt. bei #page beispielsweise wäre dass das body-element. nehmen wir mal spaßeshalber an, dein monitor hätte eine breite von 1920px und dein browser läuft im vollbild (noch mit browserleiste und so, also nicht richtig vollbild wie beispielsweise "vollbild youtube videos"). dann würde deine formel also so ausssehen: #page / browserbreite * 100 = fluidbreite von #page mit konkreten werten: 960 / 1920 * 100 = 50 fünfzig was? prozent! im verhältnis hätte deine seite dann eine breite von 50%. wo liegt der vorteil? nun, du bist damit unabhängig von größe und auflösung des monitors, mit dem die seite angeschaut wird. 50% auf einem 4:3 monitor sind – im verhältnis – genauso viel wie 50% auf einem 16:9 monitor. dummerweise kommst du für echtes rwd an fluid webdesign nicht vorbei, weil es einer der integralen bestandteile von rwd ist. du kannst echtes fluid webdesign aber vollkommen ohne einen rwd ansatz implementieren. dein verändertes stylesheet würde dann so ausschauen: [CODE] #page { width: 50%; /* 50% of body-width */ } #navigation { width: 33.333333%; /* 1/3rd of #page */ } [/CODE] noch ein wort zum schluss: ich möchte hier keinesfalls aussagen, dass fluid webdesign dem responsive webdesign ansatz vorzuziehen ist. als endziel solltest du dir eine responsive page setzen, weil dass die einzige möglichkeit ist die dir bleibt, um sicher zu stellen dass jeder deine seite nutzen kann. du kannst ja schlecht ausschließen, dass jemand der deine page besucht das nicht mit einem smartphone macht. oder sich ausnahmslos mit einem tablet im www bewegt. oder mit einem webbook. oder einer spielekonsole. oder, oder, oder... fakt ist aber, dass, wenn deine seite schon fluid ist, es dir wesentlich einfacher fallen dürfte, einen responsive ansatz zu implementieren, weil du einen der dafür wesentlichen grundpfeiler schon fertig hast. hoffe das hilft [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Homepage für alle Bildschirmgrössen
Oben