Ankündigung

Einklappen
Keine Ankündigung bisher.

Gleiche Höhe für Sidebar und Content-Divs , aber wie ?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Gleiche Höhe für Sidebar und Content-Divs , aber wie ?

    Sidebar und Content auf gleiche Höhe bringen

    Hallo,

    nachdem ich endlich Text UND Fotos in meinen Divs responsiv so unterbringen kann, dass sie nicht mehr beim Zusammenschieben des Browserfensters aus dem Rahmen geschoben werden (Danke für Eure Hilfe dabei), habe ich noch eine Frage:

    Bei der Mobile-Ansicht liegen Sidebar (mit wenigen Links) und unterteilte Content-container nebeneinander. Wegen viel Text dort wird dieser Container beim Zusammenschieben viel mehr vertikal auseinander gedrückt als die Sidebar. Ich bekomme das auch mit padding-bottom samt Höhenangabe in Prozent für die Sidebar nicht halbwegs angeglichen..Helfe mir mal wieder mit einer gemittelten festen Höhenangabe.
    Gibt es noch andere Möglichkeiten, die Höhen der beiden Elemente halbwegs anzugleichen ?

    Zur Zeit habe ich nur die Seite mit den Gitarrenarten in der Mobile-Ansicht mit Prozent-Höhenangaben durch, der Rest kommt später.

    www.gitarrenunterricht-neuss.de

    Bin für jeden Tipp dankbar,

    viele Grüsse Bernhard

    Edit:

    Auch nach längerer Suche im Web wurde ich leider nicht wirklich fündig. Es gibt wohl "Behelfs-Maßnahmen" die ich allerdings nicht verstanden habe. Außerdem wollte ich doch keine festen Höhenangaben....

    #sidebar_links { padding-bottom: 2000px; margin-bottom: -20000px; float: right; width: 25%; } #main_content { padding-bottom: 2000px; margin-bottom: -20000px; float: left; width: 75% } ...oder aber flex-box...
    Zuletzt geändert von Bernhard; 15.06.2019, 22:29. Grund: Diese Frage wurde wohl schon dutzende Male gestellt...

  • #2
    Hallo, gibt's da wirklich gar nix?
    Suche das Web rauf und runter..

    Viele Grüsse Bernhard


    Kommentar


    • #3
      du solltest die Seite auf Flexbox aumbauen. Dann sind solche Sachen wie float und padding-bottom:700px; nicht mehr nötig.
      Das Flexbox system erleichtert dir einiges

      Ich habe mal den mitleren Bereich Flexbox gegeben, da siehst du das es jetzt immer gleich hoch ist.
      https://codepen.io/basti1012/pen/EBvZPw
      An besten machst du die ganze Seite mit Flexbox das wäre dann optimal
      Zuletzt geändert von basti1012; 25.06.2019, 15:34.
      Mein (Basti1012) Forum und Chat

      Kommentar


      • #4
        Hallo Basti,

        danke für den Tipp und die Mühe, die Du Dir gemacht hast.

        Nun, ich habe nicht ohne Grund bislang einen Bogen um Flexbox gemacht, denn ich blicke da nicht durch - generell habe ich davon fast gar keinen Plan, deshalb verstehe ich auf die Schnelle auch Deinen Quelltext nicht. Bin aber grundsätzlich dafür, mir das drauf zu schaffen.
        B.t.W. Werden Flexbox-Layouts z.B. auch auf um 90 Grad gedrehten älteren Handys ("Tablet") richtig wiedergegeben ? Ich habe durchaus Interessenten aus diesem Kreis...

        Grundsätzlich brauche ich also mehr Zeit. Bin ja immer noch ein ziemlicher Anfänger. Mein Ziel war, die Site erstmal halbwegs fertig zu bekommen, und das war für mich schon einiges... Es scheint, so, als müsse ich für Flexbox nochmal ein größeres Zeitpaket einplanen.

        Im Moment komme ich mit den unterschiedlichen Höhen für den Tablet-Viewport erstmal klar, Desktop 1 und 2 haben ja feste Layouts. Schöner wäre natürlich anders, sonst hätte ich ja nicht gefragt....

        Viele Grüße
        Bernhard

        Kommentar


        • #5
          Hallo,

          grundsätzlich lässt sich eine Flexbox so einstellen, dass sie sich an jede Auflösung und Browser anpasst.
          Auch bei älteren Geräten und Browsern. Der IE11 macht manchmal Probleme, aber das lässt sich meist mitunter recht gut anpassen.

          Du kannst dir ja mal die Seite (ist eine Demoseite, die Links führen ins Leere) anschauen, das ist eine Flexbox.

          Liebe Grüße
          Andre
          Wir gestalten ihre Webseite

          CO-Webdesigen.de
          Mein Facbook

          Kommentar


          • #6
            Hallo, danke,

            ich zweifle nicht daran, dass Flexbox progressiv und
            nützlich ist.
            Ich kann die Site aber mit ihren 4 Viewports zur Zeit ganz sicher nicht auf Flexbox umstellen weil mir, wie gesagt, die dazu wohl nötige Zeit fehlt.
            Daher bin ich auf der Suche nach anderen Möglichkeiten, es sei denn, für meinen Zweck gibt es ganz einfache Wege. Bislang habe ich in dieser Richtung nur umfassende zeitintensive Grundlagen gefunden, und das kommt für mich nicht in Frage.

            Gruss Bernhard

            Kommentar


            • #7
              OK. Das du dir Flexbox mal in Zukunft ankucken willst und auch lernen und verstehen finde ich schon mal gut. Du siehst es ja das es mit Flexbox geht.
              Das man das nicht in 2-3 Stunden lernen tut ist mir auch klar und wenn du da gerade keine Zeit für hast kann ich auch verstehen.

              Auf der Schnelle eine Lösung ohne Flexbox wird schwer. Zumindest müsste man die Ordner anders anordnen. Man könnte auch ein Javascript schreiben der die höhe des Linken Containers anpassen tut.

              Habe mal deine Seite durch den Validator gejagt und muß sagen das es gar nicht so schlecht ist.
              Du hast ein Fehler drinne der dir da gleich mehrere Fehler anzeigt

              PHP-Code:
              <img class="format3" src="bilder/neusser_yachthafen.jpg" width="200" height="200" alt=Neuss am Yachthafen"   title="Neuss am Yachthafen"> 
              bei den alt fehlt ein "
              Dadurch werden Fehler angezeigt, die auch der Editor anzeigt.

              Und du hast da ja sachen auskommentiert mit <!-- bla blub -->
              Da bin ich gerade auch etwas verwirrt, doch es wird als Fehler angezeigt nurwarum habe ich noch nicht verstanden.

              Ich kucke nochmal ob ich nee möglichkeit ohne Flexbox finde.
              Wen du aber mal Zeit findest und dir Flexbox doch genauer ankucken willst , helfen wir dir gerne bei das umzusetzen.

              EDIT:
              Eine Frage noch , warum schreibst du nicht ä,ü,ö und nur &auml; , &uuml; &ouml; ? Das wird komischer weisse auch als Fehler angezeigt. Da du ja uft8 im Headbereich angegeben hast sollte das ä,ü,ö auch ausgeschrieben werden
              Zuletzt geändert von basti1012; 28.06.2019, 00:33.
              Mein (Basti1012) Forum und Chat

              Kommentar


              • #8
                Da bin ich gerade auch etwas verwirrt, doch es wird als Fehler angezeigt nurwarum habe ich noch nicht verstanden.
                Weil Bernhard drei statt der HTML-konformen zwei Bindestriche verwendet.

                Ich kucke nochmal ob ich nee möglichkeit ohne Flexbox finde.
                Eine einfachere Möglichkeit gibt es nicht. Mit CSS-Grid lassen sich Bernhards Wünsche auch lösen.

                Grade weil es keine Lösungen für solche Wünsche gab wurden die ja mit Flexbox und CSS-Grid offiziell eingeführt. Früher gab es sehr aufwändige Trick-Lösungen, zum Beispiel mit Hintergrundgrafiken, die aber nur pseudo-gleiche Höhen anzeigten und spätestens mit responsive Design versagten.

                Kommentar


                • #9
                  Okay, danke !

                  CSS-Grid ist auch nicht ohne, wenn ich das richtig in Erinnerung habe. Das funktioniert doch mit Aufteilungen in Rastersegmente....

                  Fehler sind korrigiert bis auf die Umlaut-Geschichte. Seltsam ! Ich hatte die gleichermaßen als UTF-8 deklarierte Vorgängerversion mit allen Unterseiten mit dem so genannten W3C-Einhorn validieren lassen.Da wurde mir bzgl. der Umlaute keine Fehler angezeigt.

                  Wenn`s mit der Sidebar denn erstmal nicht anders geht - schade !

                  Viele Grüße

                  Bernhard

                  Kommentar


                  • #10
                    Einzige für mich machbare Zwischenlösung: Farbverlauf am unteren Sidebarende auf die Hintergrundfarbe der Seite setzen - fade to Seitenfarbe. Padding-bottom sollte etwas kleiner sein als die minimalste Content-Höhe, die sich beim Auseinanderziehen des Browserfensters ergibt (height=auto). Den Wert in px kann man gut schätzen. Sonst verändert sich ungewollt der Abstand zum Footer.

                    Kommentar

                    homepage-forum.de - Hilfe für Webmaster! Statistiken

                    Einklappen

                    Themen: 56.507   Beiträge: 427.349   Mitglieder: 28.081   Aktive Mitglieder: 47
                    Willkommen an unser neuestes Mitglied, Coni1726.

                    Online-Benutzer

                    Einklappen

                    152 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 150.

                    Mit 2.057 Benutzern waren am 14.07.2019 um 11:45 die meisten Benutzer gleichzeitig online.

                    Die neuesten Themen

                    Einklappen

                    • zubami
                      Antwort auf Fliesen im Wohnzimmer
                      Hallo zusammen,

                      wir hatten zuvor Fliesen und haben nun renoviert und einen neuen Boden verlegt, da wir mit den Fliesen nicht besonders zufrieden waren. Das würde ich mir an eurer Stelle nochmal überlegen. Sie sind zwar einfach zu reinigen und sehen gut aus, aber sie sind doch besonders...
                      Heute, 06:40
                    • daniel5959
                      Antwort auf Gästebuch für meine Homepage
                      Hinweis

                      Sorry - mein Beitrag ist mal wieder im Spamfilter gelandet, deshalb einfach abwarten bis er vom Moderator oder Admin freigeschaltet wird und die Einzelheiten inkl. der Links zu sehen sind.

                      Vorab mal die 3 Möglichkeiten in Kurzform:

                      1) Bei ionos 1&1...
                      Heute, 03:27
                    • daniel5959
                      Antwort auf Gästebuch für meine Homepage
                      Hallo,

                      es gibt 3 Möglichkeiten:

                      1) Bei ionos 1&1 die Kommentarfunktion als Gästebuch nutzen - siehe



                      2) Kombination aus ionos 1&1 Element "Widget / HTML" mit eingefügtem Iframe-Code und einem externen Gästebuch

                      Infos...
                      Heute, 03:21
                    • Treml
                      Kommentar auf Gitarrenunterrichts-Seite im Grundzustand fertig
                      Heute, 00:42
                    • Treml
                      Antwort auf Gitarrenunterrichts-Seite im Grundzustand fertig
                      Also ich habe mich entgegen den anderen hier extrem darüber gefreut, einmal wieder eine richtig handgemachte Website zu sehen. Ich halte grundsätzlich nichts davon, Trends hinterherzulaufen, und vieles, was heute im Webdesign als schick gilt, ist viel zu oft nur darauf getrimmt, hübsch auszuschauen,...
                      Heute, 00:42

                    Die neuesten Beiträge

                    Einklappen

                    • zubami
                      Antwort auf Fliesen im Wohnzimmer
                      Hallo zusammen,

                      wir hatten zuvor Fliesen und haben nun renoviert und einen neuen Boden verlegt, da wir mit den Fliesen nicht besonders zufrieden waren. Das würde ich mir an eurer Stelle nochmal überlegen. Sie sind zwar einfach zu reinigen und sehen gut aus, aber sie sind doch besonders...
                      Heute, 06:40
                    • Coni1726
                      Gästebuch für meine Homepage
                      Hallo zusammen,
                      ich brauche dringend Hilfe. Ich habe bei 1&1 ionos eine Homepage angelegt über das Baukastenprinzip. Die bieten kein Gästebuch an. Ich habe im Internet gesucht aber da gibt es immer nur welche die auf anderen Homepages liegen. Wie bekomme ich eins nur auf meine Seite. habe...
                      15.10.2019, 22:22
                    • daniel5959
                      Antwort auf Gästebuch für meine Homepage
                      Hinweis

                      Sorry - mein Beitrag ist mal wieder im Spamfilter gelandet, deshalb einfach abwarten bis er vom Moderator oder Admin freigeschaltet wird und die Einzelheiten inkl. der Links zu sehen sind.

                      Vorab mal die 3 Möglichkeiten in Kurzform:

                      1) Bei ionos 1&1...
                      Heute, 03:27
                    • daniel5959
                      Antwort auf Gästebuch für meine Homepage
                      Hallo,

                      es gibt 3 Möglichkeiten:

                      1) Bei ionos 1&1 die Kommentarfunktion als Gästebuch nutzen - siehe



                      2) Kombination aus ionos 1&1 Element "Widget / HTML" mit eingefügtem Iframe-Code und einem externen Gästebuch

                      Infos...
                      Heute, 03:21
                    • Bernhard
                      Gitarrenunterrichts-Seite im Grundzustand fertig
                      Hallo,

                      ich traue und freue mich, meine erste teilresponsive Site vorzustellen.

                      www.gitarrenunterricht-neuss.de

                      Wichtig: ich kann erst seit einem Jahr halbwegs HTML 5 /CSS3 und habe mich nach kurzer Zeit an ein responsives Design herangewagt. Mit Eurer Hilfe bin...
                      08.10.2019, 11:44
                    • Treml
                      Antwort auf Gitarrenunterrichts-Seite im Grundzustand fertig
                      Also ich habe mich entgegen den anderen hier extrem darüber gefreut, einmal wieder eine richtig handgemachte Website zu sehen. Ich halte grundsätzlich nichts davon, Trends hinterherzulaufen, und vieles, was heute im Webdesign als schick gilt, ist viel zu oft nur darauf getrimmt, hübsch auszuschauen,...
                      Heute, 00:42
                    • matze19631
                      Page 1 oder zwei das ist hier die Frage
                      Guten Morgen Forum.
                      Hier möchte ich Euch um eure Meinung bitten. Mich würde Interessieren wie die Seite bei Euch ankommt. (Top oder Flop)
                      Das große Problem wo ich momentan habe ist, das ich gerade noch zwei unterschiedliche Navigationen habe.
                      Einmal mit Navigation auf der linken...
                      Gestern, 08:14
                    • Treml
                      Antwort auf Page 1 oder zwei das ist hier die Frage
                      In der aktuellen Form gibt es von meiner Seite einen glasklaren Favoriten: Navigation links statt oben.
                      Der Grund: Ich klicke nicht automatisch jeden Cookie-Banner weg, sondern lasse die Dinger manchmal einfach stehen. Ohne diesen Thread hier hätte ich nie herausgefunden, dass sich hinter dem...
                      Gestern, 22:50
                    • Coni1726
                      Antwort auf Gästebuch für meine Homepage
                      Ich möchte was sicheres....hat jemand eine Idee???? Bin am verzweifeln....ich weiß das ein Gästebuch alt ist. bei Ionos gibt es kein Gästebuch....
                      Gestern, 22:48
                    • Coni1726
                      Antwort auf Gästebuch für meine Homepage
                      Ja das mit Disqus habe ich auch überlegt...aber schöner finde ich ein Gästebuch....weiß auch nicht wie das mit Datenschutz da ist...hm
                      Gestern, 22:38
                    Lädt...
                    X