fixe Breite bei kleinem Browserfenster

[jaubem07]

Hallo!

Suche schon eine Weile, konnte aber noch nichts finden
Sollte ich was übersehen haben, bitte um den Link...

Folgendes Problem:
Ich bin Neu und hab mich mal mit dem Buch "Websites erstellen mit Contao 3" eingearbeitet und bin im Großen und Ganzen durch.
Ich möchte, dass die Website nicht ihre Größe mit dem Browserfenster ändert. Die Seite soll bei den eingestellten 960px bleiben und wenn nicht genügend Platz vorhanden ist, muss der Benutzer horizontal scrollen.
Wo stellt man das nun am Besten "global" ein?

Danke im Voraus,
Benjamin

[MacGyer]

Servus,


du kannst in der CSS-Datei einfach dem wrapper-div eine Breite von 960px zuweisen.

#wrapper{
  width: 960px;
}

[Supertramp]

Hallo Benjamin

Bin auch neu hier. Habe mit dem Buch "Mit Contao Webseiten erfolgreich gestalten" angefangen.
"Websites erstellen mit Contao" habe ich mir inzwischen auch besorgt, habe aber erst angefangen zu lesen.
Im ersteren ist dein Problem eigentlich schön erklärt: LAYOUT - THEMES - Seitenlayout von deinem Theme bearbeiten (Layout Icon) - Dein Layout bearbeiten (Stift-Icon), ganz unten: Checkbox STATISCHES LAYOUT markieren, dann kannst du darunter eine Gesamtbreite angeben, z.B. 800px, zentriert. Wenn du nur ein Layout verwendest, reicht das aus, wenn du mehrere Layouts definiert hast, müsste man bei jedem dasselbe einstellen - daher finde ich den Ansatz von MacGyer eigentlich noch einfacher...

Gruss,
Supertramp

[jaubem07]

@MacGyver: Danke für den Vorschlag.... Tut aber trotzdem nicht ganz so wie ich mir das vorstelle....
@Supertramp: ich verwende ein statisches Layout
-> Danke für die rasche Antwort!

Vielleicht sollte ich noch genauer Beschreiben was ich will
Ich verwende ein 3-spaltiges Layout, in der rechten Seite ist Wetter, Facebook-Button und so Zeugs. Wenn das Fenster jetzt zu klein wird, rutscht mir die rechte Spalte unter die Hauptspalte, einfach gesagt: aus meinen 3 Spalten werden 2... -> Genau das will ich vermeiden. Es sollen weiterhin die 3 Spalten nebeneinander dargestellt werden!

Danke im Voraus,
Benjamin

[Supertramp]

Gute Frage - scheint so als hätten wir "Anfänger" dasselbe Problem... Ich verwende 2-spaltiges Layout:
Links die Navigation, rechts (Hauptspalte) die Artikel.

1.)
Verhalten im Firefox (V18.0.2):
Mache ich mein Firefox Fenster zu klein, rutscht der Artikel über die Navigation.

2.)
Verhalten im Internet Explorer 8:
Im IE8 ist es anderes Verhalten. Mache ich das Internet Explorer zu klein, rutscht die Navigation zunächst links aus dem Bildschirm raus und etwa 100 Pixel nach unten. Mache ich das Fenster weiter kleiner, rutscht die Navitation vom linken Rand her wieder nach rechts rein...

Scheint so als müsse man "main" und "left" mit CSS noch das "float" nachjustieren...
Bin noch nicht dazugekommen da ein wenig weiter dran rumzuspielen - aber falls da jemand grad nen Tip hat, wäre ich auch dankbar...

[einfach_chris]

@supertramp:

genau das problem hab ich auch (im firefox). finde es auch grad nicht heraus.... probiere noch rum...

[Supertramp]

Schaut man sich's im Firebug an, ist die Hauptspalte im Div "main" und die Navigation im Aside "left" drin:
firebug.jpg

Ich hab's mal mit folgendem versucht:

#main {
   display: inline;
}

#left {
   display: inline;
}

Leider immer noch gleiches Verhalten...

[Madob]

Hallo ihr 2. Schaut mal hier rein.

Das liegt an der layout.css, die automatisch responsive aufgebaut ist, dass sich die linken und rechten Spalten beim Verkleinern des Browserfensters unter die Hauptspalte schieben, wird auch als Holy Grail bezeichnet. Es soll sicherstellen, dass der eigentliche Inhalt immer ganz oben steht bei kleineren Bildschirmen und die (eher unwichtigen?!!?!?? -- würde ich jetzt mal als Ansichtssache hinstellen) Inhalte der linken und rechten Spalten darunter gereicht werden.

Wenn ihr das nicht wollt (ist nicht möglich, das Verhalten einfach im Backend zu deaktivieren), findet ihr im verlinkten Thread die Lösung.

Ich hatte vor ein paar Woche genau das selbe Problem, und es ist sehr interessant, was da alles Neue auf einem zukommt

[Supertramp]

Vielen Dank für den Link Madob.

Oh je, da kommt ganz schön viel auf einmal zusammen...
Aber Ok, der Reihe nach:

1.)
Responsive Design / Holy Grail benötige ich in meinem Fall nicht - habe nun (wie du) aus der Datei "\contao\assets\contao\css\layout.css" diesen Teil entfernt:
"@media(max-width:767px){#wrapper{margin:0;width:auto}#header, #footer{height:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}# left{right:0;margin-left:0}#right{margin-right:0}}"

(Auch wenn Peter Müller in einem anderen Thread schreibt: "Du solltest das nicht in /assets/... aus der layout.css entfernen, sondern in einem eigenen Stylesheet überschreiben bzw. resetten. Die layout.css wird spätestens beim nächsten Contao-Update neu eingespielt. Man ändert keine Core-Dateien")

CSS-Änderung gespeichert, Browsercache gelöscht, Seite neu geladen -> Aber immer noch gleiches Verhalten wie vorher.

2.)
Im Beitrag von Nina vom 20.11.2012, 11:23 hat Sie "core-responsive-ueberschreiben.css" attacht.
Dazu schreibt Sie: "...und lade sie in dein Backend. Binde sie dann in dein Seitenlayout ein."

Habe noch etwas Mühe mit "lade sie in dein Backend". Ich weiss wie man im Theme mit "Stylesheets bearbeiten" eigene Stylesheets erstellt, aber nicht wie man eine *.css-Datei lädt. Habe jetzt nochmals im Buch "Mit Contao Webseiten erfolgreich gestalten" ab S.51 gelesen (Kapitel: "Das CSS-Framework von Contao"). Da werden 4 Varianten gezeigt wie man CSS-Dokumente bearbeiten kann:
a.) Über den integrierten CSS-Editor im Contao-Backend
b.) Externe CSS-Dokumente in Contao integrieren
c.) Externe CSS-Dateien in die Seitenvorlage einbinden
d.) Kombination der Erweiterung CssEditor und Firebug

Wird also die Variante "b" gemeint sein...

Ich habe mir ein Verzeichnis \contao\files\cssextern angelegt und die "core-responsive-ueberschreiben.css" darin abgespeichert.
Nun habe ich bei meinem Layout bei den Experten-Einstellungen unter "Zusätzliche <head>-Tags" noch hinzugefügt:

<link rel="stylesheet" href="files/cssextern/core-responsive-ueberschreiben.css" type="text/css" media="screen" />

Das ganze gepspeichert, Cache vom Browser gelöscht, Seite neu geladen -> Immer noch gleiches Verhalten (im IE & im FF)

Wie ich das verstanden habe, ändert dieses CSS jedoch nur das Verhalten bei Auflösungen zwischen 768px-979px, darunter ist es immer noch das Verhalten wie ich es jetzt habe...

3.)
Bei dir hat's offenbar geklappt - welche Contao Version verwendest du, resp. habe ich beim Punkt 1 noch etwas übersehen?


Gruss,
Supertramp

[Madob]

hast du es auch aus der uncompressed entfernt?

bzw auch aus der responsive.css und der compressed von deren?

[mike_mcfly]

Ahoi,

ohne den Thread genau gelesen zu haben:

1) 960px mit Statischem Layout im Template angeben
2) die Spalten-Breiten dann auch mit Pixelwerten definieren
3) Achtung bei Padding-Angaben in der horizontalen, diese werden der Breite hinzuaddiert

[pmmueller]

Das liegt an der layout.css, die automatisch responsive aufgebaut ist, dass sich die linken und rechten Spalten beim Verkleinern des Browserfensters unter die Hauptspalte schieben, wird auch als Holy Grail bezeichnet.

Nicht ganz. Das nennt man "responsive", oder auf deutsch "reaktionsfähig".

Mit "Holy Grail" bezeichnet man den Trick, dass am Bildschirm die Reihenfolgen der Spalten #left, #main und #right ist, dass aber im Quelltext die Hauptspalte zuerst kommt: #main, #left, #right. Das ist der Holy Grail.

Es soll sicherstellen, dass der eigentliche Inhalt immer ganz oben steht bei kleineren Bildschirmen und die (eher unwichtigen?!!?!?? -- würde ich jetzt mal als Ansichtssache hinstellen) Inhalte der linken und rechten Spalten darunter gereicht werden.

Die Inhalte der Hauptspalte sind per Definition wichtiger, denn die Sidebars sind mit dem HTML-Element <aside> ausgezeichnet, was soviel bedeutet wie "zusätzlicher, ergänzender Inhalt".

Ich hatte vor ein paar Woche genau das selbe Problem, und es ist sehr interessant, was da alles Neue auf einem zukommt

Life is like a box of chocolate. You never know what you get next.

And no one said it would be easy

[pmmueller]

- habe nun (wie du) aus der Datei "\contao\assets\contao\css\layout.css" diesen Teil entfernt:

Wie ich schon sagte: Never ever do that. It's just wrong. "And so castles made of sand fall in the sea, eventually" (der Song dazu)

Außerdem steht (hoffentlich) in meinem Buch, dass die layout-uncompressed.css nur zum Angucken und Verstehen ist. Contao benutzt die layout.css. Du hast die Sandburg also vielleicht an der falschen Stelle gebaut.

Im Beitrag von Nina vom 20.11.2012, 11:23 hat Sie "core-responsive-ueberschreiben.css" attacht.
Dazu schreibt Sie: "...und lade sie in dein Backend. Binde sie dann in dein Seitenlayout ein."

Überlege dir doch einfach, was du erreichen möchtest:

1. In der layout.css stehen ein paar Anweisungen, die du nicht möchtest
2. In der Originaldatei zu ändern ist nicht gut (hatten wir schon)
3. Das "C" in "CSS" steht für "Cascading".
4. Du überschreibst also die unerwünschten Änderungen später in einem eigenen Stylesheet.
5. Nina hat so ein Stylesheet sogar schon für uns erstellt
6. Entweder speicherst du die Datei in /files und lädst sie als externes Stylesheet.
7. Oder du importierst die Datei ("CSS importieren") und lädst sie als internes Stylesheet.

Wie ich das verstanden habe, ändert dieses CSS jedoch nur das Verhalten bei Auflösungen zwischen 768px-979px, darunter ist es immer noch das Verhalten wie ich es jetzt habe...

Nicht wirklich überraschend, oder? Hast du ihren Beitrag gelesen?

Damit sollte das verkleinern zwischen den Größen von 768px-979px überschrieben sein (darunter wird immer noch linearisiert - das ist imho dann aber wirklich ok).

Mit ein bisschen logischem Nachdenken solltest du auf die Lösung kommen. Schau dir mal die erste Zeile an. Das nennt man Media Query

[pmmueller]

Ich würde aber empfehlen, die Energie lieber in das Verstehen von flexiblen Webseiten zu stecken, als in solche "Reparaturversuche". If it ain't broken, don't fix it.

Oder wie Andy Clarke in einem Tweet sagte:

From now on, if it's not responsive, it's not web design.

Die gleiche Diskussion hatten wir vor 10 Jahren mit HTML-Tabellenlayouts. "Ich will nicht CSS lernen". "Tabellen sind doch prima". "Der Kunde will das nicht". "Ich will das nicht". Und so weiter.

Ich werde glaube ich ab jetzt nicht mehr auf solche Fragen antworten. Wer Papierseiten im Web nachbauen will, muss dann selbst rausfinden, wie man das Papier in den Monitor bekommt.

Ansonsten: Print ade. Das Web ist nicht aus Papier. Immer noch nicht.

[Supertramp]

Vielen Dank für alle Antworten bisher. Ich gehe mal der Reihe nach:

hast du es auch aus der uncompressed entfernt?

bzw auch aus der responsive.css und der compressed von deren?

Ah - jetzt hab ich verstanden was es mit diesem compressed auf sich hat... (dank der anschliessenden Antwort von Peter Müller). Ok, Contao verwendet also die layout.css (und "layout-uncompressed.css" ist dient nur zur Lesbarkeit mit der sauberen Einrückungen und Kommentaren)... Die responsive.css (die ist "compressed") wird indemfall auch irgendwo eingebunden (die "responsive-uncompressed.css" dient wiederum nur zur Lesbarkeit). Ich habe es gestern nur aus der layout.css entfernt, heute Abend testweise noch aus der responsive.css: Hier hat es 2x "@media" drin. Habe zuerst nur das "@media(max-width:767px..." rausgenommen), das Verhalten ist jedoch immer noch gleich, anschliessend auch noch das andere "@media", verhält sich jedoch immer noch gleich.

[Supertramp]

Ahoi,

ohne den Thread genau gelesen zu haben:

1) 960px mit Statischem Layout im Template angeben
2) die Spalten-Breiten dann auch mit Pixelwerten definieren
3) Achtung bei Padding-Angaben in der horizontalen, diese werden der Breite hinzuaddiert

Das ist das was wir am Anfang besprochen haben. Ich weiss nicht wie's seinerzeit bei Contao 2.x war - ich bin erst kürzlich auf Contao gestossen und bin direkt mit der 3.0.3 eingestiegen. Das ganze Holy Grail scheint erst mit der 3.x dazugekommen zu sein?

[pmmueller]

VDie responsive.css (die ist "compressed") wird indemfall auch irgendwo eingebunden (die "responsive-uncompressed.css" dient wiederum nur zur Lesbarkeit).

Die responsive.css hat mit dem responsiven Verhalten des Layout Builders nichts zu tun. Die Namensähnlichkeit ist reiner Zufall

Die Datei definiert das Responsive Grid von Contao. Wenn du das im Seitenlayout nicht angekreuzt hast, wird das Stylesheet auch nicht geladen. Und wenn du das "Responsive Grid" zwar angekreuzt hast, aber die Klassen wie grid12 etc. nirgendwo einsetzt, wird responsive.css zwar geladen, aber macht nichts.

[pmmueller]

Das ganze Holy Grail scheint erst mit der 3.x dazugekommen zu sein?

"Das ganze Holy Grail"

Aber es stimmt: Leo hat in der Version 3 das CSS-Framework generalüberholt und es ist völlig anders als noch in der 2er-Version. Der Tipp von Mike_McFly funktioniert so nur in den 2er-Versionen.

[Supertramp]

Mit "Holy Grail" bezeichnet man den Trick, dass am Bildschirm die Reihenfolgen der Spalten #left, #main und #right ist, dass aber im Quelltext die Hauptspalte zuerst kommt: #main, #left, #right. Das ist der Holy Grail.

Die Inhalte der Hauptspalte sind per Definition wichtiger, denn die Sidebars sind mit dem HTML-Element <aside> ausgezeichnet, was soviel bedeutet wie "zusätzlicher, ergänzender Inhalt".

Vielen Dank für die Klarstellung (ich wollte gestern Abend eigentlich lieber ein wenig mit Contao weiterarbeiten anstatt mich gross in die Holy Grail Thematik einlesen zu müssen - aber ok, bin sehr lernwillig, Contao gefällt mir bis jetzt sehr gut und würde das ganze mit der Zeit schon gerne noch besser verstehen/kennenlernen)

[Supertramp]

Wie ich schon sagte: Never ever do that. It's just wrong.

Got it...

der Song dazu

Danke für den Aufsteller (gute Wahl! =)

Außerdem steht (hoffentlich) in meinem Buch, dass die layout-uncompressed.css nur zum Angucken und Verstehen ist. Contao benutzt die layout.css.

Kommt vermutlich im Kapitel 9 (ich bin zur Zeit grad noch im Kapitel 8 mit den Bildern im Portfolio...)

-> Nachtrag 15.02.2013, 05:48: Err, habe da was verwechselt. Zu deinem Buch werde ich erst noch kommen, ich meinte hiermit das Kapitel 8 im Buch "Mit Contao Webseiten erfolgreich erstellen" (das möchte ich zuerst noch zu Ende lesen bevor ich dann mit deinem anfange), freue mich jedenfalls jetzt schon darauf!

Du hast die Sandburg also vielleicht an der falschen Stelle gebaut.

Ich hatte es gestern wie geschrieben in der layout.css (somit in der "compressed") Datei rausgenommen.

Überlege dir doch einfach, was du erreichen möchtest:
- In der layout.css stehen ein paar Anweisungen, die du nicht möchtest

Verstanden

[*]In der Originaldatei zu ändern ist nicht gut (hatten wir schon)

Verstanden

[*]Das "C" in "CSS" steht für "Cascading".

Verstanden

[*]Du überschreibst also die unerwünschten Änderungen später in einem eigenen Stylesheet.

Hier bin ich mir nicht ganz sicher:
Einerseits bin ich kein CSS-Guru, z.B. die Syntax "@media (max-width:767px)" kannte ich bisher nicht.
Wenn das raus muss und ich das in einer eigenen CSS-Datei überschreiben sollte, kann ich dann einfach schreiben:

@media (max-width:767px)
{
}

(Also quasi alles "leer" lassen, damit habe ich das was in der layout.css drinsteht überschrieben?)
(Und wann genau kommt die "responsive.css" zum Zug? Dort ist dieses "@media (max-width:767px)" ebenfalls drin, hätte ich dieses dann mit meiner eigenen Datei ebenfalls überschrieben?)

Naja, vielleicht am Wochenende besser mal das Buch komplett fertig durchlesen - evtl. erübrigen sich solche Fragen dann? Mal sehen...

[*]Nina hat so ein Stylesheet sogar schon für uns erstellt

Der ganze Thread war nicht wirklich leicht zu verdauen und in diesem CSS sind auch soviele Formatvorlagen überschrieben, dass man als "normaler Anwender" eigentlich nicht wirklich durchblickt was hier genau passiert, aber ok, werde mir das alles zusammen am Wochenende nochmals in Ruhe durchlesen und überlegen.

[*]Entweder speicherst du die Datei in /files und lädst sie als externes Stylesheet.

Verstanden

[*]Oder du importierst die Datei ("CSS importieren") und lädst sie als internes Stylesheet.

Verstanden

Nicht wirklich überraschend, oder? Hast du ihren Beitrag gelesen?

Schnell durchgelesen/überflogen, da ich mich wie gesagt eigentlich um den Content der Webseite kümmern wollte, werde aber um solche Geschichten wie diese hier nicht drumherumkommen...

Mit ein bisschen logischem Nachdenken solltest du auf die Lösung kommen. Schau dir mal die erste Zeile an. Das nennt man Media Query

Wie oben geschrieben kannte ich diese Syntax bisher noch nicht - aber danke für den Hinweis. Werde ich diesbezüglich auch noch etwas genauer einlesen.

Jedenfalls nochmals vielen Dank für die Antworten soweit.

[Supertramp]

Die [FONT=Courier New]
Die Datei definiert das Responsive Grid von Contao. Wenn du das im Seitenlayout nicht angekreuzt hast, wird das Stylesheet auch nicht geladen. Und wenn du das "Responsive Grid" zwar angekreuzt hast, aber die Klassen wie grid12 etc. nirgendwo einsetzt, wird responsive.css zwar geladen, aber macht nichts.

Ah, das bindet die responsive.css ein... ok... (ist bei mir zur Zeit nicht angekreuzt).
Danke für den Hinweis!

[Supertramp]

"Das ganze Holy Grail"

Aber es stimmt: Leo hat in der Version 3 das CSS-Framework generalüberholt und es ist völlig anders als noch in der 2er-Version. Der Tipp von Mike_McFly funktioniert so nur in den 2er-Versionen.

Auch hier nochmals Danke für den Hinweis.

(Vermutlich arbeiten noch viele mit der V2.x und können desshalb gar nicht nachvollziehen um was es bei dieser Diskussion hier eigentlich genau geht...)

[jaubem07]

So.... einmal nicht online und schon versinkt man in den vielen Antworten

Die gleiche Diskussion hatten wir vor 10 Jahren mit HTML-Tabellenlayouts. "Ich will nicht CSS lernen". "Tabellen sind doch prima". "Der Kunde will das nicht". "Ich will das nicht". Und so weiter.

Ich werde glaube ich ab jetzt nicht mehr auf solche Fragen antworten. Wer Papierseiten im Web nachbauen will, muss dann selbst rausfinden, wie man das Papier in den Monitor bekommt.

Ansonsten: Print ade. Das Web ist nicht aus Papier. Immer noch nicht.

Hmmm... Anscheinend muss ich meine Denkweise über Webseitenprogrammierung bzw. die ganze Idee dahinter überdenken!

Danke an alle die sich eingebracht haben und ich denke dieser Beitrag hilft einigen weiter!!

Benjamin

[pmmueller]

Hmmm... Anscheinend muss ich meine Denkweise über Webseitenprogrammierung bzw. die ganze Idee dahinter überdenken!

Das könnte dabei am Ende rauskommen