grid layout - letzte Spalte breiter als erwartet

  • Hallo,

    ich bin dabei, meine alte Webseite (mit immer aktuellen Inhalten) auf CSS für ein responsives Design umzustellen. Ich habe zwar früher schon CSS benutzt, aber ansonsten auch viel die alten HTML-Gestaltungselemente eingesetzt (Tabelle...).

    Ich habe ein Grid angelegt mit 6 gleich großen Spalten, von denen die linke und die rechte komplett mit Navigation, Links oder Werbung gefüllt sind. Die mittleren vier enthalten von oben nach unten den Header, eine "Unterüberschrift" und dann den eigentlichten Inhalt.

    Eigentlich erwarte ich, dass die linke und rechte Spalte gleich breit sind, aber regelmäßig bläht sich die rechte Spalte auf, so dass der mittlere Bereich zusammengedrückt wird. Die rechte Spalte ist knapp doppelt so breit wie die linke. Das leuchtet mir nicht ein und ich möchte es gerne ändern. Dazu habe ich schon einiges versucht, leider ohne Erfolg. Hier die css (soweit ich vermute, dass es relevant ist):


    Code:

  • ich weiß zwar nicht was die komischen verlinkungen soll , aber es wäre mal zum vorteil wenn du dein html dazu posten würdest oder Link zur Seite damit man sehen kann ob die auch da sind wo sie hingehöhren.?

  • ich weiß zwar nicht was die komischen verlinkungen soll , aber es wäre mal zum vorteil wenn du dein html dazu posten würdest oder Link zur Seite damit man sehen kann ob die auch da sind wo sie hingehöhren.?

    Welche Verlinkungen meinst Du? Da die Seite lokal getestet wird, kann ich keinen URL liefern. Der HTML-Code ist recht komplex, deswegen hier eine abgespeckte Form, die zumindest die Struktur deutlich macht. Wo "..." steht, ist natürlich noch mehr Inhalt :

  • Hast du beim HTML zu viel abgespeckt

    das sieht so aus

    * Link entfernt , weil existiert nicht mehr *

    Und passt mit deiner Erklärung aus post 1 irgendwie nicht zusammen.


    Soll es den bei Grid bleiben oder wäre dir Flex auch recht?

  • hast du beim html zu viel agespeckt

    das sieht so aus https://codepen.io/basti1012/pen/VVVmeJ und passt mit deiner erklärung aus post 1 irgendwie nicht zusammen.


    Soll es den bei Grid bleiben oder wäre dir flex auch recht ?

    Hm, eigentlich müsste das schon so passen. Ich wundere mich allerdings, wieso das <aside> grid-item in der Mitte unten auftaucht.

    Irgendwie scheint das Ding grid-template-area nicht richtig zu lesen - oder ich habe da einen Fehler drin. Habe aber noch nichts gefunden...


    Ich kann es natürlich auch mit Flex versuchen, nur hatte ich das anfangs getan und bin ziemlich schnell zu grid gewechselt, weil das mir vorschwebende Design da besser oder leichter umzusetzen schien.


    gewollt ist folgendes:


    Code
    Menü  Header  Rechts
    Menü  2. ÜS   Rechts
    Menü  Inhalt  Rechts
    Menü  Fuß     Rechts

    Wobei "Menü" und "Rechts" in der Höhe variable sein können. Die 2. Überschrift (= "2. ÜS") taucht nicht auf allen Seiten auf. Wenn nein, würde der Inhalt entsprechend nach oben rutschen. Und der Fuß soll dann zumindest von der Breite her zwischen "Menü" und "Rechts" liegen. Un d er sollte immer an den Inhalt anschließen. Zur Zeit klappt das lokal mit dem Apache und Firefox recht gut, nur dass eben "Rechts" immer zu breit ist. Alles andere funktioniert (und sieht anders aus als in dem codepen).

    Ich habe mal die source-codes komplett in den codepen gepackt, da sieht die Seite dann genau so aus wie bei mir lokal, immer noch mit der rechten Spalte zu breit, aber immerhin zeigt es, dass ich wohl doch zu viel unterschlagen habe... :(


    Lässt sich mein angedachtes Design denn mit flex auch ohne große Umwege umsetzen? Ich werde es mal probieren...

  • Also sollen es link, rechts und in der mitte 4 Container sein ,bzw 3 weil du die 2te ÜS mal ein und ausblendest.


    Machbar ist das auch mit Flex wenn ich dich richtig verstanden habe.

    Vorteil am Flex ist auch das es fast jeder Browseer kann. Bei Grid sind das nur ein paar Browser.


    Wie willst du den das 2te ÜS ein 8nd ausblennden? Mit Javascript , oder sollen die nur bei bestimmten Bildschirmgrößen oder Co eingeblendet werden ?

  • Im Ganzen sollen es 6 bzw. 5 Container sein, denn in der Mitte kommen maximal Header, 2. Überschrift, Inhalt und Footer zusammen, also 4, und minimal 3.

    Und nein, die 2. ÜS wollte ich per HTML tags ein bzw. ausblenden. D.h. wenn sie nicht vorhanden sind, wird sie auch nicht dargestellt. Die meisten Seiten brauchen diese zweite ÜS, ein kleiner Teil braucht sie nicht. Falls das Ausblenden nicht einfach durch Auslassung der Tags geht (also in meinem grid-layout wäre das "<ntag>" gewesen), bräuchte ich Hilfe, da ich nicht weiß, wie es sonst gehen sollte...

  • Ok, habe das jetzt hinbekommen. Interessant: Das gleiche Problem: die rechte Spalte ist breiter als die Linke, ungefähr doppelt so breit. Obwohl ich sogar versucht habe, mit "flex: 2;" für links und "flex: 1;" für rechts das Breitenverhältnis zugunsten der linken Spalte zu beeinflussen. Aber das hat überhaupt keine Auswirkung. Ich werde damit mal im codepen rumspielen. Mal sehen, ob ich rauskriege, was faul ist.

  • Ich habe heute Nacht mal mit Grid befasst und muss sagen das es doch komplizierter ist als Flex.

    Aber es gibt bessere möglichkeiten bestimmte Layout zu machen die Flex nicht so einfach kann.

    Das gleiche Problem: die rechte Spalte ist breiter als die Linke, ungefähr doppelt so breit.

    Das problem hatte ich auch öffters und konnte sie dann auch irgendwann beheben. Das zu erklären lasse ich lieber weil ich es auch noch nicht ganz verstanden habe.

    Falls du unbedingt bei Grid bleiben willst dann

    poste doch mal deinen jetzigen Code oder Link zur Seite. Vieleicht kann ich dir da jetzt besser helfen als gestern.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!