Problem mit div oder nav

[Panda]

Heyho,

ich bin neu hier und habe mal eine Frage bzw. ein Problem. Ich habe vor Kurzem angefangen mich mit HTML auseinander zu setzen. Gesagt, getan. Ich probiere mich immer wieder an einer Probeseite aus und soweit bin ich gekommen:

HTML-Datei: http://dpaste.com/210N158 CSS-Datei: http://dpaste.com/3C03429

Ich hoffe ihr seht direkt mein Problem ^^" Oben die Navigationsleise sollte in der Mitte sein und den Style wie der untere Contentblock haben. Den Style hab ich schon hinbekommen, aber ich verzweifle total an dem nav und div Tag ^^"

Wenn ihr noch andere Tipps habt, wo ich etwas verbessern könnte oder allgemein Tipps für Anfänger, bin ich gerne offen für :D

LG Panda

[marctrix]

Hej Panda,

Deinem Beitrag habe ich Links hinzugefügt. Schön, dass du deinen Quelltext bereit stellst. Aber ich habe die gerenderte Seite nicht gefunden?!?

Welche Methoden hast du zur Zentrierung ausprobiert?

Versuche es doch mal mit der zentrierten Textausrichtung 😉

Dazu findest du sicher etwas im Wiki!

Ansonsten gibt es natürlich einiges, was einem alten Hasen auffällt, wenn jemand sein Erstlingswerk vorstellt. Aber das ist schon ganz gut. Vor allem hast du nicht allzu viele überflüssige Elemente drin und mit nav schon mal ein gruppierendes Element richtig angewendet. Das umgebende div benötigst du aber nicht, das kann ruhig weg.

Für den Hauptinhalt gibt es auch ein extra Element. Haupt heißt im englischen „main“ 😉

Auch zu den in html5 neuen Struktur-Elementen findest du Informationen im Wiki.

Tipps? Ja klar. Einfach machen, aber auch lesen und hier ab und zu mal zeigen, was du so treibst.

Schön, dass du dich an eine eigene Seite wagst! Viel Spaß beim entwickeln!

Marc

[Rolf B]

Hallo Panda,

ich habe deinen Sourcecode in ein jsfiddle kopiert und etwas modifiziert. Darin habe ich einiges zusammengefasst, so dass auf Wiederholungen im Style verzichtet werden kann.

Dem Hinweis mit dem div um nav wollte ich noch hinzufügen, dass genau dieses Konstrukt dein Zentrierungsproblem bedeuten dürfte. Beide Elemente haben die Klasse nav_bar, beide haben einen margin-left/margin-right von 200px, beide sind Flex-Container. Die Wirkungen überlagern sich, und eigentlich habe ich gar keine Lust, das genauer zu analysieren. Ohne das div sieht es meiner Meinung nach deutlich besser aus, und das Zentrieren der Menüpunkte gelingt - da Du Flexbox verwendest, mit justify-content:center an Stelle von text-align:center.

Die CSS-Regel für den Nav-Bereich kannst Du direkt mit dem nav Element als Selektor schreiben, dafür brauchst Du keine eigene Klasse.

Der Hover-Effekt für die Links führt zum Pumpen des Nav, weil Du die font-size des a Elements ändert. Dessen width ist in em angegeben und ändert sich deshalb. Ich habe im Fiddle deshalb rem als Einheit gewählt, (Root-em), das wird vom font-size Wechsel nicht beeinflusst. Alternativ kannst Du den Text im Link auch in ein weiteres span packen und die font-size des span ändern, dann bleibt das a Element auch unbeeinflusst (nav a:hover span { ... } ).

Tjaa, und dann? 960px Layout ist eigentlich nicht mehr state-of-the-art. Du kannst natürlich die 960px als Maximalbreite setzen, wenn du das willst, aber schau Dir die Seite mal auf einem Handy an. Da rutscht rechts alles raus. Dafür brauchst Du responsive-layout, und auch dazu steht was im Wiki… Über eine sogenannte Media Query kannst Du dein Menü anders stylen, wenn der Bildschirm zu schmal für die jetztige Darstellung wird.

Rolf

[Panda]

Hey Rolf,

erstmal Danke, dass du dich an meinem Wirr-Warr dein Glück probiert hast.

Ich habe kurz mal drüber geschaut. Ein bis zwei Fragen sind mir schon dann eingefallen.

• Ist img.left (.right) das Gleiche wie als wenn ich einfach .left (.right) schreibe? Oder (wahrscheinlicher) .left (.right) speziell auf img tags?

Bsp: Wenn ich <p class="left">Text</p> machen würde, würde es nicht funktionieren, oder?

• Wie unterscheidet sich der main tag vom body tag?

Das mit der Flexbox war zurzeit nur ein Versuch (learning by doing). Ich werde mich mal im Wiki umsehen. Muss mich aber erst mal allgemein auf der Seite zurecht finden :D

Lg Panda

[Rolf B]

Hallo Panda,

die Flexbox ist schon recht passend für deinen nav-Balken. Damit kannst du schön vertikal und horizontal zentrieren, und wenn Du magst, auch Abstände einfügen.

img.left hast Du richtig verstanden: es beschränkt die CSS Regel auf img Elemente mit Klasse left. Es hängt von deinem Anwendungsfall ab, was „richtiger“ ist.

Jetzt, wo ich nochmal drüber nachdenke... Klassen wie left oder right haben einen etwas abgestandenen Geruch - man soll Klassen nach Inhalt vergeben, nicht nach Designwunsch. Und darum: dein Anwendungsfall sieht eher danach aus, als hättest Du eine Folge von Absätzen mit Bildern, wo das Bild abwechselnd links und rechts stehen soll. In diesem Fall wäre es wohl besser, die Klassen ganz wegzulassen und statt dessen die Sequenz aus hr, img und p in ein Container-Element zu packen (article bietet sich an) und das CSS Feature even/odd auszunutzen:

main article:nth-of-type(odd) img {	float: left; margin-right: 0.4em; }
main article:nth-of-type(even) img { float: right; margin-left: 0.4em; }

Dann musst Du nicht aufpassen, welches img du mit left oder right markierst, CSS macht es automagisch.

Und wenn Du dann noch etwas in dieser Art hinzufügst:

main article { border-top: 2px groove #d0d0d0; padding: 0.3em 0; }
main article:first-of-type { border-top: none; }

kannst Du auch das <hr> weglassen, dessen Funktion übernimmt dann die top-border des article (außer für den ersten, da wird sie abgeschaltet). Solche Optik überlässt man besser dem Style. In Version 2 des Fiddle habe ich das mal gemacht.

Rolf

[Panda]

Hey,

das ist schon echt viel jetzt am Anfang ^^" Aber ich werde mich mal da rein lesen und sehen wie alles in einander greift.

Und danke, dass du wieder den Quelltext angepasst hast :D

LG Panda

[Panda]

Hey Marc,

danke für deine Hilfe :D

Ich werde mich mal im Wiki umsehen :D Gibt sicher noch viel was ich lernen kann ^^

Für die Textzentrierung versuch ich meist text-align oder über die margin zu gehen. Kenn mich da noch nicht so aus ^^" Wird aber schon :D

Tipps? Ja klar. Einfach machen, aber auch lesen und hier ab und zu mal zeigen, was du so treibst.

Klaro :D

LG Panda

[Matthias Apsel]

Hallo Panda,

Ich habe vor Kurzem angefangen mich mit HTML auseinander zu setzen.

Gute Idee.

… verzweifle total an dem nav und div Tag

Dann kannst du ja von Anfang an den Unterschied zwischen Tag und Element beachten.

Bis demnächst
Matthias

[Panda]

Hey Matthias,

danke für das Schaubild :D Ich werde es mir nochmal in Ruhe anschauen :D

LG Panda