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
          CO-Webdesign bei Facebook

          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

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

                  Einklappen

                  Themen: 56.459   Beiträge: 428.481   Mitglieder: 27.876   Aktive Mitglieder: 59
                  Willkommen an unser neuestes Mitglied, OnlineCasino.

                  Online-Benutzer

                  Einklappen

                  734 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 732.

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

                  Die neuesten Themen

                  Einklappen

                  SimpleSite

                  Die neuesten Beiträge

                  Einklappen

                  Lädt...
                  X