Eine frage an die Profis...

[Rolf B]

Hallo liebewinter,

Du kannst deinen Code auch als Text kopieren und hier zeigen. Dann kann man davon kopieren.

Die Idee ist, dass Du die Bereiche deiner Seite im HTML so baust, dass sie einzeln sind. Wo sie angezeigt werden, baust Du mit CSS zusammen. Dafür ist Grid besser als Flexbox, du musst bei grid nur wissen, dass es zwei Versionen von grid gibt. Internet Explorer und Edge (bis Version 15) verwenden die alte Version, alle anderen Browser die neue Version. Wenn deine Seite in Internet Explorer und alten Edge Versionen so aussehen soll wie auf anderen Browsern, dann ist grid schwieriger. Weil ich meine Arbeit in einer Firma mache, die viel Internet Explorer 11 verwendet, benutze ich grid nicht und kenne mich damit nicht gut aus.

Wenn Du Flexbox verwendest, musst Du ein "Helfer-div" verwenden, um linke Navigation, Hauptteil und eine rechte Spalte nebeneinander zu bekommen.

Brauchst Du eigentlich zwei Navigationen? Wird deine Seite so groß, dass eine nicht reicht? Ich möchte mit Dir jetzt nicht über ein TopNav mit Aufklapp-Menüs sprechen; wenn man das so machen will, dass es jeder benutzen kann, ist es schwierig. Für eine erste Seite kannst Du die Navigation an den linken Rand setzen, und Listen ineinander legen wenn du eine Struktur darin haben willst. Wenn die Seite auf einem Handy angezeigt wird, KANN man etwas bauen womit die Navigation aufklappen und zuklappen kann, das muss für den Anfang aber nicht sein.

Bevor ich ein Beispiel für Flexbox mache (Gunnar hat in seinem codepen ja schon etwas für grid gezeigt), möchte ich von Dir wissen, was Du mit "rechte Spalte" meinst. Wie soll deine Seite aussehen? Willst Du zwei oder drei Spalten haben?

So                                          oder so
------------------------------------        ------------------------------------
!           header                 !        !           header                 !
------------------------------------        ------------------------------------
! Na !                             !        ! Na !                       !     !
! vi !   Hauptteil                 !        ! vi !   Hauptteil           ! info!
! ga !                             !        ! ga !                       !     !
! ti !                             !        ! ti !                       !     !
! on !                             !        ! on !                       !     !
!    !                             !        !    !                       !     !
------------------------------------        ------------------------------------
!           footer                 !        !           footer                 !
------------------------------------        ------------------------------------

Rolf