/    Sign up×
Community /Pin to ProfileBookmark

How to achieve some of these things

The website I’ve been looking at is this

https://travel-booking.stuff.co.nz/?gclid=EAIaIQobChMI_5GWnc6K-AIVgJFmAh2yDgn_EAAYASAAEgJ4IvD_BwE

I have 3 questions, I think I know the answer to two but want to put it out there

  • The blue box Hotels, Deal etc sits above the image. These appear to be inside a parent container organized vertically. Can I just set the parent position to relative, then the blue box to transform: -50% or is there a better way?

  • The carousel; there’s a million and one tutorials online. Is there a way to make one using DIV’s vs still images, so moving the DIV with image, headers and content. This allowing regular updates of the content vs having to republish a jpeg

  • As you scroll down the page you see placeholder images and images load when ‘in view’ .For a website with loads of graphics this must speed up load or paint time. How can this be achieved.
  • A few broad questions, but any help or links would be appreciated. I’ve googled these but I’m getting very broad content

    to post a comment
    CSSHTMLJavaScript

    5 Comments(s)

    Copy linkTweet thisAlerts:
    @SempervivumMay 31.2022 — Regarding the 3rd question: The keyword for this procedure is "lazy load(ing)". This seems to be a good resource to start with:

    https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/
    Copy linkTweet thisAlerts:
    @SempervivumMay 31.2022 — 2nd question: Many carousels or sliders support HTML content. You can use a div and place your content, images etc. inside. My favorite one is swiper:

    https://swiperjs.com
    Copy linkTweet thisAlerts:
    @SempervivumMay 31.2022 — 1st question: I guess you intend to move the complete blue box upwards. In this case you have to use `transform: translate` and it will not require to set the parent position to relative as it's different from absolute positioning. Note that, unlike width, top, left etc. the base for the percentage is the element itself, not it's parent.
    Copy linkTweet thisAlerts:
    @kiwisauthorJun 01.2022 — @Sempervivum#1644392

    I found the solution to my previous post but this is an issue.

    https://codepen.io/kodee/pen/YzeLwoP

    When the loop starts again I get about 1rem of padding or margin on the left of the image. Any clues?
    Copy linkTweet thisAlerts:
    @SempervivumJun 01.2022 — There are three dots at line 30 in your HTML, they are causing the empty space.
    ×

    Success!

    Help @kiwis spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 4.23,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...