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!
7
Replies
AdChoices