Layout allgm. links oder mittig?

[Gary]

Morgen zusammen

Mal ganz allgemein in die Runde gefragt:

Mittiges Layout, quasi ein schmaler Anzeigenteppich, mit allen Schwierigkeiten Divs rechts und links davon raumausfüllend zu platzieren?

Oder ein solides einfaches Layout am linken Rand. Womit flüssiges installieren der Divs einfacher von der Hand ginge.

Zur Breite:
Welche Breite ist denn nicht zu groß und nicht zu klein, das viele Browser das ordentlich anzeigen. Ich meine Browser die auf einem "richtigen" Computer laufen - keine Handyapps oder solche mini Dinger.

Wäre es überhaupt möglich, das eine Webseite sowohl auf "richtigen" als auch auf diesen kleinen Handys laufen?

Zur Höhe:
Das was ich zur Breite Fragte, frage ich natürlich auch noch für die Höhe *g*

Gruß Gary

[Texter mit x]

Mittiges Layout, quasi ein schmaler Anzeigenteppich, mit allen Schwierigkeiten Divs rechts und links davon raumausfüllend zu platzieren?

Was für raumausfüllende divs rechts und links davon? Und was ist die Frage?

Oder ein solides einfaches Layout am linken Rand. Womit flüssiges installieren der Divs einfacher von der Hand ginge.

Flüssiges installieren von Divs, was das? Und ist die Frage, was ist besser oder was?

Zur Breite:
Welche Breite ist denn nicht zu groß und nicht zu klein, das viele Browser das ordentlich anzeigen.

Was hat das mit dem Browser zu tun? Ich könnte ja noch verstehen wenn Du fragst "... das es bei vielen viewport-Größen gut aussieht".

Zur Höhe:
Das was ich zur Breite Fragte, frage ich natürlich auch noch für die Höhe *g*

Willst Du die Menge oder die Größe des Inhalts an die richtige Breite/Höhe anpassen?

[Gary]

Hi texter mit x

Was für raumausfüllende divs rechts und links davon? Und was ist die Frage?

Ich meinte, wenn man ein Mittiges Layout macht, daß dies Probleme bei css-Positionierungen führen kann. Einige Browser befolgen die Abstände nicht genau z. B. beim platzieren vin Inputfelder ist mir das schon passiert. FF ok, IE verschiebt das Design.

Flüssiges installieren von Divs, was das? Und ist die Frage, was ist besser oder was?

Na das das Design fluide ist. Beim Ändern der Fenstergröße, was bei unterschiedlichen Monitorgrößen und Auflösungen von Vorteil ist.

Willst Du die Menge oder die Größe des Inhalts an die richtige Breite/Höhe anpassen?

Also automatische Anpassung (im gewissen Maße):
http://www.wc-report.info/
Aufwendig und eher unkompatibel.

Beispiel für linksbündiges Design, wie ich es meinte:
http://www.startup-in-bayern.de/themenmenue/basiswissen/rechtsformen/rechtsformen-im-vergleich.html
Wenn kleine größe gewählt wird eher sehr kompatibel.

Die Frage ist, was Ihr eher als Zeitgemäß oder Praktischer einstuft.

Gruß Gary

[Gary]

Hi nochmal,

Hier noch eine Bilderahmen Variante:
http://www.pmob.co.uk/temp/3colfixedtest_pob.htm#

Wie sieht es da bei so einem 3 Spaltenlayout aus? Gibt es da bei unterschiedlichen Größen Probleme?

Gibt es Überhaupt ein CSS Layout, das Ohne Tabellenhilfe Stretchungen problemlos mitmacht und die Auflösung oder Fenstergröße keine Rolle spielt?

Gruß Gary

[Gary]

Hi nochmal,

Ok, ausgangsposition eine llere Seite:

Ich hätte gerne rings um einen blauen Rand mit Farbverlauf zu weis, so daß der mittlere Bereich eben ganz weis ist (für späteren Content.
Start der Blauen Farbe ist # 003399 zu weis.

Ich vermute ganz stark, das ein Farbverlausrand oben und unten _oder_ links und rechts kein Problem darstellt. Aber alle vier Seiten dürfte wahrscheinlich nicht machbar sein - oder?

Gruß

Gary

[Struppi]

Ok, ausgangsposition eine llere Seite:

Nur ein Empfehlung. Warum versuchst du als Ausgangsposition dein Design nicht der Technik anzupassen, die du verwenden willst?

Die Überlegungen, die du dir machst, klingen nach einem Blatt Papier, auf dem der Entwurf aufgemalt ist. HMTL funktioniert aber so nicht besonders gut. Wenn dein Entwurf flexibel ist, dann wird auch die Umsetzung leicht.

Struppi.

[Gary]

Hi Struppi :-)

Die Überlegungen, die du dir machst, klingen nach einem Blatt Papier, auf dem der Entwurf aufgemalt ist

Hey - bist du Hellseher? Ich habe tatsächlich einige Skitzzen aufgemalt!

Ich glaub es nicht - Du solltest Lotto spielen.

Gruß Gary

[Struppi]

Die Überlegungen, die du dir machst, klingen nach einem Blatt Papier, auf dem der Entwurf aufgemalt ist

Hey - bist du Hellseher? Ich habe tatsächlich einige Skitzzen aufgemalt!

Nöö, Erfahrung.

Ich glaub es nicht - Du solltest Lotto spielen.

Dafür reicht sie dann doch nicht aus. Dass seh ich dann eher Mathematisch. Insofern schmeiss ich mein Geld lieber für andere Sachen aus dem Fenster.

Struppi.

[Gary]

Hi zusammen

So, ich habe mal einen Rahmen gebaut, von dem ich glaube, er macht alle Streckversuche einwandfrei mit.

http://www.euro-superconductors.com/

Gerüst so okey?

Gruß Gary

[Gunnar Bittersmann]

@@Gary:

nuqneH

Ich vermute ganz stark, das ein Farbverlausrand oben und unten _oder_ links und rechts kein Problem darstellt. Aber alle vier Seiten dürfte wahrscheinlich nicht machbar sein - oder?

Oder.

<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="UTF-8"/>  
    <title>TEST</title>  
    <style>  
[code lang=css]html  
{  
  background: #039;  
}  
  
body  
{  
  background: white;  
  -moz-box-shadow: 0 0 20px 20px white;  
  -webkit-box-shadow: 0 0 20px 20px white;  
  box-shadow: 0 0 20px 20px white;  
  -ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=20)";  
  margin: 5em auto;  
  max-width: 50em;  
  min-height: 10em;  
}

</style>
  </head>
  <body>
    <p>Lorem isum dolor sit amet.</p>
  </body>
</html>[/code]

Qapla'

[Gary]

Hi Gunnar,

Hab deinen Code mal Spasshalber ausprobiert (glow klang vielversprechend).

Ergab aber nur Blaues drumrum mit weisser Textbox mit lorem drinne - nix glow...

Webkit klang da echt vielversprechend - aber nix...

Gruß Gary

[Gunnar Bittersmann]

@@Gary:

nuqneH

Hab deinen Code mal Spasshalber ausprobiert (glow klang vielversprechend).
Ergab aber nur Blaues drumrum mit weisser Textbox mit lorem drinne - nix glow...

'-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=20)";' geht natürlich nur im IE ab 8. Für IE 7 und älter muss es 'filter: progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=20);' (ohne Präfix '-ms-' und ohne Anführungszeichen) heißen und noch ein bisschen angepasst werden.

Webkit klang da echt vielversprechend - aber nix...

Doch, funktioniert sowohl im Safari 5 als auch im Chrome.

Qapla'

[Texter mit x]

Wie sieht es da bei so einem 3 Spaltenlayout aus? Gibt es da bei unterschiedlichen Größen Probleme?

Wie ich in dem anderen Beitrag schon drauf eingegangen bin, Spalten kann man untereinander rutschen lassen, was das Breitenproblem entschärft. Inwiefern sonst Probleme?

Gibt es Überhaupt ein CSS Layout, das Ohne Tabellenhilfe Stretchungen problemlos mitmacht und die Auflösung oder Fenstergröße keine Rolle spielt?

Insofern, da auch Tabellen ihre Grenzen haben, ja, gibt es.

[Gary]

Hi Texter mit x

Wie ich in dem anderen Beitrag schon drauf eingegangen bin, Spalten kann man untereinander rutschen lassen, was das Breitenproblem entschärft. Inwiefern sonst Probleme?

Ich habe es immer wieder gesehen, daß eine Seite bei mir super aussieht, auf einem anderen PC aber völlig beschxxx. Entweder wird das Design zerrissen, pass an den Stößen nicht richtig zusammen, oder der Nuzer "erlaubt" sich die Schrift zu vergrößern und alles fliegt auseinander. Da sind immer so viele Unbekannte, daß man am liebsten ein Bild auf die Seite klatschen möchte und ein paar links dazu - fertig. Die Browser sind sich auch größtenteils nicht einig, wie jetzt was anzuzeigen ist und interpretieren irgend einen Blödsinn rein.... Allein die Monitore (4:3 / 16:9) - es ist wirklich manchmal zum Eierlegen. Und die vielen neuen kleinen mobilen Helferlein, die jeder hat und keiner wirklich zum Überleben braucht, machen die Sache mit einer _Allseits_ nutzbaren Seite auch nicht einfacher.

Sorry, wollt mir nur ein wenig luft machen - muß auch mal sein...

Deswegen ist, glaube ich, so einfach wie möglich, eine Variante die wahrscheinlich am wenigsten Zicken macht.

Gruß Gary

[Texter mit x]

Ich habe es immer wieder gesehen, daß eine Seite bei mir super aussieht, auf einem anderen PC aber völlig beschxxx. Entweder wird das Design zerrissen, pass an den Stößen nicht richtig zusammen, oder der Nuzer "erlaubt" sich die Schrift zu vergrößern und alles fliegt auseinander. Da sind immer so viele Unbekannte, daß man am liebsten ein Bild auf die Seite klatschen möchte und ein paar links dazu - fertig.

Ohne die Ursachen zu kennen, die ich auch gar nicht erforschen will, kann man dazu nur sagen Du machst was falsch. Entweder schluderst Du oder Du berücksichtigst die Tücken der Browser nicht.

Die Browser sind sich auch größtenteils nicht einig, wie jetzt was anzuzeigen ist und interpretieren irgend einen Blödsinn rein....

Entweder machst Du ein Layout in dem sie ihre Freiheiten ausleben können oder Du sagst ihnen alles explizit.

Allein die Monitore (4:3 / 16:9) - es ist wirklich manchmal zum Eierlegen.

Das kann doch nur egal sein, weil der viewport davon völlig unabhängig ist.

Und die vielen neuen kleinen mobilen Helferlein, die jeder hat und keiner wirklich zum Überleben braucht, machen die Sache mit einer _Allseits_ nutzbaren Seite auch nicht einfacher.

Ich hatte noch keine Gelegenheit meine Seiten mit so was anzuschauen.

Deswegen ist, glaube ich, so einfach wie möglich, eine Variante die wahrscheinlich am wenigsten Zicken macht.

Wenn man sich auf Sachen beschränkt die keine Browserbugs mit sich bringen bzw. sie so einsetzt, daß die bugs nicht wirksam werden, dann hält man sich eine Menge Scheiße vom Hals. Damit kann man aber immer noch viel anfangen.

[Texter mit x]

Ich meinte, wenn man ein Mittiges Layout macht, daß dies Probleme bei css-Positionierungen führen kann. Einige Browser befolgen die Abstände nicht genau z. B. beim platzieren vin Inputfelder ist mir das schon passiert. FF ok, IE verschiebt das Design.

Ich kenne sowas zwar aber nicht spezifisch zu mittigen Layouts. Vielleicht liegt es an meiner grundsätzlichen Herangehensweise, die fast völlig ohne browserspezifische Lösungen auskommt, einer allerdings einschränkenden Herangehensweise.

Flüssiges installieren von Divs, was das? Und ist die Frage, was ist besser oder was?
Na das das Design fluide ist. Beim Ändern der Fenstergröße, was bei unterschiedlichen Monitorgrößen und Auflösungen von Vorteil ist.

Ach so. Aber das geht mit zentriertem und mit linksbündigem Layout.

Willst Du die Menge oder die Größe des Inhalts an die richtige Breite/Höhe anpassen?

Also automatische Anpassung (im gewissen Maße):

Die Frage war nicht ganz ernst gemeint. Ein Inhalt benötigt eine gewisse Fläche, daher.

http://www.wc-report.info/
Aufwendig und eher unkompatibel.

Mag sein, kann ich nicht einschätzen, es ist aber eher Mist bei (sehr) schmalem viewport.

Beispiel für linksbündiges Design, wie ich es meinte:
http://www.startup-in-bayern.de/themenmenue/basiswissen/rechtsformen/rechtsformen-im-vergleich.html
Wenn kleine größe gewählt wird eher sehr kompatibel.

Linksbündig aber überhaupt nicht fluid.

Die Frage ist, was Ihr eher als Zeitgemäß oder Praktischer einstuft.

Kommt drauf an, in erster Linie auf den Inahlt. Grundsätzlich fluide aber es gibt auch gute Argumente für einzelne fixe Breiten. Man kann z.B. drei(oder andere mehr-)spaltige Layouts auch so umsetzen, daß bei sehr schmalem viewport die Spalten untereinander rutschen.

Ich bin da aber alles andere als ein Fachmann. Ich habe eine zentrierte fixe Seite Seite umgebaut zu einem zentriertem Contentberech (textdominiert) mit fixer Breite zur besseren Lesbarkeit, gepaart mit fluidem "Drumrum", was nur eine zweiteilige Navigation ist. Wobei fluid bisher unnötig ist, da das erst zu fließen beginnt, wenn durch den fixen Bereich bereits ein horizontale Scrollbalken da ist. Ich will den fixen Bereich aber eventuell noch durch einen mit nur maximaler Breite ersetzen. Das paßt bei meinem bisherigen Wissensstand/Können nur noch nicht in meine oben genante Herangehensweise (falls es überhaupt paßt).

[bleicher]

Grüße,
am linkejn rand klebende seite sieht bei großen breitbildmonitoren soooo kake aus, das kannst du nur mit gifs toppen. von daher - lieber mittig mit problemen, außer dir ist das auftreten egal.
MFG
bleicher

[Gary]

Hi bleicher

Grüße,
am linkejn rand klebende seite sieht bei großen breitbildmonitoren soooo kake aus, das kannst du nur mit gifs toppen. von daher - lieber mittig mit problemen, außer dir ist das auftreten egal.

Hmmm... - Ja, jaja - ich glaube optisch wäre mittig schon schöner...
I hate position-problems!

Gruß

Gary

[Beat]

Wäre es überhaupt möglich, das eine Webseite sowohl auf "richtigen" als auch auf diesen kleinen Handys laufen?

Siehe Link im Header

mfg Beat

[Gary]

Hi Beat

Wäre es überhaupt möglich, das eine Webseite sowohl auf "richtigen" als auch auf diesen kleinen Handys laufen?

Siehe Link im Header

Ja du bist ja gar nicht soweit weg von mir (nähe Basel)
Und dau behauptest, ohne mit der Wimper zu zucken, daß dein CMS das alles kann? *stichel*

Aber tolle Page!

Gruß

Gary

[Gunnar Bittersmann]

@@Gary:

nuqneH

Wäre es überhaupt möglich, das eine Webseite sowohl auf "richtigen" als auch auf diesen kleinen Handys laufen?

http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet/

Qapla'

[Længlich]

Iiti em hotep!

Mal ganz allgemein in die Runde gefragt:

Mittiges Layout, quasi ein schmaler Anzeigenteppich, mit allen Schwierigkeiten Divs rechts und links davon raumausfüllend zu platzieren?

Oder ein solides einfaches Layout am linken Rand. Womit flüssiges installieren der Divs einfacher von der Hand ginge.

Reine Geschmackssache, IMHO. Voraussetzung für beide ist, daß das umfassende Element (sinnvollerweise body) schmaler ist als der Viewport, und dann ist der Unterschied nur noch margin:0 oder margin:auto.
Was "flüssiges Installieren" bedeutet, muß ich jetzt raten, aber wenn Du damit Positionierung meinst, hilft vermutlich position:relative für den body, dann kannst Du darin absolut positionieren, wie Du lustig bist.

Zur Breite:
Welche Breite ist denn nicht zu groß und nicht zu klein, das viele Browser das ordentlich anzeigen.

100% :p

Wäre es überhaupt möglich, das eine Webseite sowohl auf "richtigen" als auch auf diesen kleinen Handys laufen?

Prinzipiell ja, allerdings gibt's da einige Einschränkungen: Breitenangaben in %, nicht in px, keine Spalten, denn die könnten unangenehm schmal werden, und v.a. viel automatisch umbrechender Fließtext und nur kleine Bilder.

Zur Höhe:
Das was ich zur Breite Fragte, frage ich natürlich auch noch für die Höhe *g*

So viel wie der Inhalt braucht. Im Gegensatz zu horizontalen werden vertikale Scrollbars keineswegs als Ärgernis empfunden, auch wenn man vielleicht nicht immer die vollen 18,939 km ausnutzen sollte, die die Browser vertragen. ;-)

Viele Grüße vom Længlich