CSS flexibles Layout?

Ronny84

Angesehenes Mitglied
Hallo,

Ich Brauch mal eure Hilfe bei einem Layout mit CSS.

Ich habe mich dazu schon ein wenig belesen und die Meinungen dazu sind etwas gespalten, ob nun fixes Layout oder flexibles geeigneter ist. Ich bin mir selbst nicht ganz sicher. Eure Meinung dazu? Mein Ziel ist es die Webseite auf die Auflösungen 1024x bis gängige aktuelle Auflösungen zu optimieren, wobei bei größeren Seiten natürlich nicht der ganze Platz genutzt werden sollte, weil die Contentbox total groß wird und der Text dadurch unschön wirkt.

Grundsätzlich möchte ich ein dreispaltiges Layout nutzen, wobei ich den Navigationen eine fixe Breite gebe von 200px und mit float: left bzw. right, unter anderem weil ich da Grafiken verwende.

Wie stell ich das nun am besten an? Was sollte ich hier eventuell für ältere Browser beachten?

Im Moment habe ich den Divs Prozentzahlen als width gegeben. Aber wie gesagt, würde das ja ausufern, bei hohen Auflösungen. Habe gelesen, dass man es mit min-width und max-width gut lösen könnte. Wie aber definiere ich dann den Freiraum der zwangsläufig entsteht bei größeren Auflösungen?

CODE
.content {
Width: 80%;
Min-width: 600px;
Max-width: 1000px;
Margin-left: 220px;
Margin-right: 220px;
}



Hab auch gelesen, dass man bei der max-width mit em Angaben arbeiten kann. Wie soll das denn funktionieren, welche Vorteile bietet das?

Achso auf JavaScript möchte ich verzichten. Könnte ja zum Beispiel damit die Auflösung Auslesen. Aber wenn der User das ausgeschälten hat sieht's doof aus.

Wäre sehr dankbar über Hilfestellungen bzw. Tutorials, um das Layout weiterzu entwickeln.

Danke im Voraus.

Gruß
Ronny
 
Und wie funktioniert so ein Framework? Muss ich das auf dem Server installieren oder wie?
 
Das sind lediglich fertige "Grundgerüste" welche bereits responsive aufgebaut sind und du diese für deine eigenen Layouts verwenden kannst. Da brauchste nichts zu installieren ;-) Sind nur html/css Dateien...
 
Und btw. spielt die Auflösung für Webseiten keine Rolle, da sie seltenst in dieser dargestellt werden
wink.gif
 
Na klar spielt die Auflösung des Rechners an dem der User sitzt ne Rolle. Oder willst du mir gerade sagen, dass ne Webseite bei dir aufm Rechner in 800x600 Pixel genauso aussieht wie in 1600x900 Pixel o_O?

Wenn deine Theorie stimmen würde, müsste man sich wohl kaum mit flexiblen Layouts und CSS Frameworks beschäftigen...
 
Das trifft nur zu wenn man den Browser dauerhaft im Vollbild-Modus laufen hat. Hast Du das? Oder andersrum: verkleinerst Du nicht ab und zu mal das Browserfenster? Gerade bei großen Auflösungen lohnt es sich 2 Fenster nebeneinander zu haben. Oder sogar den Monitor (oder das iPad) zu drehen und im Hochformat zu surfen. Die Webseite nimmt dabei immer nur den Bereich im Browserfenster ein, den nennt man Viewport und ist z.B. abzüglich Fenstertitel, Symbolleisten, Adresszeile, Scrollbars etc. immer kleiner als die Auflösung des Gerätes an dem man die Webseite betrachtet.
 
also wenn ein Design schon auf CSS basiert, könntest Du evtl. auch einfach Media Queries nutzen. Das sind CSS-Angaben, die sich auf eine bestimmte Bildschirmbreite beziehen. Damit kann man die Breite des Browserfensters (= width) und die des gesamten Bildschirms (= device-width) abfragen und entsprechend anpassen im Stylesheet. So könntest Du für andere Auflösungen unterschiedliche Breiten der Layout-Spalten bestimmen oder sogar Teile der Seite ausblenden (bei kleiner Auflösung).

Siehe Beispiel:
http://css-tricks.com/snippets/css/media-q...andard-devices/
http://blog.cssguru.de/responsive-webdesig...-media-queries/
 
Da ich endlich wieder etwas mehr Zeit habe, habe ich mir vorgenommen meine Websites auf "Responsive Design" umzustellen.
Das ist aber viel leichter gesagt als getan.
ich habe mir die 15 Desihns auf webexpedition18.com angeschaut und auch einige Frameworks heruntergeladen.

Am besten gefällt mir "230 and up". Es entspricht so ziemlich meinen Vorstellungen von "Responsive Design". Ich habe es auf PC, Tablet und Smartphone getestet. Es ist wirklich responsive.

Ich habe dann begonnen, mit Dreamweaver CS6 daran zu schrauben und zu verändern. Aber der DW war ganz einfach überfordert. Es gab minten lange Wartezeiten und sogar Abstürze. Und irgendwie verstehe ich die ganze Logik dieses Frameworks nicht.
sad.gif


Hat jemand von euch schon Erfahrung damit?

Ich habe mir dann auch das BluCSS angeschaut. Das ist das genaue Gegenteil. Simpel und einfach, aber eben nicht "responsive".

Was soll ich jetzt machen?

Gruss aus Camiguin
René
 
Das "230 and up" funktioniert nun bei mir.
Ich habe ein paar Nachtstunden dazu gebraucht, um zu verstehen, was dahinter steckt.

Extrem verwirrend (für mein alterndes Hirn
tongue.gif
) waren:
1. Andy arbeitet mit "github". Das ist ein"collaboration, review, and code management" Werkzeug. (Teuer!)
2. Die CSS sind mit LESS bzw. SASS erstellt und kompiliert worden. Da kann man nur staunen.

Nachdem ich all das SASS und LESS und GIT Zeugs beiseite gelassen hatte und einfach CSS-3 und HTML-5 gesprochen hatte,
hat mich auch die Website verstanden.

Der Alpha Tiger ist nun auf dem Netz getestet. Man weiss ja nie, ob es noch Apache und PHP Plugins auf dem Server braucht.

Falls ihr Lust habt, könnt ihr meinen ersten "responsiven" Versuch hier anschauen.
Alpha-1

Zum Testen müsst ihr das Browser Window immer mehr verkleinern. Das Layout passt sich an.
Und wenn ihr ein iPhone habt oder ein Galaxy habt, dann dreht es einmal auf horizontal.

Regnerische Grüsse aus Camiguin
(Aber es ist immer noch 25°C warm)

René
 
Ich würde dir empfehlen das css-framework twitter bootstrap zu verwenden - dann hast du ein sog. grid-system

Dieses Grid system ist responsive und du hast 12 spalten auf die gesamte width zum aufteilen - einfach bisschen einlsen dann wirst du es verstehen.


Es gibt noch dazu eine formel um fixe pixelwerte zu verhindert:

QUOTE (Gewünschte pixelgröße / containergröße) * 100

 
Zurück
Oben