Problem mit seitlicher Buttonleiste im responsive Design

[Zeppelin]

Hallo zusammen,

ich mach grade für nen Studikurs eine Seite und habe ein Problem mit einer seitlichen Leiste, die ich nutzen möchte um Social Media Buttons draufzupacken. Damit das ganze auf verschiedenen Auflösungen gut aussieht versuche ich das ganze mit "vh" und "vw" als Größenangaben zu lösen.

Wenn ich aber jetzt folgendes machen:

       #socialfloat { 

           background-color: #000000;
           position: fixed; 
           color: #ffffff;
           padding-left: -1vw;
           padding-top: -1vh;
           border-bottom-right-radius: 1em;
           border-top-right-radius: 1em;
           top: 40vh; 
           left: 0vw; 
           width: 4vw; 
           height: 20vh;}
        
        #socialfloat ul {
            margin-left: -1.8vw;
        }
        
        #socialfloat ul li {
           list-style-type: none;
           padding: 0.8vh;
            vertical-align: middle;
           text-align: left;
           text-decoration: none;
        }
        
        #facebook {
            width: 2vw;
            height: 4vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(img/facebook.png)
        }
            #twitter {
            width: 2vw;
            height: 4vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(img/twitter.png)
        }
            #insta {
            width: 2vw;
            height: 4vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(img/insta.png)
        }
        

bzw.

  <div id="socialfloat">
    <ul>
    <li><a href="https://"><div id="facebook"></div></a></li>
        <li><a href="https://"><div id="insta"></div></a></li>
        <li><a href="https://"><div id="twitter"></div></a></li>
    </ul>
    
    </div>

Dann habe ich das Problem, dass im Objekt ein fixierter oberer und linker Rand für die Buttons sind, und sich die Buttons daran orientieren, also beim zusammenziehen des Fensters die Buttons nach rechts wandern, das Objekt aber wie gewollt nach links hin kleiner wird.

Jemand dazu eine Idee? Und sorry schonmal im Voraus, ich hab seit ca. 16 Jahren keinen Code mehr geschrieben 😂

[Matthias Apsel]

Hallo Zeppelin,

Du könntest den Code bei uns im Wiki (z.B. https://wiki.selfhtml.org/wiki/HTML) abschreiben. Gemeint ist das div mit der ID dokuwiki__pagetools. Du könntest dir aber auch ein Dokuwiki suchen, vielleicht wurde das inzwischen weiterentwickelt.

Bis demnächst
Matthias

[Rolf B]

Hallo Zeppelin,

die Rechtsverschiebung liegt am margin-left: -1.8vw; für das ul Element. Je schmaler der Viewport, desto kleiner der Margin, und dadurch schiebt sich alles nach rechts. Dieser Margin ist eh ein Irrtum - ein ul hat padding und das musst Du überschreiben, dann brauchst Du keinen negativen Margin.

Rolf

[Zeppelin]

Ah, mega, das hilft schonmal extrem.

Jetzt ist aktueller Stand:

       #socialfloat { 

           background-color: #000000;
           position: fixed; 
           color: #ffffff;
           border-bottom-right-radius: 0.8vw;
           border-top-right-radius: 0.8vw;
           top: 40vh; 
           left: 0vw; 
           width: 4vw; 
           height: 20vh;
        }
        
        #socialfloat ul {
            padding-top: 0;
            padding-left: 0.3vw;
            padding-bottom: 0;
            padding-right: 0;
        }
        
        #socialfloat ul li {
           list-style-type: none;
           padding: 0.8vh;
           text-align: left;
           text-decoration: none;
        }
        
        #facebook {
            vertical-align: middle;
            width: 2vw;
            height: 4vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(img/facebook.png)
        }
            #twitter {
            vertical-align: middle;
            width: 2vw;
            height: 4vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(img/twitter.png)
        }
            #insta {
            vertical-align: middle;
            width: 2vw;
            height: 4vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(img/insta.png)
        }

  <div id="socialfloat">
    <ul>
    <li><a href="https://"><div id="facebook"></div></a></li>
        <li><a href="https://"><div id="insta"></div></a></li>
        <li><a href="https://"><div id="twitter"></div></a></li>
    </ul>
    
    </div>

Jetzt habe ich noch das Problem, dass die Buttons vertikal nicht zentral bleiben. Bei Fullscreen sehen sie gut aus bei mir, aber wenn ich die Größe wechsel, dann schiebt es die Buttons unten aus der Box raus.

Gibt's ne Lösung, dass die trotzdem immer vertikal zentral bleiben?

Schöne Grüße

[Rolf B]

Hallo Zeppelin,

Vorweg: wenn ich deinen Code in ein Fiddle kopiere fehlen die Images. Hast Du eine Testversion irgendwo online?

Zum aktuellen Problem: Nimm dem #socialfloat die eigene Breite und Höhe weg, dann passt er sich an die Icons an und es hängt nichts drüber hinaus.

Verschönerungsideen:

• Die Icongröße in width und height an der gleichen Viewportrichtung orientieren, entweder beides vh oder beides vw, dann sind sie definitiv quadratisch.
• Dem ul ein margin:0; padding: 0; geben und den li padding: 0.8vh;. Das macht den Rand gleichmäßig.
• Dem ul noch ein overflow:hidden verpassen, dann können die Icons nicht in Grenzfällen in die Abrundung hineingucken.
• Text in die Links setzen, für Leute die ihren Augen nicht nutzen können. Für "Normalleser" musst Du den natürlich gleich wieder verstecken. Siehe Beispiel unten.

Und du könntest dein CSS etwas aufräumen.

• vertical-align greift in deinem Kontext eh nicht, das richtet inline-Elemente untereinander aus. Deine Bilder sind Hintergrundgrafiken und die zentrierst Du mit background-position bereits. Also: vertical-align kann weg.
• Die meisten Eigenschaften deiner Bilder-DIV sind gleich, zieh sie in eine eigene Regel heraus. Nur das Bild ist individuell
• Auf das eingebettete div kannst Du verzichten; du kannst die id Attribute auch den Links geben und aus dem a Element im CSS mit display:block ein Block-Element machen. Dann verhält es sich wie ein div.
• Und, äh, ja, die Liste ist eigentlich hinreichend, ein Rahmendiv brauchst Du nicht - es sei denn, das div hat bei Dir noch weiteren Inhalt. Dann möchte es aber lieber ein aside Element sein.

Der folgende Markup kann reichen, und ich würde die id nicht socialfloat nennen sondern sociallinks, weil das Ding nicht floatet (sondern fixed ist) und weil es die Links enthält. Beachte meine Texte in den Links, die für einen Screenreader sichtbar sind, und die ich im CSS mit font-size:0 für den Normalleser verstecke (die min-width/min-height Angaben sind deshalb in rem statt em).

<ul id="sociallinks">
   <li><a href="https://" id="facebook">Facebook</a></li>
   <li><a href="https://" id="insta">Instagram</a></li>
   <li><a href="https://" id="twitter">Twitter</a></li>
</ul>

Im CSS sieht's dann so aus:

#sociallinks { 
   position: fixed;
   margin:0; padding: 0;
   color: #ffffff; background-color: #000000;
   border-bottom-right-radius: 0.8vw;
   border-top-right-radius: 0.8vw;
   overflow:hidden;
   top: 40vh; left: 0; 
}

/* Listenpunkte werden bei padding:0 im ul nicht angezeigt, aber sicher ist sicher */
#sociallinks li { list-style-type: none; }

#sociallinks a {
   display:block; 
   margin: 0.8vh; font-size: 0;
   width: 2vw; height: 2vw; min-width: 1.5rem; min-height: 1.5rem;
   background-repeat: no-repeat; background-position: center; background-size: contain;
}

#facebook { background-image: url(img/facebook.png); }
#twitter { background-image: url(img/twitter.png); }
#insta { background-image: url(img/insta.png); }

Rolf

[Zeppelin]

Ich sag ja, 15 Jahre kein Code 😉

Aber großen Dank dafür, das hilft generell viel weiter!

Es hat sich echt viel getan!