Place the menu within the image, positioned at the bottom

Question

Place the menu within the image, positioned at the bottom

Could someone help me with placing a menu at the bottom of an image using HTML, CSS and Bootstrap 4? I have limited CSS knowledge and need assistance.

Currently, my navbar is located below the image but not within it like this:

I am looking to achieve something like this where the menu is inside the bottom of the image:

This is the code I currently have:

<img src="car.png">
        <ul>
                <li>
                    <a> HOME</a>
                </li>

                <li>
                    <a href="#contact">NEWS</a>
                </li>
                <li>
                    <a href="#about">CONTACT</a>
                </li>
            </ul>

html css angularjs bootstrap-4

Answer 1

Answer №1

It seems like you're looking for a solution similar to this.

To achieve the desired layout, wrap your code in a single div and give it the CSS property position: relative. Then, apply the CSS properties position: absolute and bottom: 0 to your ul element.

I hope this suggestion helps:

* {
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}
.parent{
  position:relative;
}

ul {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: gray;
  color: white;
}

<div class="parent">
  <img src="http://1.bp.blogspot.com/-CGiYA8pN7HM/T_bKK0hOrpI/AAAAAAAACVQ/-ws96c-wkB8/s1600/audi-r8-v12-tdi-concept-2008-797153.jpg">
<ul>
  <li>
    <a> HOME</a>
  </li>

  <li>
    <a href="#contact">NEWS</a>
  </li>
  <li>
    <a href="#about">CONTACT</a>
  </li>
</ul>
</div>

Answer 2

It seems like you're looking for a solution similar to this.

To achieve the desired layout, wrap your code in a single div and give it the CSS property position: relative. Then, apply the CSS properties position: absolute and bottom: 0 to your ul element.

I hope this suggestion helps:

* {
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}
.parent{
  position:relative;
}

ul {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: gray;
  color: white;
}

<div class="parent">
  <img src="http://1.bp.blogspot.com/-CGiYA8pN7HM/T_bKK0hOrpI/AAAAAAAACVQ/-ws96c-wkB8/s1600/audi-r8-v12-tdi-concept-2008-797153.jpg">
<ul>
  <li>
    <a> HOME</a>
  </li>

  <li>
    <a href="#contact">NEWS</a>
  </li>
  <li>
    <a href="#about">CONTACT</a>
  </li>
</ul>
</div>

Place the menu within the image, positioned at the bottom

Answer №1

Similar questions

Enhancing the user experience of the dropdown component through improved

The addClass and removeClass functions in jQuery are functioning properly only on Firefox browser

Issue with loading background image in HTML/CSS is being caused by a Cross-Origin Read Blocking problem

Steps for generating a dropdown menu using API JSON information

What methods can be used to crop and style images in a similar manner using html and css?

What is the proper method for implementing a scrollable effect to the <v-bottom-sheet> element within the Vuetify framework?

cannot showcase the reply in a popup (modal)

Maintain checkbox selection even after leaving the page

Incorrect Arrow Direction of Bootstrap Popover on SVG Icon

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Perform a single click and a double click on an anchor element in the document

I am looking to manage the error handling service, and my next step is to intentionally insert a single error into my service and have it automated

The Endless Dilemma of AngularJS Scrolling

Generating replicated elements at varying positions

Ways to minimize excessive gap between two columns in Bootstrap

Determining the file size of an HTML and JavaScript webpage using JavaScript

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

Dynamically loading Jquery tabs in AngularJS can enhance user experience and

Issue with scope.$watch not triggering when model is updated

Steps to remove a row from a table in a ReactJS component