Participant

Question

place roll-over buttons on top of an image but on the bottom

Forum|Forum|7 months ago
June 22, 2025
6 replies
301 views

I've made an container-fluid and placed an image in it (a little bit transparant) but I want to place a few (7) roll-over buttons over the image and they have to be placed a little bit more to the botton of the container-fluid. I thougt maybe I can make a container in that container-fluid an put an grid row in it but the collumns are to small(because the images I want to use are to big). So I've tryed to do it with tables but I can't get them down to the bottom of the image. Can someone give me a hint how I can fix it? I also want to make the tables transparant so I don't have the grids.

L

L e n a

Community Expert

Simply by adding :

flex-wrap: wrap;

to the .button-wrapper class declaration 😉

Nancy OShea

Community Expert

The elephant in the room:

How do you envision this working on mobile phones & tablets?

Nancy O'Shea— Product User & Community Expert

L

L e n a

Community Expert

I'm not sure I fully understand the layout you're aiming for, but it sounds like you're trying to place seven hoverable buttons near the bottom of an image inside a .container-fluid, and you're having trouble getting the positioning and sizing right.

Instead of using a <table> (which can quickly become limiting for layouts like this), you might find it easier to use CSS background images and flexbox to arrange your buttons. For example, you could place the image as a background-image on a parent container, and then use a flex container to align your buttons to the bottom.

Here's a simple HTML structure you could try:

<div class="image-container">
  <div class="button-wrapper">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
  </div>
</div>

And the CSS might look something like:

.image-container {
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
  height: 400px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.button-wrapper {
  display: flex;
  gap: 10px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.2); /* light transparent background if needed */
}

button {
  padding: 10px 15px;
  cursor: pointer;
}

This setup keeps your image clean, avoids using tables, and makes it easier to adjust alignment or spacing later. You can of course tweak dimensions, styling, and transparency to match your design. Let me know if you need help adjusting it to your exact layout!

BenPleysier

Community Expert

Somthing like this?

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
</head>

<body is="dmx-app" id="junk">
    <header>
        <img src="https://picsum.photos/id/29/2600/500.jpg" class="img-fluid position-relative">
        <nav class="navbar navbar-expand">
            <div class="container position-absolute bottom-0 start-50 translate-middle">
                <div class="navbar-nav w-100 justify-content-center">
                    <a class="btn btn-secondary me-2" href="#">Link 1</a>
                    <a class="btn btn-secondary me-2" href="#">Link 2</a>
                    <a class="btn btn-secondary me-2" href="#">Link 3</a>
                    <a class="btn btn-secondary me-2" href="#">Link 4</a>
                    <a class="btn btn-secondary me-2" href="#">Link 5</a>
                    <a class="btn btn-secondary me-2" href="#">Link 6</a>
                    <a class="btn btn-secondary" href="#">Link 7</a>
                </div>
            </div>
        </nav>
    </header>
    <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

Just to clarify terms, it's impossible for an element to be ON TOP and ON BOTTOM. It's either one or the other.

If you're attempting to overlap elements, use Option 2: CSS background-image with CSS margins & padding.

Nancy O'Shea— Product User & Community Expert

L

L e n a

Community Expert

-

Nancy OShea

Community Expert

No Tables. Tables are completely unnecessary for this task.

The simplest solutions are usually the correct ones. But without a URL to your online page, it's hard to guess what's going on.

Option 1: Place your foreground image into a <header> above the <nav> menus.

<div class="container-fluid">
<header>
Image here
</header>
<nav>
Menus here
</nav>
<!--end container--></div>

Option 2: Place image into the container's background with CSS.

https://www.w3schools.com/cssref/pr_background-image.php

Use CSS margins & padding to add space around elements.

https://www.w3schools.com/css/css_margin.asp

https://www.w3schools.com/css/css_padding.asp

Hope that helps.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded