Ankündigung

Einklappen
Keine Ankündigung bisher.

HTML Grundgerüst mit Flexbox

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • HTML Grundgerüst mit Flexbox

    Hallo Boardis, bitte um Hilfestellung, habe schon versucht mir ein einfaches Grundgerüst mit Flexbox das auch responsive ist zu machen, komme aber nicht zurecht mit dem Mittelteil, der sollte zentriert und aber nur z.B. 1100px breite haben während der Header, Nav und Footer die ganze Breite haben sollten. Habe da eine kleine Grafik im Anhang wie ich mir dies vorstelle. Habe in diversen Seiten Recherchiert aber leider ohne Erfolg. Alles in ganzer Breite ist mir gelungen, ist auch laut Beschreibungen leicht nachvollziehbar aber eben das der Mittelteil bzw. article oder wie man es immer nennt links und rechts eingerückt ist und dies auch zentriert ist komme ich nicht zurecht oder begreife ich irgend etwas nicht.
    Könnte mir ein Flexbox Spezialist ein solches Grundgerüst zusammen stellen?
    Danke im voraus und schöne Grüße, oasip

    layout.png

  • #2
    Wie weit bist du denn schon?

    Kommentar


    • #3
      Ja, hier http://glockner.bplaced.net/ habe ich etwas probiert, aber da passt es mir mit dem abständen nicht so richtig, z.B. Überschrift h1,2 usw. zum Bild oder Text, dann oben beim Header ist die sonne nicht mittig usw.
      Und ob dies alles richtig ist, flex usw. ich weiß es nicht, habe das nur mit hilfe von diversen YouTube Videos zusammengestellt.

      Kommentar


      • #4
        Jetzt versuche ich es nochmals, aber eben von Grund auf.
        HTML-Code:
        <!DOCTYPE HTML>
        <html>
        <head>
        <title>Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <style type="text/css">
        * {
        padding: 0;
        margin: 0;
        }
        html {
        overflow-y: scroll;
        }
        body {
        background: #FFFFFF;
        height: 100vh;
        display: flex;
        flex-direction: column;
        }
        header {
        background: #E8FFDB;
        height:120px;
        padding: 10px;
        }
        nav {
        background: #FFDBF9;
        height: 30px;
        padding: 10px;
        }
        article {
        background: #EDEDED;
        flex: 1;
        max-width: 1100px;
        border-left: 1px solid #999999;
        border-right: 1px solid #999999;
        padding: 10px;
        }
        footer {
        background: #FFFD9E;
        height: 40px;
        padding: 10px;
        }
        </style>
        </head>
        <body>
        <header>Header</header>
        <nav>Nav</nav>
        <article>Mittelteil</article>
        <footer>Footer</footer>
        </body>
        </html>
        Zuletzt geändert von oasip; 27.02.2020, 18:20. Grund: h2 entfernt

        Kommentar


        • #5
          Hi,
          die h2 ist hier unsinnig.
          Gruß
          Ingo
          Ingo Webdesign

          Kommentar


          • #6
            Die Seite bei bplaced.net ist doch schon ein guter Ansatz. Auch die Sonne ist bei mir zentriert. Allerdings empfehle ich, den Begriff "flex" wörtlich zu nehmen: Die Container sollten sich an den Inhalt anpassen. Dem widerspricht die Definition von festen Höhen für Header, Nav und Footer. Bei dem Header z. B. kann man alles CSS weg lassen und nur für das Bild width:100% zu definieren, dann passt es sich schon an die Fensterbreite an ohne verzerrt zu werden.

            Und bei den anderen Unstimmigkeiten beschreibe doch Mal genauer, was nicht passt.

            Kommentar


            • #7
              habe im nav einige link eingebaut. Die Sonne müsste jetzt bei Link 5 in der Mitte sein, ist sie aber nicht denn sie ist ca. 1cm rechts.
              Des weiteren gefallen mir die Abstände nicht und zwar wenn ich in der css
              HTML-Code:
              .container * {padding: 10px;}
              weg lasse dann ist alles ohne abstände und eben diese sollen dann richtig eingesetzt werden, jetzt ist bei Grafiken und bei Überschriften ein großer abstand zum nächsten Text.
              Wenn ich im Header alles außer width:100% weg lasse kommt unter der scrollbalken, dann ist eben der container nicht mehr zentriert.
              Irgendwie sitze ich auf der Leitung bezüglich FLEX, habe mich mit dieser Methode bis jetzt eigentlich noch nie befasst aber es interessiert mich eben und möchte halt mal ein richtiges Grundgerüst wie eben dieses was ich versucht habe anzufangen um eben dort weiter zu arbeiten bzw. zu probieren und lernen.
              Schöne Grüße, oasip
              Zuletzt geändert von oasip; 28.02.2020, 12:54.

              Kommentar


              • #8
                Wenn ich das Bild der Sonne nehme und ausmesse, bekomme ich vom Zentrum nach links ca. 995px und nach rechts ca. 920px. D. h. es liegt nicht am CSS sondern am Bild selber. Ich würde das nicht mit CSS korrigieren, sondern das Bild ändern.
                Zuletzt geändert von Sempervivum; 28.02.2020, 12:12.

                Kommentar


                • #9
                  Danke Sempervivum, auf diesen tipp wäre ich nie gekommen, hab immer das Problem im CSS gesucht und bin Stunden dabei gesessen und mich geärgert warum sich das nicht zentriert und dabei kann CSS nichts dafür sondern meine Schuld mit PhotoShop! Habe dies geändert und es ist jetzt zentriert!

                  Kommentar

                  homepage-forum.de - Hilfe für Webmaster! Statistiken

                  Einklappen

                  Themen: 56.614   Beiträge: 428.155   Mitglieder: 28.214   Aktive Mitglieder: 47
                  Willkommen an unser neuestes Mitglied, berry25.

                  Online-Benutzer

                  Einklappen

                  287 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 283.

                  Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                  Die neuesten Themen

                  Einklappen

                  • FBA
                    Antwort auf Wordpress Online Shop
                    Danke für eure Antwort. Ich stimme euch zu.. Ein Shop würde ich auch nicht mit einem Website Builder bauen. Ich war auch der suche nach was anderem. Bin mittlerweile auch fündig geworden. https://scripteden.com/download/creator-builder/ dort sollen die einzelnen Module mit Preisen versehen werden. Ich...
                    Heute, 17:08
                  • daniel5959
                    Antwort auf Testing des Responsive Design
                    Hallo,

                    auch im Browser gibt es eine Testumgebung, die allerdings nicht alle Fehler anzeigt, aber für schnelle Tests durchaus geeignet.

                    Von Browser zu Browser gibt es Unterschiede, deshalb am Besten mit PC oder Notebook in beiden Browsern testen.

                    Firefox > Extras...
                    Heute, 16:12
                  • berry25
                    Testing des Responsive Design
                    Hallo miteinander! Wie schon der Titel sagt, habe ich Schwierigkeiten beim Responsive Design bei meinen Projekten. Ich benutzte das CSS-Framework von Bootstrap, was ja Responsive freundlich sein soll. Meine Tests liefen eigentlich bis jetzt über das DevTool und dann anschließend über 3 Endgeräte...
                    Heute, 15:24
                  • daniel5959
                    Antwort auf corona
                    Nachtrag:

                    So wie es aussieht werden wir wohl noch Monate mit der Coronakirse kämpfen müssen und anschliessend mit einer jahrelangen Finanz- und Wirtschaftskrise.

                    Die versprochenen finanziellen Hilfen werden sich für die kleinen Gewerbetreibenden wohl als Bürokratiemonster...
                    Heute, 05:25
                  • dettec61
                    Antwort auf dynpage und das Einbetten von Videos...
                    Danke, bin es gerade am testen und warte auf die ersten Rückmeldungen.....
                    31.03.2020, 22:12

                  Die neuesten Beiträge

                  Einklappen

                  Lädt...
                  X