Contao-Camp 2024
Ergebnis 1 bis 4 von 4

Thema: [solved] richtiges CSS für onePageWebsite

  1. #1
    Contao-Fan
    Registriert seit
    12.01.2011.
    Beiträge
    322

    Standard [solved] richtiges CSS für onePageWebsite

    Hallo,

    ich habe gerade versucht die OnePageWebsite Erweiterung mit etwas CSS anzupassen, aber irgendwie habe ich gerade ein Problem. Ich dachte das es ausreicht die Klasse "page" einzustellen, so das jede Seite in Contao auf 100% Breite und Höhe läuft. Aber dies war wohl ein Fehler von meiner Seite aus.

    Ich habe jetzt schon recht viel Zeit in die Lösung dieses Problems gesteckt, aber komme leider kein Stückchen weiter.

    Anbei mein ink zu meiner Demo Seite: http://neu.versicherungheute.de/

    Über den richtigen Anstoß würde ich mich sehr freuen.

    Vielen Dank
    Geändert von bongartz120 (08.10.2015 um 20:59 Uhr)

  2. #2
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Wahrscheinlich kommt dir dort das margin von dem BODY in die Quere. Setze es einfach auf 0.

    Du solltest die Listenpunkte auch nicht auf float:left; setzen. min-height:100%; bringt hier auch nichts. Setze diese ULs und LIs einfach auf display:block; dann noch das width:100%; weg, weil block-Elemente automatisch den ihnen in der Breite zur Verfügung stehenden Raum einnahmen (nicht mehr, wenn sie gefloatet oder absolut|fixed posiltioniert werden.). Gib den ULs und LIs zur Sicherheit noch eine list-style Anweisung mit.
    HTML-Code:
    .page, 
    .wrapper, 
    .mod_onepagewebsiteregular, 
    .mod_onepagewebsiteregular ul {
      background: #666666 none repeat scroll 0 0;
      float: left;
      list-style: outside none none;
      min-height: 100%;
      overflow: hidden;
      width: 100%;
    }
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  3. #3
    Contao-Fan
    Registriert seit
    12.01.2011.
    Beiträge
    322

    Standard

    Habe es mit der Höhe von 100% jetzt so gelöst, da alles andere irgendwie nicht geklappt hat:

    Code:
    .page {
      	list-style: outside none none;
      	overflow: hidden;
    	display: block;
    	height: 100vh;
    }
    Vielleicht weiß jemand ja noch was besseres.

  4. #4
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Kommt halt drauf an, was du möchtest. Du siehst ja, was 100vh macht. Wenn du es so willst, ist das eine gute Lösung.

    Du hast da noch einiges überflüssiges CSS drin, ich vermute, dass kommt von irgendeiner eingebundenen CSS-Datei von Contao. Z.B.
    HTML-Code:
    body, html {
      height: 100%;
      width: 100%;
    }
    body {
      font-size: 100.01%;
    }
    #main, #left, #right {
      float: left;
      position: relative;
    }
    • height:100% braucht man nur in seltenen Fällen. Du hier wahrscheinlich nicht.
    • width: 100% ist bei Block-Elemenen überflüssig, es sei denn, sie sind gefloatet oder absolut|fixed positioniert.
    • font-size: 100.01% ist ein Patch für uralte Opera-Browser.
    • Wenn du nicht mit dem Contao CSS-Framework arbeitest, floatest du main, left und right besser erstmal nicht.

    Ja, height:100%; funzt fast nur, wenn das Elternelement eine klar definierte Höhe hat und die Browser reagieren hier auch schon mal unterschiedlich.

    Google auch mal nach normalize.css, die kann man gut als erste CSS-Datei einbinden.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •