Struggling to ensure buttons on my page respond and resize properly alongside the other elements

Despite making most of this page responsive, I'm having trouble getting the two buttons to scale appropriately. They are utilizing javascript for a mouseover effect, and I suspect that might be causing some issues. Ideally, I would like the images to resize along with the rest of the page when viewed on different screen resolutions.

http://74.117.156.152/~pr0digy/

This is the HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
        <title>US Legal Support - CapEx</title>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta name="viewport" content="width-device-width, initial-scale-1.0">

        <script type="text/javascript">
if (document.images) {
    new1 = new Image;
    new2 = new Image;
    existing1 = new Image;
    existing2 = new Image;
    new1.src = "images/new1.png";
    new2.src = "images/new2.png";
    existing1.src = "images/existing1.png";
    existing2.src = "images/existing2.png";
}
function swapImage(thisImage,newImage) {
    if (document.images) {
        document[thisImage].src = eval(newImage + ".src");
    }
}
</script>

</head>

<body class="body">

        <header class="mainHeader">
            <img src="images/uslegalbox.png" alt="usls box" >
        </header>

        <div class="textBox">

            <div class="text">
                    <h1>Capital</h1>
                    <h2>Expenditures</h2>
            </div>

            <div class="buttonsBox">
                <div class="newcapex">
                    <a href="#" onMouseOver="swapImage('new','new2')" onMouseOut="swapImage('new','new1')"><img src="images/new1.png" class="ri" name="new" alt="new capex"></a>
                </div>
                    <div class="capexstatus">
                        <a href="#" onMouseOver="swapImage('existing','existing2')" onMouseOut="swapImage('existing','existing1')"><img src="images/existing1.png" class="ri" name="existing" alt="check status" width="310px" height=$
                    </div>
            </div>

        </div>

</body>

And here's the CSS:

body {
        background: url('images/bg.jpg');
        background-size: 100%;
        background-repeat:no-repeat;
        color: #000305;
        font-size: 87.5%;
        font-family: Arial, 'Lucida Sans Unicode';
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 0;
        height: 100%;
}

.mainHeader {
    width: 30%
        height: auto;
        margin: 2% 0 0 -1%;
}

.mainHeader img {
        width: 35%;
        height: 100%;
}

.textBox {
    height: 275px;
        margin-top: 3%;
        background-image: url('images/buttonsbox.png');
        background-repeat: repeat-x;
}

.text {
        width: 40%;
        margin-left: 5%;
        float: left;
        margin-top: -1%;
}

.buttonsBox {
    width: 55%;
        float: right;
        margin-top: 50px;
}

.newcapex {
    float: left;
        border: 0;
        margin-top: 45px;
}

.capexstatus {
    margin-left: 50%;
        border: 0;
        margin-top: 45px;
}

.newcapex img {
        width: 100%;
}

/* Text Styles */

h1 {
        color: #ffffff;
        font-size: 5.0em;
        margin-top: 60px;
}

h2 {
        color: #ffffff;
        font-size: 5.0em;
        margin-top:-30px;
}

Answer №1

To start, the first step is to eliminate all absolute dimensions from the images.

<div class="buttonsBox">
    <div class="newcapex">              
        <a href="#" onmouseover="swapImage('new','new2')" onmouseout="swapImage('new','new1')">
            <img src="CapEx_arquivos/new1.png" class="ri" name="new" alt="new capex">
        </a>                
    </div>
    <div class="capexstatus">               
        <a href="#" onmouseover="swapImage('existing','existing2')" onmouseout="swapImage('existing','existing1')">
            <img src="CapEx_arquivos/existing1.png" class="ri" name="existing" alt="check status">
        </a>
    </div>
</div>

Next, apply a float property to the capex status and set a width of 40% for both containers.

.newcapex {
    float: left;
    border: 0;
    margin-top: 45px;
    width: 40%;
}

.capexstatus {
    float: right;
    border: o;
    margin-top: 45px;
    margin-right: 20px;
    width: 40%;
}

Lastly, ensure that the second image also has a width of 100%.

.newcapex img, .capexstatus img {
    width: 100%;
}

Answer №2

It appears that the .newcapex button is resizing correctly in Firefox.

To test if the corresponding button on the right also resizes, you can add this rule to your CSS: .capexstatus img { width:100%; }

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

What is the best way to include interactive text on an image?

Just starting to learn html and could use some quick guidance. I have this image here: I would like to place clickable text on the image that links to different pages when clicked, similar to this example: How can I add clickable text over an image and c ...

Tips for defining boundaries for position absolute elements using JavaScript

Fiddle. I am in the process of developing a chat/mail application with a resizable menu similar to the Google Hangouts desktop app. When resizing the brown content pane at a normal speed, you can observe that the boundaries are functioning as intended. My ...

Rectangles on canvas, each with identical dimensions, appear in varying sizes when positioned at different locations

In my canvas, I have created two rectangles using the rect element. Both rectangles are supposed to be 40 units wide and 20 units tall. The first rectangle starts at coordinates 0,0 for its top-left corner, while the second one begins at 60,40. Interesti ...

Placing an order and obtaining the associated reservation_id through the use of SQL, PHP, and an html5 form

I have multiple forms with distinct purposes: The first form collects information such as the reservation date, customer details, and the table assigned for that specific date. In the second form, I capture data to place an order. This includes entering ...

"Defining a CSS class specifically for styling the span element nested within an

The HTML structure I am working with is as follows: <p> <a href="#"> <span class = "class-for-span"> SOME TEXT HERE </span> </a> </p> Along with the following CSS: p a{ color: grey; text-decora ...

Activate night mode in ElementPlus using CDN

Is there a way to set the theme to dark in ElementUI + Vue when using CDNs instead of npm? <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> ...

Position the current div in the center of a bootstrap progress bar for mobile devices

I'm facing an issue with the bootstrap progress bar on my website, especially on mobile devices where it goes off the screen. I want the current page marker on the progress bar to be centered on the screen while allowing the bar to extend beyond the s ...

Triggering a jQuery event when a CSS property is altered

My current approach involves utilizing the .animate method to shift a div 100px to the right in just 1 second. Essentially, this means moving by 1px every 10ms. I am now exploring whether there exists an event that could be triggered after each individual ...

The inner div appears to have content but is actually measured as 0x0 in size

Despite having content, my main div doesn't have a height or width. I am trying to make the main div fill 100% of the space between the header and footer so that the background image for main is displayed across the entire page excluding the header an ...

Implementing Materialize CSS functionality for deleting chips

I've been attempting to extract the tag of a deleted chip from the div within the Materialize chips class, but I'm hitting roadblocks. My failed attempts so far: $('.chips').on('chip.delete', function(e, chip){ console.lo ...

Turn on and off scrolling of DIV content when hovering over it

How can I create a div that automatically scrolls to the bottom on hover? I tried implementing the code below, but it doesn't work as expected. It jumps to the bottom of the div's height on first hover and transitions smoothly on second hover. . ...

Shifting the entire page from left to right and back again

I am in search for a template that moves the page from left to right. If anyone can guide me on how to create this effect or provide a JavaScript example, I would greatly appreciate it. ...

button to dim the image collection

On the top right corner of my image gallery, there's a button that, when clicked, creates an overlay darkening the image. I'm trying to figure out how to toggle this effect on and off with a click. Any suggestions on how I can achieve this? Here ...

invoking a function by utilizing nested controllers

Struggling with nested controllers, the main goal of this code is to link data extracted from a .json file to another function or file. .html file: <div ng-app="myApp" ng-controller="GetCtrl" > <li ng-controller="ChannelCtrl" ng-repeat="x in ...

What is the best way to ensure that my drop-down menu items match the size of the parent nav bar?

I'm having trouble creating a dropdown menu using only CSS. Specifically, I am struggling to ensure that the dropdown menu is the same size (width and height) as its parent element. Here is a link to a working example: HERE This is the snippet of HT ...

Determine the width of invisible images using JavaScript/jQuery

Please take a look at the jsFiddle Every time I run it, I am trying to retrieve the width of the images, but the values I get are as follows (check in the JS console) 400 0 575 533 0 ... Some values are zero, and I can't figure out why. It seem ...

Concealing JW Player Video Link within Source Code

<div id="movie">...</div> <script> player("film").customize({ width:800, height:400, playlist: [{ file: "https://movielink.mp4", image: "https://moviepic.jpg", tracks: [{ file: "http://movi ...

Pass the code from the webpage to the PHP script

On my website, I have implemented a feature using JavaScript that dynamically changes the page content. Now, I am looking for a way to send this updated content to a PHP script. How can I achieve this functionality? ...

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

The height of the div element is causing issues for the adjacent item in the row

I am facing a styling issue where the height of my avatar image is affecting other inline items located next to it. The images below demonstrate this problem. https://i.sstatic.net/bovge.png https://i.sstatic.net/EsF2R.png As you can see, when I increas ...