Horizontale Navigation - Menüpunkte lassen sich nicht ganz oben ausrichten

[Milchmann]

Ich bastel gerade an meiner 2. Contao Seite an einer horizontalen Navigation. Das Problem habe ich bereits in der ersten Seite gehabt, das da aber irgendwie einigermaßen hingekriegt. Jetzt möchte ich es richtig machen:

Die einzelnen Menüpunkte schweben vertikal quasi im Raum. Ich möchte dass die an der oberen Grenze beginnen, bekomme es aber nicht hin. Es ist immer ein Abstand oben vorhanden, den ich nicht wegbekomme. Was mach ich da wieder falsch?

.mod_navigation ul.level_1 li {
float:left;
display:block;
margin-top:0;
padding:5px 15px;
font-size:1.4em;
}

.mod_navigation {
height:100px;
}

[valentin_]

verwendest du eine reset.css um die default-styles der browser zurueckzusetzen?

oder es liegt an deinem padding. wenn du 0 15px 5px schreibst ist kein abstand nach oben - ich weiss aber nicht ob du das meinst.

Gesendet von meinem GT-I9505 mit Tapatalk 2

[Milchmann]

Das Padding ist nur zwischen dem Text der navigation und dem "Kasten" drum herum...

Ich habe mal das CSS-Reset aktiviert, und nun ist die Ausrichtung der Navigation so wie sie sein soll. Danke für sen Tipp! Aber was genau ist dieses CSS-Reset? Als ich es aktiviert habe hat sich auf einmal auch der Text in der Hauptseite verkleinert. Soll ich diese Funktion anlassen oder besser ausschalten?

[KlausGrenoble]

Aber was genau ist dieses CSS-Reset? Als ich es aktiviert habe hat sich auf einmal auch der Text in der Hauptseite verkleinert. Soll ich diese Funktion anlassen oder besser ausschalten?

Ein kleiner Vorgeschmack:
https://github.com/contao/core/issues/4830

[valentin_]

immer aktivieren. dadurch werden wie schon gesagt alle standardwerte (abstaende, schriftgroesse usw) zurueckgesetzt - eine gute grundlage, dass die website in allen browsern gleich aussieht.

Gesendet von meinem GT-I9505 mit Tapatalk 2

[Lego2013]

Aber was genau ist dieses CSS-Reset?

Du solltest unbedingt CSS richtig lernen, um Contao vernünftig einsetzen zu können... Ein CSS-Reset setzt die verschiedenen Browser-Standardwerte zurück, sodass Du von Grund auf stylen kannst und Dir keine Gedanken über die verschiedenen Browservorgaben machen musst. Du kannst das gut testen, wenn Du CSS-Reset ausschaltest und die Seite in verschiedenen Browsern anschaust. Viele Designer gehen heute auch von dem klassischen Reset weg und hin zum Normalisieren (normalize.css). Am besten mal googeln, wenn Du die Unterschiede verstehen willst.

Wie _valentin schon sagte: Immer aktivieren.

[Milchmann]

Alles klar, vielen Dank. Meine CSS Defizite machen sich bemerkbar. Hab mir heute erstmal das Contao Buch bestellt und zwei dicke CSS Bücher ausgeliehen. Bald bin ich dann derjenige der solche Anfängerfragen beantwortet

[Lego2013]

Bald bin ich dann derjenige der solche Anfängerfragen beantwortet

@Milchmann: Genau so ging's mir vor einigen Monaten auch (schau mal auf das Registrierungsdatum). Ich war exakt an der gleichen Stelle und mir haben die besagten Bücher super geholfen. Mittlerweile machen wir fast alle Projekte mit Contao und sind noch bei keinem Problem hängengeblieben. Früher haben wir mit TYPO3 entwickelt...

Bücher: "Webseiten erstellen mit Contao 3" und "Little Boxes" von Peter Müller
Videos: LevelUpTus CSS und CSS3 (englisch) bei Youtube: http://www.youtube.com/playlist?list...cWL1PnY0H1w5N_ und http://www.youtube.com/playlist?list...uhco5XavNA9JaD

[pmmueller]

Die Grundlagen von CSS gibt's bei "Little Boxes" auch kostenlos online:

http://little-boxes.de/little-boxes-teil1-online.html

Viel Spaß beim Lernen.

[Milchmann]

Also, das Buch "Webseiten erstellen mit Contao 3" ist jetzt meins... Wow, ganz schön dick das Buch! Hab das jetzt mal überflogen, macht einen sehr guten Eindruck. Respekt, Herr Müller!

Ich habe noch ein Problem, mache da aber keinen neuen Thread auf: In meinem Header soll eine durchgehende Navigationsleiste positioniert werden, ganz unten ohne Abstand. Was mir ein befreundeter Medeingestalter gesagt hat funktioniert aber nicht:

#header {
position:relative;
}

.mod_navigation {
width:100%;
height:33px;
bottom:0;
position:absolute;
display:block;
}

Die Navigationsleiste ist willkürlich in der oberen Hälfte des Headers. Ach ja, CSS-Reset ist an. Was mach ich falsch?

[valentin_]

probier mal dem header eine hoehe geben.

Gesendet von meinem GT-I9505 mit Tapatalk 2

[Milchmann]

Der Header hat ja schon im Seitenlayout eine Höhe von 200px, dachte ich muss die dann nicht mehr angeben. Wenn ich zusätzlich die Höhe in Pixeln angebe, passiert nicht wirklich was (er wird halt kleiner wenn ich z.B. 150px eintrage, aber die Navigationsleiste bewegt sich nicht. Wenn ich 100% als höhe angebe, rutscht der Headermit der Unterkante an die Nav-Leiste dran. So wie ich es haben will aber dann ist der Header zu klein.

[Milchmann]

Ich glaub ich habs! Wenn ich die Klasse #header in #header.inside umbenenne, dann klappt es.

[pmmueller]

Den ersten Style kannst du sparen, dann das Element <div class="inside"> (Seite 207 unten) im Header bekommt in layout.css sowieso schon position:relative (Seite 213/214):

#container, .inside {
  position: relative;
}

Wenn du dir nicht sicher sein solltest, wie das mit der absoluten und relativen Positionierung funktioniert:
http://little-boxes.de/lb1/12.5.2-ab...n-element.html

Allerdings verstehe ich ehrlich gesagt nicht, warum du absolute Positionierung benötigst, denn die Navigation steht doch im Header sowieso schon ganz unten.