Ändere deine Positionierung mal in right: 2vw; bottom: 2vh;
bei mir geht es damit.
Beiträge von Cipha
-
-
Stimmt die Ordnerstruktur denn online überein? Liegt der ordner "bilder" auf der gleichen Ebene wie die index.html? So gibst du es hier an.
- - - Aktualisiert - - -
Dein Content hängt übrigens mittig weil du div.wrapper margin: 0 auto (= zentriert in der breite) mitgibst.
-
Google mal nach Lazy Loading. Das ist generell für Bilder zu empfehlen, wenn du dir um Ladezeiten Gedanken machst.
-
Setze #menu auf display:none;
und blende es mittels jQuery wieder einCode$('.deinHamburgerIcon').click(function(){ $('#menu').slideToggle(); }) -
Finde auf die schnelle auch keinen Fehler. Ich würde die Seite einfach nochmal indizieren lassen.
-
Bitte sehr
Code
Alles anzeigen<style> .videoWrapper { position: relative; padding-bottom: 56.25%; /* Seitenverhältnis von 16:9 -> 9/16*100 =56,25% */ height: 0; overflow: hidden; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style> <div class="videoWrapper"> <iframe src="https://www.youtube.com/embed/TAbuqoDSngU" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> -
Hallo!
Erstmal danke für die bisherige Hilfe, die ich als stiller Mitleser hier schon bekommen habe
Nun habe ich aber ein Problem, dass eine Anmeldung erforderte, da ich keine passende Lösung finden konnte.Ich habe eine Sidebar, welche per CSS grid in 3 Sektionen unterteilt ist
Titel
Gallery
ButtonTitel und Button sollen jeweils 1fr in der Höhe einnehmen, Gallery soll den restlichen Platz ausfüllen.
Gleichzeitig soll Gallery aber nicht mitwachsen, wenn der Content größer wird, sondern eine Scrollleiste zeigen.
Hier ist mein Quellecode
Code
Alles anzeigen#designerWrapper #sidebar { grid-area: sb; display: grid; grid-gap: 18px; background: #fff; border-radius: 1px; padding: 12px; height: 100%; } #designerWrapper #sidebar .editBox { grid-template-columns: 1fr; grid-auto-rows: 1fr auto 1fr; grid-template-areas: "t" "f" "b"; max-height: 100%; } #designerWrapper #sidebar .editBox p.title { grid-area: t; font-size: 1.5rem; } #designerWrapper #sidebar .editBox .ghostButton { margin: 0; padding: 9px 3px; } #designerWrapper #sidebar .editBox form { grid-area: f; } #designerWrapper #sidebar .editBox form .imgWrapper { max-height: 100%; overflow-y: scroll; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(30px, auto); grid-gap: 9px; padding-right: 9px; } #designerWrapper #sidebar .editBox form .imgWrapper img { margin: 0; border: 3px solid #fff; } #designerWrapper #sidebar .editBox form .imgWrapper img.active { border-color: #8bc34a; } #designerWrapper #sidebar .editBox .button { grid-area: b; } <div id="sidebar"> <div class="editBox"> <p class="title">Collage auswählen</p> <form> <div class="imgWrapper"> <img class="active" src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-1.jpg"}" lt="Test"> <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-2.jpg"}" alt="Test"> <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-4.jpg"}" alt="Test"> <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-5.jpg"}" alt="Test"> <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-6.jpg"}" alt="Test"> <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-7.jpg"}" alt="Test"> <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-8.jpg"}" alt="Test"> </div> </form> <a href="#" class="ghostButton maxWidth"> <span class="icon-plus-circle"> Fotos hochladen</span> </a> </div> </div>Vergebe ich .imgWrapper eine Pixelhöhe funktioniert es. Hätte es aber gerne dynamisch.
Vielleicht habt ihr ja eine Idee. Danke im Voraus!