Beiträge von ny_unity

    ah okay, hab es mit margin-top -13rem gelöst, da kam das Hauptelement wieder hoch. Frage noch, wenn ich es am Handy ausgeblendet machen möchte aber man es mit klick einblenden kann, also mit so einem Pfeil, hat da jemand nen Tipp?

    Hallo zusammen,


    ich möchte auf der Website auf der linken Seite am Rand ein Bild (mit Linkweiterleitung) platzieren. Das Bild soll mitgescrollt werden, also sticky. An der richtigen Stelle ist es auch schon, aber das erste Hautpelement in der Mitte wird leider nach unten geschoben.


    Welche Einstellung kann ich da nutzen?



    Danke,


    Erik

    danke, habs angepasst und hochgeladen.... was aber jetzt irgendwie nicht mehr geht ist im safari die geschichte mit dem menü button... habe extra


    Code
    1. <script>
    2. document.querySelector('#mobile-nav-dropdown').addEventListener('click', () => {});
    3. </script>



    das ist mein nav

    ich habe jetzt:



    aber bei 768px, also wenn flex-direction column ist, sind die bilder wieder in voller größe, greift dann das js nicht?

    ja danke, das hab ich geschafft...


    kann ich im container selbst die rows als flex darstellen und dann mit justify oder muss ich komplett auf flex umstellen und alle als flexboxen darstellen?


    habe es aktuell so:



    und im CSS

    Code
    1. .referenz-bilder > .container > .row:nth-child(1),
    2. .referenz-bilder > .container > .row:nth-child(2) {
    3.   display: flex;
    4.   justify-content: space-between;
    5. }


    aber das klappt nicht

    Das kannst Du dann mit Flexlayout, für den Container display: flex; und justify-content: je nachdem, wie Du den freien Raum verteilen möchtest.

    https://css-tricks.com/snippet…exbox/#flexbox-properties


    CSS, das Du mit Javascript setzt, hat immer die höchste Priorität. Setze statt des Attributes height die Höhe unter style:

    document.getElementById("bild2").style.height = bild2_height + 'px';

    danke, das mit document.getElementById("bild2").style.height = bild2_height + 'px' klappt gut und ich muss für die einzelnen bilder das CSS nicht ändern.


    ich möchte noch einen eventlistener erstellen wenn das window-fesnter die größe ändert...


    Code
    1. function reportWindowSize() {
    2.   var bild2_height_resized = document.getElementById("bild1").height;
    3.   var bild4_height_resized = document.getElementById("bild3").height;
    4.   document.getElementById("bild2").style.height = bild2_height_resized + 'px'
    5.   document.getElementById("bild4").style.height = bild4_height_resized + 'px'
    6. }
    7. window.onresize = reportWindowSize;


    klappt gut.... jetzt probiere ich mich an der Ausrichtung.

    danke für deinen Vorschlag, aber das ist nicht ganz was ich suchte....


    ich habe jetzt per js:

    Code
    1. var bild2_height = document.getElementById("bild1").height;
    2. document.getElementById("bild2").height = bild2_height;

    gemacht, dann wird die Größe von Bild2 von Bild1 genommen. Das ist soweit okay, aber wie kann ich Bild 2 jetzt aber zentrieren? Es sieht halt jetzt so aus:

    pasted-from-clipboard.jpg


    das rechte bild, also das zweite sollte dann weiter nach rechts, damit es ordentlich aussieht.


    Kann ich das CSS mit dem JS überschreiben? Ich hatte voreingestellt im css, dass height auf auto steht, dann greift der js code nicht mehr...

    Sempervivum danke für deine Antwort, sorry das ich jetzt erst antworte.



    PS: Du schriebst:

    Unter "Dachklempnerei" finde ich jedoch 7 Bilder. Möchtest Du diese jetzt in zwei Spalten anordnen, so dass jeweils zwei nebeneinander stehen?

    es sind ja immer zwei nebeneinander, hab es ja mit Spalten gelöst. Es geht wie in Beitrag #2 darum, die Bilder immer gleich groß darzustellen. Du meinst, dass ich die Bilder in der Größe ändern soll. Okay, das kann ich machen, ich dachte nur das es über HTML / CSS oder JS machbar wäre, die Größe des größeren Bildes so anzupassen, dass es die Größe des benachbarten Bildes hat.