Bernd: Frage zu einem Designaufbau und deren Umsetzung

SELF-Forum

Frage zu einem Designaufbau und deren Umsetzung

Bernd
– Informationen zu den Bewertungsregeln

Guten Abend an alle,

ich möchte gerne so einen Header bauen: http://ferdykorpershoek.com/

Dazu ein paar Fragen:

  1. Wie groß sollte das Bild in der Breite sein? Das Bild sollte in etwa so aussehen: https://gym.oceanwp.org/

  2. Auf dem Bild, sollte immer mittig (oben unten / links rechts) ein Claim der über zwei Zeilen geht) angeordnet werden, wie in diesem Beispiel: https://gym.oceanwp.org/

  3. Wenn ich etwas nach unten scolle, sollte wie im Beispiel die Navigation etwas dunkler werden.

  4. Ich habe 4 Bereiche auf meiner Seite (Startseite, Über mich, Leistungen, Blog). Jeder Bereich sollte auf der Startseite aufgelistet werden (OnePager) Wenn ich auf Leistungen klicke möchte ich gerne direkt in den Bereich springen, die Navigation sollte stehen bleiben, so wie in diesem Beispiel https://megagym.oceanwp.org/ auf "Our Process" klicken.

  5. Und zum Abschluss im Bereich Blog würde ich gerne so eine Darstellung https://gym.oceanwp.org/ (OUR LATEST NEWS) haben.

Fragen über Fragen und vor allem wie fange ich von den Elementen auf der Seite an? Ich würde die Seite gerne modern aufbauen. Alte Browser sind für mich nicht so wichtig, sagen wir bis zum IE 11. Meine Idee war CSS Grid, da habe ich ein interessanten Beitrag http://t3n.de/magazin/css-grid-layout-vorgestellt-gestalten-rastern-242792/3/ gelesen. Kann ich dieses auf meine Bespiele anwenden?

Vielleicht noch kurz etwas zu den einzelnen Unterseiten. Diese sollten später zweispaltig werden (70/30) wie hier zu sehen ist https://travel.oceanwp.org/category/adventure/

Ich bin für jede Diskussion und Vorschläge offen.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Frage zu einem Designaufbau und deren Umsetzung

    Felix Riesterer Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    Lieber Bernd,

    bei den Links dachte ich zuerst an versteckte Werbe-Links-SEO, aber Deine Fragen scheinen zumindest bis jetzt ernst gemeint.

    Bei dem Link zu einer CSS-Grind-Layout-basierten Lösung steht doch schon ein Stichwort in der Überschrift der dortigen Seite: Bootstrap. [Edit]Dort findest Du auch einen Link zu passenden Anleitungen.[/Edit]

    Was die Frage zu den Abmessungen des Bildes im Hintergrund angeht, so hatte die von Dir verlinkte Seite ein FullHD-Bild (1920x1080px) verwendet, welches bei Bedarf visuell gestreckt wird.

    Liebe Grüße,

    Felix Riesterer.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Frage zu einem Designaufbau und deren Umsetzung

    Jonathan Harker (Versionen)
    – Informationen zu den Bewertungsregeln

    Guten Abend an alle,

    Fragen über Fragen und vor allem wie fange ich von den Elementen auf der Seite an?

    Am Einfachsten wäre es, die von dir genannten Seiten abzuspeichern und den HTML-Code anzuschauen. Dann kannst Du eigene Inhalte einfügen und ihn ggfs. anpassen.

    Ich würde die Seite gerne modern aufbauen. Alte Browser sind für mich nicht so wichtig, sagen wir bis zum IE 11. Meine Idee war CSS Grid, da habe ich ein interessanten Beitrag http://t3n.de/magazin/css-grid-layout-vorgestellt-gestalten-rastern-242792/3/ gelesen. Kann ich dieses auf meine Bespiele anwenden?

    Ja, natürlich. Am besten erst mal einlesen, weil die vielen neuen Eigenschaften auf den ersten Blick alle gleich klingen. Hinterher ist das Layouten aber wirklich intuitiv.

    Ich bin für jede Diskussion und Vorschläge offen.

    Gruß Jo

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Frage zu einem Designaufbau und deren Umsetzung

    at
    – Informationen zu den Bewertungsregeln

    Hallo Bernd.

    Wie groß sollte das Bild in der Breite sein? Das Bild sollte in etwa so aussehen: https://gym.oceanwp.org/

    Das hängt vom Ausgabegerät und der Verwendung durch dessen Benutzer ab. Das solltest du berücksichtigen.

    Auf dem Bild, sollte immer mittig (oben unten / links rechts) ein Claim der über zwei Zeilen geht) angeordnet werden, wie in diesem Beispiel: https://gym.oceanwp.org/

    Das klingt nach einem Hintergrundbild.

    Wenn ich etwas nach unten scolle, sollte wie im Beispiel die Navigation etwas dunkler werden.

    Das funktioniert mit etwas Javascript. Und wenn es etwas mehr sein soll, gibt es auch dafür etwas.

    Ich habe 4 Bereiche auf meiner Seite (Startseite, Über mich, Leistungen, Blog). Jeder Bereich sollte auf der Startseite aufgelistet werden (OnePager) Wenn ich auf Leistungen klicke möchte ich gerne direkt in den Bereich springen, die Navigation sollte stehen bleiben, so wie in diesem Beispiel https://megagym.oceanwp.org/ auf "Our Process" klicken.

    Die Navigation sollte also fixiert sein. Wenn du den Sprung animieren möchtest, geht auch das mittels Javascript.

    Und zum Abschluss im Bereich Blog würde ich gerne so eine Darstellung https://gym.oceanwp.org/ (OUR LATEST NEWS) haben.

    Dann mach das doch.

    Fragen über Fragen und vor allem wie fange ich von den Elementen auf der Seite an? Ich würde die Seite gerne modern aufbauen. Alte Browser sind für mich nicht so wichtig, sagen wir bis zum IE 11. Meine Idee war CSS Grid, da habe ich ein interessanten Beitrag http://t3n.de/magazin/css-grid-layout-vorgestellt-gestalten-rastern-242792/3/ gelesen. Kann ich dieses auf meine Bespiele anwenden?

    Ja, für dein gewünschtes Layout ist grid sehr gut geeignet. Anhaltspunkte dafür sind die Aufteilung in Spalten und deren identische Höhe.

    Vielleicht noch kurz etwas zu den einzelnen Unterseiten. Diese sollten später zweispaltig werden (70/30) wie hier zu sehen ist https://travel.oceanwp.org/category/adventure/

    Auch gut.

    Ach ja, @Christian Kruse: In zitierten nummerierten Listen fängt offenbar jeder Listeneintrag mit „1.“ an. Lässt sich dieses Verhalten ändern? In der Vorschau bleibt das auch so, wenn ich die Zahlen händisch verändere.

    MfG, at

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Frage zu einem Designaufbau und deren Umsetzung

      Christian Kruse Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      Hey,

      Ach ja, @Christian Kruse: In zitierten nummerierten Listen fängt offenbar jeder Listeneintrag mit „1.“ an. Lässt sich dieses Verhalten ändern? In der Vorschau bleibt das auch so, wenn ich die Zahlen händisch verändere.

      Nein. Das ist eine Markdown-Eigenschaft im allgemeinen und eine Eigenschaft des Parsers im speziellen.

      LG,
      CK

      --
      https://wwwtech.de/about
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

    2. Frage zu einem Designaufbau und deren Umsetzung

      Orlok
      +3 Informationen zu den Bewertungsregeln

      Hallo at

      In zitierten nummerierten Listen fängt offenbar jeder Listeneintrag mit „1.“ an. Lässt sich dieses Verhalten ändern? In der Vorschau bleibt das auch so, wenn ich die Zahlen händisch verändere.

      Wenn du die Liste komplett zitierst, dann nicht:

      1. eins
      2. zwei
      3. drei

      Wenn du die Liste teilst, dann schon:

      1. eins

      Zu 1.

      1. zwei

      Zu 2.

      1. drei

      Zu 3.

      Einfach die Zahlen verändern bringt nichts, da jedes mal eine neue Liste angefangen wird.

      Was du machen kannst, ist den Punkt mit einem Backslash zu escapen: 2\. zwei

      1. eins

      Zu 1.

      2. zwei

      Zu 2.

      3. drei

      Zu 3.

      In diesem Fall wird keine Liste sondern nur ein Absatz gerendert.

      Statt zu escapen kannst du den Startwert für die Liste auch über ein Attribut festlegen:

      1. eins
      2. zwei

      Zu 1 und 2.

      1. drei
      2. vier

      Zu 3 und 4.

      Das geht so:

      
> 1. eins
> 2. zwei

Zu 1 und 2.


> {:start="3"}
> 3. drei
> 4. vier

Zu 3 und 4.

      Viele Grüße,

      Orlok

      Beitrag melden
      +3
      Informationen zu den Bewertungsregeln

      1. Frage zu einem Designaufbau und deren Umsetzung

        at
        – Informationen zu den Bewertungsregeln

        Hallo Orlok,

        vielen Dank!

        MfG, at

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Frage zu einem Designaufbau und deren Umsetzung

        Matthias Apsel Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        Hallo Orlok,

        > {:start="3"}
> 3. drei
> 4. vier

        Kann auch nach der Liste eingefügt werden.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln