Grid-Layout mit verschiedenen CSS Aspekten

  • Hallo allerseits,


    ich war lange, lange nicht mehr hier. Aber da ich mich wieder ans Webdesign wage, führte der Weg unweigerlich zum Traumprojekt (bin im Tabellenzeitalter hängengeblieben) ;)
    Schön, dass ihr immer noch da seid. Und natürlich suche ich wieder Hilfe.


    Ich habe eine 1-Seiten-Webseite im Grid-Layout erstellt. Soweit alles ok.


    Zunächst eine Frage: Der w3 Validator meckert über die Bezeichnung einzelner Gridzellen - Thema sectioning content. Muss man beim Grid auch bei den klassischen Bezeichnungen bleiben? Ich hatte es so verstanden, dass man die Zellen benennen/ansprechen kann, wie man möchte.


    Problem 1: Grafiken


    Die sollen natürlich responsiv sein. Ich hab es mit srcset und Prozenangaben probiert, das Logo will nicht so, wie ich es gern hätte. Am liebsten ausgetauscht, je nach Ausgabegerät.


    Problem 2: margin


    Ich möchte gerne rundherum einen Außenrand (was ich früher mit ner extra Spalte/Zeile oder "cellspace" gelöst hätte), damit der Inhalt nicht direkt an den Rand des Ausgabegerätes klatscht. Wie mach ich das im Gridlayout? Ich nehme an, auch mit "margin" (wie die Zentrierung der Seite), hab es aber bisher nicht hinbekommen. Kann jemand helfen?

    Ich sage schonmal vielen Dank :)

  • Vielen Dank für die Antworten. So, hier erstmal die Testseite: http://www.nocturnalhall.com/vic/gridtest.php


    Ich habe das margin: 10px auto; bereits drin, hab die 10px oben und unten und alles schön zentriert. Aber, je nach Ausgabegerät rutscht halt alles an den Rand. Wenn ich das "auto" durch 10px oder 3em ersetze, habe ich einen Rand, aber nix mehr zentriert auf großen Bildschirmen.


    Grid ums Grid ist eine gute Idee. Der Container auch, danke :)


    Die Sektionen werde ich nochmal ändern.


    Bei dem Logo ist es so, das ich zwei hinterlegt haben wollte (srcset), also, wenn der Browser (beim Handy z.B.) die Darstellung ein-spaltig macht, dass dann das kleine Logo geladen wird. Hab ich bisher nicht hinbekommen.


    Ich bedanke mich schon mal für die Hilfe und probiere weiter :)

  • Verpasse dem Hauptcontainer main, doch einfach ein margin nach aussen. Egal ob du einen Padding oder Marginwert in Prozent angibst, musst du dies von der 100% Breite abziehen, also 100 - (2* 5%) = 90 %.

    Zum Beispiel:

    main {

    margin: 0 5%;

    width: 90%;

    }

    Gruß HMV

  • Wenn ich mir die Website auf dem Mobiltelefon ansehe, dann sehe ich auf den ersten Blick mehr Probleme, als nur einen fehlenden Abstand nach außen.


    Jetzt stellt sich die Frage - OHNE in Deinen Quelltext gesehen zu haben - warum Du nicht einfach als Grundgerüst etwas wie Bootstrap o.ä. nutzt? Oder zu einem CMS wechselst (z.B. Wordpress). Diese bieten in den Standard-Einstellungen und ohne viel Aufwand bereits Vorlagen, die Deinem Layout entsprechen und Du musst Dich nicht damit ärgern - zumal das ja nicht Dein "Geschäft" ist und Du nur eine Website haben willst, ohne Dich mit HTML, CSS, etc. beschäftigen zu müssen.

  • Moin Andy,


    in dem Foto hab ich die Areas falsch zugeteilt. Ich woltte auf dem Handy eine einspaltige Darstellung...


    Nun, warum Grid? Wie schon oben beschrieben, bin ich im Tabellenzeitalter ausgestiegen und wurde nun gefragt: Kannst du mal eben?


    Erste Recherchen ergaben, Grids sind der neueste Hit. Inzwischen hab ich verstanden, das Grids eine Ergänzung darstellen. Da ich mich mit Bootstrap und Co aber auch nicht auskenne, ist nun egal, wo ich anfange. Lernen muss ich das so oder so.

    Ansonsten... das sind ja nur Single-Seiten, da muss ich kein CMS dahinter packen (auch wenn es einfacher wäre und meine eigene Homepage ein CMS hat), zumal die Ursprungseite, wo es dann hinsoll, auch eine statische Seite ist. Ich will es wieder lernen und von grundauf verstehen mit dem ganzen neuen Kram ;)

    Ich poste zu einem späteren Zeitpunkt noch einmal etwas, mit dem geänderten Code. Immerhin meckert der Validator nicht mehr und zeigt "fehlerfrei" an :)

  • Ah - das ist nicht Deine Website sondern für Kunden, dann sieht das natürlich anders aus und man sollte sich mit den neuesten Techniken bei HTML & CSS beschäftigen.


    Ich hab ja auch schon länger nichts mehr gemacht - aber ich denke, ich kann mir das auch mal ansehen und versuchen, Dein Layout so umzusetzen. Aus Neugierde u. vielleicht kann es helfen.