elements overlap when styled differently

Hello all, I'm in need of some assistance with arranging the items on my webpage. As a beginner, I require detailed explanations as some things may be obvious to you but not to me :) Specifically, I am looking to enhance my header design. My goal is to have the two images on the right neatly stacked on top of each other, with the "reserve" button positioned above the image. Additionally, I aim to center the middle image. Despite my attempts to make changes through the Chrome console, I have been unsuccessful in achieving the desired styling. I am struggling to identify the specific style that is causing the issue and would greatly appreciate any advice or guidance you can provide. If you could offer me some tips, I would be very grateful. Thank you.

You can access the link here:

HEADER

https://i.sstatic.net/LM4IP.png

<div class="site-branding">
    <div class="logo-main" style="text-align:left;" >
        <h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>          
            <a href="https://hotel-restaurant-la-borie.fr/" rel="home" class="site-logo"><img id="desktop-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
                <img id="retina-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
            </a>
    <div class="tel-header" >Tel. +33 (0 53 28 97 60</div>
                </div>              
                    <div class="form-reservation">
                        <div class="logo-logis" >
                            <a href="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4" target="_blank" rel="noopener noreferrer">
                                <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg" alt="lien de réservation" style="width: 400px !important;">
                            </a>
                        </div>
                        <div class="group-input" >  
                            <div class="logo-logis" >
                                <a href="https://www.logishotels.com/fr/hotel/-254254?partid=568&amp;layout=search&amp;ref=r" target="_blank" rel="noopener noreferrer">
                                    <img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/reservez-1.png" alt="lien de réservation" width="112" height="25"></a>
                                        <a href="https://www.logishotels.com/fr/hotel/hotel-la-borie-254254?PARTID=1012&amp;gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB" target="_blank">
                                            <img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"></a>
                            </div>  
                         </div>     
                    </div>  
                </div>

After adding transform: translateX(calc(100% + 10px)) to the "reservez" button, the result looks like this:

https://i.sstatic.net/uoBuO.png

In my attempt to align the images and links, I tried implementing display: block, but unfortunately, it did not achieve the desired outcome of having them stacked. Since the images are nested within a link, changing only the style of the image did not yield the desired effect.

htmlcsswordpressbootstrap-4

Answer №1

Apologies for any confusion earlier. Let me provide an example to clarify my point:

<div class="site-branding">
    <div class="logo-main" style="text-align:left;" >
        <h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>          
            <a href="https://hotel-restaurant-la-borie.fr/" rel="home" class="site-logo"><img id="desktop-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
                <img id="retina-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
            </a>
    <div class="tel-header" >Tel. +33 (0 53 28 97 60</div>
                </div>              
                    <div class="form-reservation">
                        <div class="logo-logis" >
                            <a href="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4" target="_blank" rel="noopener noreferrer">
                                <img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg" alt="lien de réservation" style="width: 400px !important;">
                            </a>
                        </div>
                        <div class="group-input" >  
                            <div class="logo-logis" style="position:relative;height:120px">
                                <a href="https://www.logishotels.com/fr/hotel/-254254?partid=568&amp;layout=search&amp;ref=r" target="_blank" rel="noopener noreferrer" style="position:absolute;bottom:0;left:0;z-index:1">
                                    <img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/reservez-1.png" alt="lien de réservation" width="112" height="25">
                                 </a>
                                 <a href="https://www.logishotels.com/fr/hotel/hotel-la-borie-254254?PARTID=1012&amp;gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB" target="_blank" style="position:absolute;top:0;left:0">
                                    <img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png" >
                                </a>
                            </div>  
                         </div>     
                    </div>  
                </div>

Answer №2

To easily shift the image, consider using CSS for translation.

img{
  transform: translateX(calc(100% + 10px))
}

This code moves the image to the right by 100% + 10px, as an example.

Alternatively, try grouping the two images together in one tag and then include the top reserve button:

bottom:0
z-index:1

With this, the image will be positioned at the bottom and in front.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generating a JavaScript variable linked to a Rails Active Record relationship

I'm trying to implement an active record association in the DOM, but I'm encountering some difficulties. Here is my editor class: .editing .row .col-sm-3 .col-sm-8 .text-left #font-20 .title-font . ...

javascriptjqueryhtmlruby-on-railsruby-on-rails-4

Stop executing a WordPress function in specific scenarios

I need help understanding how to stop a WordPress function that is already running. My goal is to prevent the deletion of a custom post type (in this case, a store) if there are associated posts linked to it. I have a query set up to check for any associat ...

phpwordpress

Add a sound file to the server and configure the images based on the server's response

I am a newcomer to JavaScript and AJAX, and I am facing an issue while trying to upload an audio file to the server and display the image from the server response. When attempting to pass the audio file from the input tag to an AJAX call, I encounter an il ...

javascriptjavahtmlajaxjakarta-ee

Two flexible-sized containers placed side by side, with an ellipsis displayed on the left container

Can you achieve a layout where two elements are inside a container and float side-by-side? The right element should adjust its size based on the content while the left element fills the remaining space in the container with an ellipsis to truncate overflow ...

htmlcssdynamicellipsis

Beginner experiencing website overflow problem

After completing a basic web development course, I decided to create my first homepage. While I am satisfied with how it looks on a PC or laptop, the layout gets messy on mobile devices. I tried using <meta name="viewport" content="width= ...

htmlcssoverflow

Update the output paragraph in an HTML dropdown list

Within my HTML code, there is a dropdown list followed by a paragraph. Inside the dropdown list, I have included options for various animals - Dog, Cat, Mouse, and Bird. When someone selects 'Cat' from the dropdown list and presses submit, I wan ...

html

What is the best way to transfer the text from an input field into a paragraph when a button is

For a school project, I am developing a website focused on time management. My goal is to create an input text box that, when the "add task" button is clicked, transfers the text inside it to a paragraph or p2 element and then moves the input field down. ...

javascripthtmlcssbuttoninput

Issue with function incorrectly computing values and returning NaN

My challenge is to develop a countdown timer, but it keeps returning NaN instead of counting down. I have multiple counters in place - one that counts down, another that counts up until the stop time specified by stoptime, and a third that kicks in after s ...

javascriptjqueryhtml

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

I've put together a demonstration that highlights the issue I'm facing. Upon visiting the contact section, you'll notice that all the slickJS slides are stacked vertically initially, but once you interact with them by clicking on the arrow o ...

javascripthtmlcssbootstrap-4slick.js

Trouble with jQuery dialog not triggering when Enter key is pressed

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <form action="" id="formID" name="formID" > <input type="text" id="filename" class="validate[required]"/> <script type="text/ja ...

javascriptjqueryhtml

What is causing my grayscale function to only impact part of the canvas?

As a beginner programmer, I have been experimenting with creating a grayscale function in JavaScript for practice. This is the code I have come up with: <canvas width='400' height='400'></canvas> <script> var can ...

javascripthtmlcanvas

Merge one page with another page

Hello everyone, I have a question about adding a new page to another existing one. For example, I want the "Contact Us" page for my company to be similar to the "Service" page on that bank's website (Example). I am trying to figure out how to create ...

phpwordpress

Validation needed for data list option

Here are all the details <form action="order.php" method="post" name="myForm" onsubmit="return(validate());"> <input type="text" list="From" name="From" autocomplete="off" placeholder="From Place"> <datalist id="From"> <option valu ...

javascripthtml

jQuery: Set default option selected or reset value

I'm attempting to change the value of the nearest select option dynamically. $(document).ready(function () { $('.limitation_points').hide(); $('.field .limitSelected').each(function () { $(this).change(function ( ...

javascriptjqueryhtmltwitter-bootstrap

best practices for creating space between flexbox items

My task involves presenting a continuous scroll list of scheduled jobs using Angular Material. Each item in the list needs to be divided into three columns utilizing flexbox. Despite my efforts, I am struggling with adding space between the columns within ...

cssangularflexboxangular-materialangular-cdk

What is the best way to make a linear gradient that spans the entire vertical space that is visible (or shifts to a solid color)?

I'm trying to figure out how to apply a linear gradient to the body element of my webpage. Here's the CSS code I've been using: body { background: linear-gradient(0deg, white, lightgray); } The issue I'm facing is that the gradien ...

csshtmllinear-gradients

What is the reason for index always being not equal to 0?

<script> var index = 0; $.getJSON("./data/data.json", function(json) { $.each(json, function(data) { var html = ""; if(index == 0) { console.log(index + " fir ...

javascriptjqueryhtml

"Function.click operates successfully when no arguments are given, but encounters issues when arguments are supplied

I had a function that was functioning correctly: $('#buttFurniture').click(onFilterCLick); However, when I decided to pass arguments to the function, it stopped working: $('#buttFurniture').click(onFilterCLick(arrOutput, arrFurniture ...

javascriptjqueryhtmlarrays

What is the best way to change the orientation of a scanner loop animation to

Currently, I have a CSS style featuring an animation that scans across a line in a loop. My goal is to apply this animation to a horizontal line, but I am struggling to figure out how to rotate the scanner for a horizontal loop. Below is my current code. A ...

htmlcss

What is the best way to upload an object in React using fetch and form-data?

Currently, I am facing an issue where I need to send a file to my express app as the backend. The problem lies in the fact that my body is being sent as type application/json, but I actually want to send it as form-data so that I can later upload this file ...

javascripthtmlnode.jsreactjsexpress