CSS: Navigation links at the bottom of the page

I am looking to design a menu where all the menu items are aligned at the bottom, even if they span across multiple lines.

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
        height: 90px;
        width: 100px;
    }

    li a {
        display: block;
        color: yellow;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        position: relative;
        bottom: -40px;
    }

    li a:hover {
        background-color: #111;
    }
    <ul>
      <li><a href="default.asp">Home</a></li>
      <li><a href="news.asp">Newsletter & Extras</a></li>
      <li><a href="contact.asp">Contact</a></li>
      <li><a href="about.asp">About</a></li>
    </ul>

Currently, I have tried using bottom: -40px to align the texts on the bottom but it is not working as expected.

Is there a way to ensure that all the text in the menu stays aligned on an imaginary line at the bottom?

htmlcss

Answer №1

Using Flexbox for layout:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
  height: 90px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
li a {
  display: block;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  position: relative;
}
li a:hover {
  background-color: #111;
}
<ul>
  <li><a href="default.asp">Home</a>
  </li>
  <li><a href="news.asp">Newsletter & Extras</a>
  </li>
  <li><a href="contact.asp">Contact</a>
  </li>
  <li><a href="about.asp">About</a>
  </li>
</ul>

Answer №2

Alright, I've figured it out: for the solution to work, the li elements need to have a relative position, while the anchor tags inside them should have an absolute position:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    height: 90px;
    width: 100px;
    position: relative;
}

li a {
    display: block;
    color: yellow;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    position: absolute;
    bottom: 0px;
}

li a:hover {
    background-color: #111;
}

Answer №3

Here is the code snippet you can use:

 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
    display: flex;
    padding-top: 50px;
    flex-wrap: wrap;
}
li a {
    display: block;
    color: yellow;
    text-align: center;
    text-decoration: none;
}
li a:hover {
    background-color: grey;
}

Answer №4

To implement the desired layout, apply the following CSS to your list item:

 li {
        float: left;
        height: 90px;            
    }

All you need to do is delete the width property from this class definition.

Answer №5

Take a look, I made some changes to the CSS that may have fixed your issues

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width:100%;
    display: inline-block; 
    text-align: center;
}

li {
   display: inline-block; 

    width: 100px;
}

li a {
    display: block;
    color: yellow;
    text-align: center;
    text-decoration: none;
    position: relative;
    padding: 10px;
    top:5px;

}

li a:hover {
    background-color: #111;
}

https://fiddle.jshell.net/Rajkumarrana/12fsmyzg/

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

Retrieve SQL data and store it in a JavaScript variable

Need assistance with fetching data from SQL and storing it in a JavaScript variable. I have already connected PHPMyAdmin to my website. I am attempting to retrieve two variables (date) from my SQL table. JAVASCRIPT: var countdown_48 = new Date; countdow ...

javascriptphphtmlsqldatabase

How can I make angular material data table cells expand to the full width of content that is set to nowrap?

This example demonstrates how the mat-cells are styled with a specific width: .mat-cell { white-space: nowrap; min-width: 150rem; } If the width is not specified, the table will cut off the text due to the white-space property being set to nowrap. Is ...

htmlcssangularangular-material

Angular JS Profile Grid: Discover the power of Angular JS

I came across an interesting example that caught my attention: http://www.bootply.com/fzLrwL73pd This particular example utilizes the randomUser API to generate random user data and images. I would like to create something similar, but with manually ente ...

javascripthtmlarraysangularjstwitter-bootstrap-3

Centering divs using iPad media queries does not seem to work properly

While working on my website, I encountered an issue with displaying content properly on various mobile devices. I have implemented media queries for this purpose. Currently, on the main site, two divs (#wrap and #scrollbar) are positioned next to each oth ...

htmlcsscentermedia

Having trouble getting the timer function to execute upon page load in JavaScript

My goal is to have my basic timer function activate when the page loads. However, I'm encountering issues with it not working as intended. I suspect there may be an error in the if else loop, possibly here: setTimeout(function(tag, sec), 1000);. How c ...

javascripthtml

Avoid placing the label within a form-inline in Bootstrap to maintain proper formatting and alignment

I am working on a form where I have two fields inline within a form-inline div. I am looking to move the labels of these fields above them rather than next to them. How can I achieve this without affecting the layout of the fields? Here is a CodePen link ...

htmlcssbootstrap-4

Ways to conceal components of an external widget on my site

I'm attempting to add a chat widget to my website and I'm looking to hide specific elements within the widget. The chat function is provided by Tidio, but I believe this applies to most widgets. My main goal is to conceal a button that minimize ...

javascripthtml

Eliminating Unnecessary Stylesheets in Vite and Vue Website

When working on the Vite-Vue application, I noticed that the styles I implemented for both index.html and Vue components/views are showing up as crossed out in the browser. Additionally, many of the styles I added to the components/views are also being cro ...

cssvue.jsvuejs3vite

ChakraUI ForwardRef in React not applying variant to child component

Encountering an issue with the combination of forwardRef and Input from ChakraUI. Attempting to create a generic input component with a flushed variant, but facing difficulty as Chakra keeps resetting it back to default. ModalInput Component import { for ...

cssreactjsreact-propschakra-ui

What is the best way to conceal a set of columns and reveal them upon clicking a header column?

Currently working with Bootstrap 3 and successfully split the top into two columns. I am aiming to replicate the design shown in the sample image without relying on JavaScript or jQuery. Upon clicking "Quick Info", there should be a new set of columns reve ...

htmlcsstwitter-bootstrap

What causes the bootstrap grid system to deviate from the intended column sizes?

Here is the alignment I am aiming for with the Phone and Extension fields in the form: This is the code snippet I have written for the Phone and Extension row: <div class="row form-group"> <label class="control-label ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Creating 3D audio effects in HTML5

Let's dive into the challenge... Currently, I'm working on building a virtual environment with WebGL (THREE.js) where various objects produce distinct sounds. My goal is to create a surround sound experience based on the position of these object ...

htmlaudiowebglthree.js

Adjust the minimum height and width when resizing the window

Apologies in advance if this has already been addressed, but I have tried solutions from other sources without success. My Objective: I aim to set the minimum height and width of a div based on the current dimensions of the document. This should trigger ...

javascriptjqueryhtmlcss

Show data in a popup using jQuery DataTables and loading content asynchronously via Ajax

I am attempting to display a list in a popup based on an Ajax request. Prior to the Ajax call, the list is contained within the popup. However, after the Ajax request, the list remains on the page instead of inside the popup, and the old list still appears ...

javascriptjqueryhtmlajaxdatatables

Transitioning Dropdowns in Angular UI Bootstrap

Hello everyone, I am completely new to both Stack Overflow and AngularJS. I'm attempting to incorporate a fade-in animation into my dropdown (using UI Bootstrap's dropdown directive) without success. This issue is quite similar to the following ...

cssangularjsangular-ui-bootstrap

In Vue, when you want to display text after reaching a height of 50px, any additional text will automatically be replaced by five full

https://i.stack.imgur.com/mp0YJ.png >>>>>>>>>Explore Sandbox Example <div style="height:50px"> ...

htmlcssvue.js

Is it possible to utilize a CSV file to dictate which images should be utilized on my website as a guide?

I'm currently working on my website's gallery and have a collection of over 60 images. I'm exploring ways to streamline the process of displaying these images by having the website read their names from a CSV file instead of manually coding ...

javascriptphphtmldatabasecsv

The spreading of personalized events

I am expecting my CustomEvent to be propagated from the document to all the DOM elements. However, for some unknown reason, it is not happening. Can you point out what mistake I might be making? <html> <script> function onLoad() { var myDi ...

javascripthtmldomevent-propagationcustom-event

Can the start and stop times of the typed.js plugin be controlled for typing text?

The typed.js jQuery plugin creates the illusion of text being automatically typed on screen by a robot. Despite researching the resources related to this plugin, I have not come across any information on how to control the starting and stopping of the typi ...

javascriptjqueryhtmlcssautomation

Scrolling to the bottom of the page triggers jQuery to load additional content

Is your jQuery script not working properly when attempting to load more content upon reaching the bottom of the page? It seems to be functional on Safari/iPad and Android Mozilla browsers, but encountering issues on default Android and Chrome browsers. ...

javascriptandroidjquerycssscroll