CSS-Hilfe bei einem Contao-Projekt

[Vianon]

Hallo liebe Community,

seit kurzem arbeite ich an einem kleinen privaten Projekt, habe aber nun ein Problem, dass ich nicht in den Griff bekomme.

Hier die Testseite: http://beta.kuare.de

Folgendes möchte ich erreichen:

Höhe der Seite immer 100%, was auch grundsätzlich geht. Aber: Wenn ich das Browserfenster von der Höhe kleiner mache als den Content, passiert etwas unschönes. Ein Teil wird abgeschnitten wenn ich runterscrolle. Da ich die Höhe ja immer auf 100% gesetzt habe, macht das auch Sinn aber wir verhindere ich das der Hintergrund des unteren Bereiches abgeschnitten wird? Scrollbar ist ja ok, aber bitte mit dem Hintergrund. Geht das überhaupt nur mit CSS oder muss ich das irgendwas mit Javascript basteln?

2. Problem ist die Darstellung auf mobilen Geräten. Leider kenne ich mich damit bisher kaum aus. Auf meinem Nexus 5 und einem Galaxy Tab 7 sehe ich nur den Slider. Kein Menü, kein Content.

Würde mich über eure Hilfe sehr freuen.

VG
Vianon

[Yann]

Hallo,

sieht aus, als bräuchtest du sowas wie "Fake-Columns". Ich hab das in einem ähnlichen Projekt mit einem 1px hohen Hintergrundbild im body-Element gelöst, das dann per repeat-y gescrollt wird. Für den Betrachter sieht es aus, als würde die Spalte immer bis zum Ende der Seite gehen.

Hoffe, das hilft! Bei deinem zweiten Problem habe ich leider spontan auch keine Idee, da ich das nicht reproduzieren kann.

Viele Grüße
Yann

[Yann]

Ah, jetzt doch. Du müsstest einen mediaquery einfügen, der die Margin-Einstellungen für das #left-Element unterhalb von 767px Pixeln zurücksetzt. Momentan wird #left und damit die Navigation nämlich dann um -100% nach links geschoben, also aus dem Viewport hinaus. Das sähe dann ungefähr so aus:

@media (max-width:767px){
 #left {
   margin-left:0%;
 }
}

Je nachdem, wie du CSS handhabst kannst du es als eigenes Stylesheet im Theme anlegen und in den Stylesheeteinstellungen die Mediaquery (max: 767px) festlegen. Denk dann aber daran, es auch im Seitenlayout einzubinden, am besten möglichst weit hinten.

Viele Grüße und viel Erfolg
Yann

P.S.: Hast du die Browsererweiterung Firebug? Hilft wahnsinnig bei CSS-Problemen und gibt es für Chrome und Firefox.

[Vianon]

Hi Yann,

vielen Dank erstmal für die Tipps. Das mit der Mediaquery hat mir schon einmal sehr geholfen. Endlich sieht man auch auf mobilen Geräten etwas. Nun muss ich das noch etwas anpassen und dann ist das so in Ordnung.

Natürlich ist mir Firebug ein Begriff und ich nutze es auch sehr intensiv. Aber leider kann das Plugin nicht wissen, was der User vor dem Bildschirm eigentlich will und wenn der dann den Wald vor lauter Bäumen nicht sieht bzw. einfach keine Ahnung hat, dann bringt auch das einen nicht weiter

Das mit dem "Fake-Columns" hab ich noch nicht ganz verstanden. Momentan habe ich ja allen Elementen eine Höhe von 100% gegeben, damit sich alles über die gesamte Höhe erstreckt. Je nach Browsergröße wird das auch prima gemacht. Wenn das Fenster nun z.B. 800px hoch ist und damit die 100% hat, wie hilft dann das auffüllen mit dem Bild? Wenn ich dann hochscrolle ändern sich ja nicht die 800px bzw. 100%, also füllt er nicht mehr auf. Hmmm, schwer zu erklären....im Firebug wird ja das aktive Element "markiert" und das wird ja beim scrollen nicht größer. Muss ich das mit der 100%-Höhe vielleicht rausnehmen?
---
Nachtrag:
Folgendes habe ich im Netz gefunden: http://www.ohne-css.gehts-gar.net/0005.php
Meinst du das mit "Fake Columns"?

Nachtrag 2:
So hab jetzt alle Hintergrundfarben gelöscht und eine 980px breite Grafik erstellt. Davon sind 220px grau transparent damit das Menü hinterlegt ist. In kleineren Browserfenstern sieht das nun auch so wie gewollt aus. Grauer Hintergrund und wenn man scrollt, bleibt es grau und es wird nichts abgeschnitten.
Wenn das Fenster aber größer als der Inhalt ist, fehlt etwas. Wenn ich html, body und wrapper eine Höhe von 100% verpasse, wird logischerweise wieder etwas abgeschnitten wenn man scrollen muss. Alles irgendwie noch nicht das gelbe vom Ei.

[Spooky]

Ja, das mit der 100% Höhe geht so nicht. Was du brauchst ist eine min-height. Aber: Eine min-height von 100% funktioniert nur dann, wenn auch der Parent eine fix definierte Höhe hat. Wenn du daher bspw. deinen #main und #left containern eine min-height:100%; geben wolltest, dann müsstest du dem #container, dem #wrapper, dem <body> und dem <html> eine höhe von 100% geben. Das bereitet dir aber dann ganz andere Probleme.

Alternativ kannst du auch

#main, #left {
    min-height:100vh;
} 

nehmen, das geht aber erst ab IE9 (und in anderen Browsern gibt es auch ein paar Probleme: http://caniuse.com/viewport-units ).

Ansonsten brauchst du eher eine JavaScript oder sonstige Lösung für Spalten die gleich hoch sind (und noch dazu mindestens so hoch wie der Viewport).

[Vianon]

Danke sehr, habs mal kurz getestet und sieht erst einmal ganz gut aus.

Das mit der Kompatibiltät muss ich mal genauer anschauen. Wenn es keine andere Lösung gibt, werd ich wohl Kompromisse eingehen.

[Vianon]

@spooky:

Sag mal, hast du einen weiteren Tipp für mich weshalb ich meinen Content (Menupunkt 1) nicht ebenfalls mit min-height: 100vh auf die komplette Größe bekomme? Das Menü funktioniert ja nun aber egal was ich mache, die Box (#main) bleibt so wie vorher.

Danke

[Spooky]

Naja du hattest ja ursprünglich 2 Probleme/Anforderungen:

• #left und bestimmter Inhalt sollen mindestens so hoch sein wie das Browserfenster
• #left und bestimmter Inhalt sollen immer gleich groß sein

Mit min-height:100vh; löst du ersteres, aber zweiters ist dann immer noch offen. Beispiel für ein einfache jQuery Variante (nur wenig getestet):

(function($)
{
    $(document).ready(function()
    {
        var boxHeight = $('.box').first().height();
        var leftHeight = $('#left').height();
        if( boxHeight > leftHeight )
            $('#left').css( 'height', boxHeight+'px' );
        else
            $('.box').first().css( 'height', leftHeight+'px' );
    });
})(jQuery); 

In das JavaScript könntest du dann auch noch gleich den Viewport abfragen, dann erübrigt sich das min-height:100vh; (oder als Zusatz für ältere Browser).

Allerdings würde ich deinen Aufbau etwas umbauen. Der Hintergrund, der sich bei dir über die ganze Seite erstrecken soll, wird über .box definiert, und diese Klasse gibst du einen Artikel, je nach Bedarf. Ich würde den Hintergrund lieber #main geben und über Seiten-Klassen steuern, wo der Hintergrund erscheinen soll oder nicht.

[Vianon]

So richtig zufrieden war ich noch nicht (was aber nicht an der Hilfe von euch lag) und habe mein Konzept noch einmal über den Haufen geworfen weil ich mit einer Onepage-Seite liebäugelt habe.

Habe mir die Erweiterung von Tim Gatzky angeschaut (an dieser Stelle auch vielen Dank für diese Erweiterung) und mal grob etwas zusammengebastelt ( www.beta.kuare.de ). Bin soweit zufrieden, habe allerdings einen Wunsch, den ich mit meinen doch sehr beschränkten JS-Kenntnissen nicht realisieren kann. Muss mir wohl mal ein Buch kaufen bzw. einige Tutorials machen weil man daran nicht vorbeikommt.

Folgendes möchte ich gerne umsetzen:

Die Navigationleiste, die beim Laden der Seite ja noch unter dem Slider und somit nicht am oberen Rand sitzt, soll beim Scrollen nach oben fixiert werden sobald sie den Rand erreicht hat und nicht zusammen mit dem Slider verschwinden. Geht das ohne Probleme oder versuche ich wieder einmal das unmögliche bzw. besonders schwierige zu erreichen?

Über Hilfe würde ich mich sehr freuen.

LG

Vianon

[derRenner]

Hallo,

ich denke, dass was du realisieren möchtest klappt mit CSS nicht ...
Schau mal auf diesen Artikel, hier ist das ganz toll beschrieben und auch der entsprechende Link zu Github mit dem notwendigen Skript. Ich habe das erst vor Kurzem in einem Vorschlagsprojekt untergebracht und das klappt eigentlich ganz prima!

[Vianon]

Hi,

vielen Dank für die schnelle Reaktion. Schaut super aus.....allerdings nicht bei mir

Hab alles nach Anleitung gemacht:
1. Datei runtergeladen und in das Verzeichnis gepackt
2. Im Seitenlayout das js verlinkt <script src="assets/js/jquery-scrolltofixed.js" type="text/javascript"></script> und aktiviert
3. Eine Kopie von fe_page angelegt und den Auszug aus der test.html eingefügt
4. Dann habe ich die Klasse angepasst, in meinem Fall hab ich das Ganze in .mod_onepagewebsitenavigation geändert um nur die Navi anzusprechen

Leider passiert bei mir gar nichts. Hab nun herumgetestet und div. Änderungen vorgenommen, das Ganze auch noch einmal ganz von vorne gemacht aber ohne Erfolg.

Stehe gerade total auf dem Schlauch und weiß nicht wo mein Fehler liegt.

-------------

Ok, habe es nun hinbekommen. Anscheinend gab es ein Problem mit dem Slider. Wenn das eine lief, funktioniere das andere nicht. Verwende nun einen anderen Slider und siehe da, es klappt.

Nochmals vielen Dank