Beiträge von DrMartinus

    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.

    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...

    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...

    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 :

    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: