[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

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%;
}

---

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.

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.