What is the best way to add a button to the center of an image?

I need help with positioning a search button on top of an image. Currently, the button is appearing below the image and outside its boundaries.

You can view the issue live at www.emeupci.com

Below is the snippet of the HTML code:

<div class="container-fluid headerimage">
  <div class="col-md-12">
    <img class="img-fluid" src="https://emeupci.com/static/users/img/map.png" alt="map" style="width: 100%;">
    <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn dropdown-toggle" 
      style=" border: 26px solid #f9f9f9;
      cursor: pointer;
      font-weight: bold; background-color: #447193;
      color: white; padding: 8px; border-radius: 0px;
      font-size: 16px;);">Search for a church</button>
      <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

To create a visually appealing map with an interactive button, consider setting your map as a background image in a parent div. This way, you can position your button on top of the image by utilizing the relative and absolute positioning properties. Here's how:

<div class="map-container">
    <div class="button-container">
        Your button content here
    </div>
</div>

.map-container {
    position: relative;
    background: url("Images/your-map.jpg") center no-repeat; 
    background-size: cover;
    width: 300px;
    height: 500px;
}

.button-container {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-color: #abcf66;
    bottom: 40px;
    width: 80px;
    height: 60px;
}

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

Choosing an item prior to a break in the text line

I designed a navigation bar with the following CSS structure nav { text-align: center; } nav > ul { list-style: none; padding: 0; margin: 8px auto; } nav > ul > li { display: inline- ...

htmlcss

How do I submit an array of objects in Laravel?

I am currently working with a dynamic table that allows users to add and delete rows. Each row contains input fields where users can enter data for an object. At the moment, I am manually assigning index numbers to the name attribute like this: <input ...

htmlarrayslaravelformslaravel-blade

Learn the method to display a particular post using its unique post ID

I need some help displaying two specific posts by utilizing their post IDs. I'm struggling with the code to retrieve and call these post IDs. Can someone assist me? /////////////////////////////// ////////////////////////////// <div class="foo ...

phphtmlwordpresspostcustom-post-type

Expand the display on mobile devices

What is the solution for adjusting a table on mobile view? I am aiming to achieve: https://i.sstatic.net/YkKAW.png However, it currently looks like this: https://i.sstatic.net/GW5mX.png Here are my code snippets: <script src="https://cdnjs. ...

csshtml-tablebootstrap-4

The headline box is displaying CSS code instead of the content. How can this issue be resolved?

Having an issue with a WordPress template that features a blue "headline" box that I need to change the color of to #333399. I tried inspecting the element, browsing through the code, and identified the code below as what needed modification: #headline, # ...

csswordpress

The alignment of the Bootstrap 4 row is off-center

My bootstrap structure includes a row with 4 columns, initially set up with 3 columns containing icons that aligned perfectly. Upon adding a fourth column, the new addition appears slightly lower on the page compared to the rest, resulting in misalignment. ...

htmltwitter-bootstrapcssbootstrap-4

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

htmlcss

Set default values for input fields based on selected options in php and mysql

I need help creating a form that will submit details when an option is selected from a database. The MySQL table has the following fields under USERS : [email], [age], [name]. I want to automatically fill in the values of other input fields when a user s ...

phpjqueryhtmlmysqldrop-down-menu

Ways to prevent hidden fields from being submitted in a form?

When submitting my HTML form, the hidden elements with display:none are also being posted. How can I prevent this from happening? ...

phphtmlajax

Enhancing Your Website with Animation Delay using Animate.css and ViewportChecker

I am attempting to apply a delay to various elements with animated classes on a specific webpage using animate.css version 3.5.1 by Daniel Eden and jquery-viewport-checker version 1.8.7 by Dirk Groenen. My initial approach was to utilize the setTimeout fu ...

jquerycssanimationviewport

Placing a forward slash only after the initial hyperlink within a list item

I'm trying to add a slash after the first link in my UL, but instead, it's adding a slash after every link. I've attempted various solutions without success. Here is my current view/html code: <?php foreach ($this->config->i ...

htmlcsspseudo-element

Tips for incorporating a background color into a specific section

Code: .headline { font: 150 50px/0.8 'Pacifico', Helvetica, sans-serif; color: #2b2b2b; text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1), 7px 7px 0px rgba(0, 0, 0, 0.05); text-align: center; } <link href='http://fonts.googleapis.com ...

htmlcss

What is the best way to link HTML transformations across several classes?

Is it possible to combine multiple transforms in a single element to create a unique end result? It seems that when applying multiple transform properties to an element, only one of them will be recognized. For example, trying to transform a div with bot ...

javascripthtmljquerycsstransform

Implementing dynamic background images in Angular 4 using div placeholders

Is there a way to include a placeholder or default image while waiting for item.imgSrc to load on the screen? <div class="style" *ngFor="let item of array; <div [style.backgroundImage]="url('+ item.imgSrc +')" class="image">< ...

htmlcssangular

Some sections of the HTML form are failing to load

I'm currently following a tutorial and applying the concepts to a Rails project I had previously started. Here's my main.js: 'use strict'; angular.module('outpostApp').config(function ($stateProvider) { $stateProvider.sta ...

javascripthtmlangularjs

Include "+5" in cases where additional elements cannot be accommodated

I am working on a project where I have a div called ItemsContainer that dynamically renders an array of items (Item) depending on the screen size. While mapping through the array, I want to check if there is enough space to display the current item. If no ...

htmlcssreactjstypescript

How to position div in the middle of Electron/VUE application's screen?

I am struggling to center a container div on the screen. The technology stack I am using includes Electron, VUE, HTML, and CSS. Here is the code snippet I have attempted: <template > <div class="login background" style="height:100%" > ...

htmlcsswebpackvue.jselectron

Having trouble aligning my CSS form correctly

The issue is with the alignment of the second row of textbox elements under the "Add Equipment" section on this page: While organizing the code in Dreamweaver, the elements line up correctly. However, when viewed in Google Chrome, they shift to the second ...

htmlcss

Encase the entire section following cloning with JQuery

Make sure to check out the jsfiddle demo linked below before proceeding: JSFIDDLE I need to transform the original structure as shown below: <div class="out"> <a>im here</a> <a>to save</a> <a>our</a> ...

javascriptjqueryhtmlcss

Pressing the shortcut key will activate the function specified in ng-click,

I have been searching for a solution to my problem, but I haven't found anything that really helps. What I am looking for is a shortcut within an ng-click directive where there is only an if condition without an else expression. Essentially, I just wa ...

javascripthtmlangularjsif-statementangularjs-ng-click