Optimist Theme: Inhalte ausrichten

[neelix]

Hallo zusammen,

nachdem ich geschafft haben den zusätzlichen Bereich einzubinden (https://community.contao.org/de/show...nuell-ausgeben) schaffe ich es jetzt aber nicht ihn bündig zum bestehenden Menü auszurichten.

Mein Vorbild ist hier die Seite https://kks.garwers.com/

Was übersehe ich hier?

Danke.

[mlweb]

Link zur Seite mit dem Problem?

[neelix]

jup, wär ne Idee.

Ist mir auch eingefallen, als ich im Bett lag ;-)

http://dev.luetteraten.de/

[mlweb]

Ich würde die [id="socialbar"] .inside in dem Fall auch als Grid (eine Spalte, ohne padding-bottom sonst identisch wie den Headerbereich) anlegen und nicht als Flexbox.
Zusätzlich den Inhalt rechtsbündig mit justify-items (justify-content sollte bei Deinem Layout auch funktionieren) ausrichten.
Eventuell musst Du noch die Abstände um das Navigationselement anpassen, aber auf einem großen Bildschirm passte es mit diesen Anpassungen in den Entwicklertools so schon gut.

Ich hoffe das hilft Dir als Anregung.

[neelix]

Das hatte ich auch so vor und habe mir die Definition von Header kopiert, aber irgendwas fehlt da.

Ich bekomme den Inhalt nicht nach rechts.

// #socialbar
[id='socialbar'] {
  .inside {
//    padding-top: var(--base-spacing-unit);
//    padding-bottom: var(--base-spacing-unit);
    display: grid;
    grid-template-columns: auto auto;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    position: relative;

    @supports not (display: grid) {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }

  html {
    &.html--fixed & {
      pointer-events: none;
    }
  }
}

// #header
[id='header'] {
  .inside {
//    padding-top: var(--base-spacing-unit);
    padding-bottom: var(--base-spacing-unit);
    display: grid;
    grid-template-columns: auto auto;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    position: relative;

    @supports not (display: grid) {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }

  html {
    &.html--fixed & {
      pointer-events: none;
    }
  }
}

[mlweb]

Es fehlt noch wie oben geschrieben ein entsprechendes justify-items https://css-tricks.com/snippets/css/...-justify-items also justify-items: end;
Außerdem hatte ich geschrieben, dass Du nur eine Spalte nutzen sollst. Bei Dir sind es mit grid-template-columns: auto auto noch immer zwei Spalten und Dein Element wird in der ersten Spalte platziert.
Zusätzlich fehlt Dir noch der Teil, der die gesamte Breite einschränkt, das sind die Deklarationen die für den Header im Selektor [id="header"]>.inside zu finden sind.

[neelix]

Es fehlt noch wie oben geschrieben ein entsprechendes justify-items https://css-tricks.com/snippets/css/...-justify-items also justify-items: end;

Das habe ich noch nicht im SCSS stehen, aber mit den Dev-Tools reagiert es.

Außerdem hatte ich geschrieben, dass Du nur eine Spalte nutzen sollst. Bei Dir sind es mit grid-template-columns: auto auto noch immer zwei Spalten und Dein Element wird in der ersten Spalte platziert.

Ich habe nur noch nicht raus, wie ich das einspaltig bekomme.

Zusätzlich fehlt Dir noch der Teil, der die gesamte Breite einschränkt, das sind die Deklarationen die für den Header im Selektor [id="header"]>.inside zu finden sind.

Ja, die fehlen, ich habe aber noch nicht herausgefunden, woher die stammen.

[neelix]

So, jetzt passt es. Danke.

Die > . inside kommen direkt aus den Definitionen des euf_nutshell. Ich habe die jetzt einfach in meinen neuen Block übernommen.

Jetzt muss ich statt Text da nur noch ein paar Icons reinsetzen.

[mlweb]

Schau Dir doch mal an wie ein Grid definiert wird. Hier ein Link zu den Grid-Columns https://css-tricks.com/snippets/css/...-template-rows
Einspaltig bedeutet also z.B.
grid-template-columns: 1fr; oder grid-template-columns: 50px; oder wie in Deinem Fall grid-template-columns: auto;

Ja, die fehlen, ich habe aber noch nicht herausgefunden, woher die stammen.

Woher die stammen ist doch völlig egal. Du nimmst Dir den Code als Vorlage für Dein Element und schreibst das entsprechend angepasst in Dein custom-css.
Bei den Themes kann so etwas schon etwas versteckt sein. Bei E+F kann es z.B. auch aus der Nutshell kommen.

Edit: Du warst mit der Lösung schneller als ich schreiben konnte.

Wenn Du da mehrere Links hast, dann sind mehrere Spalten mit entsprechender Ausrichtung justify-columns: end; wahrscheinlich interessant.

[neelix]

Ja, mit 100% bzw. auto funktioniert es.

Ich bin weder der große Designer (zwei linke Hände) noch der (S)CSS Master vor dem Herrn. Da bin ich irgendwo bei CSS1-2 stehen geblieben.
Ich administriere dir (fast) jeden Server mit allen Schikanen. An Webdesign begebe ich mich nur, wenn es gar nicht anders geht.

Aber irgendwer muss dem Laden (= Förderverein) mal eine frische Webseite verpassen. (Schau bloß nicht auf www.)
Morgen habe ich den Vorstand zu Besuch um denen zu zeigen, wie eine modernere Webseite aussehen könnte. Ideen habe die alle viele.

[neelix]

Wenn Du da mehrere Links hast, dann sind mehrere Spalten mit entsprechender Ausrichtung justify-columns: end; wahrscheinlich interessant.

Da oben sollen nur die Links zu den (a)sozialen Medien hin. Ich bin mir noch nicht sicher, ob ich die wie jetzt als Beispiel über eine Custom-Nav mit Text und Icon per CSS davor oder über ein Custom-HTML nur mit den Icons baue. Mal schauen was besser gefällt.

[mlweb]

Offtopic:
Dann weiß ich ja jetzt an wen ich mich wenden kann, wenn ich Fragen zur Serveradministration habe bzw. zu bestimmten Einstellungen beim Hoster XY.

[neelix]

Offtopic:
Dann weiß ich ja jetzt an wen ich mich wenden kann, wenn ich Fragen zur Serveradministration habe bzw. zu bestimmten Einstellungen beim Hoster XY.

Klar, gerne. Nur bei diesen Hosting-Panels bin ich oft schon wieder raus. Ich kann dir sagen, ob und wie es technisch geht, aber ob die Hoster bzw. deren WebGUIs das dann auch umsetzen können...

[neelix]

Hm, jetzt muss noch herausfinden, wie ich ich die Einträge nebeneinander, statt untereinander bekomme. Mal schauen, wo sich diese Definitionen befinden.
Nachtrag: Und wo diese riesen Zeilenhöhe herkommen...

[mlweb]

Sind doch nebeneinander oder was genau meinst Du?

[neelix]

Ja, hab die Klasse gefunden. Nur mobil passt es mir noch. Da packt er die noch untereinander.

[Black Pirate]

du hast in Mobile Ansicht den flex "column" anstelle "row" drin

[neelix]

Mal schauen, wo der herkommt.
Aber ich vermute über nav--horizontal

[neelix]

Bingo, aber ich überschreibe das jetzt einfach gnadenlos. Egal, welches Media-Query.