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

Tips for sending <p> data to a router function with HTML

I am currently working on a page where users are presented with a list of unverified accounts, each containing its own form element. Each form has a "submit" button that triggers a POST call to /verify. However, I am facing an issue where the data within t ...

javascripthtmlnode.jsexpresshandlebars.js

Dealing with JSON data in the format of `(Object object)` requires a specific approach

I originally encountered object object when attempting to display JSON API data in HTML. I then used keyvalue in *ngFor which allowed me to display the object, but I am wondering how I can access and display the entire JSON data? Here are the relevant cod ...

htmlangulartypescript

The width of the Div element is not following the specified dimensions, and it also has an unspecified margin

Check out my code snippet at: http://jsfiddle.net/8z4aw/ I'm trying to create a table-like layout using div elements, but for some reason the browser is not respecting the specified widths and seems to be adding an unwanted right margin. Where is thi ...

htmlcss

The issue with implementing simple getElementsByClassName JavaScript in the footer of a WordPress site persists

I am facing an issue with a 1-liner JavaScript code in the footer where getElementsByClassName function doesn't seem to work for tweaking style attributes. The text "Hello World" is displaying fine, so I suspect it might be a syntax error? Here' ...

javascripthtmlwordpress

"Creating visual art with processing in 2D using P5

Recently, I came across a webpage about rendering 2D objects in processing using JavaScript. Here is the link to the page: Upon trying out the example code provided on the page in a new P5 project, I noticed that the code structure looked like this: HTML ...

javascripthtmlprocessingp5.js

Tips for stopping links in iOS web applications from launching in a new Safari tab

I am in the process of developing an HTML application specifically for iPads. To enhance user experience, I have added the web app to the homescreen using the "favorite" option. However, I encountered an issue where every internal URL opens in a new Safari ...

javascriptjqueryhtmliossafari

Negative margin causes content to conceal itself

I'm facing an issue with using a negative margin for positioning a label. The label is not showing up as expected. Specifically, I need to place a search box on a blue background but when applying a negative margin, the search box does not appear prop ...

css

How can you style the modal image to center it? Which <div> should you target for styling?

I'm facing an issue with my modal image within a Bootstrap 4 carousel that uses JQuery. When I open the modal, it doesn't appear centered on the screen. Could you advise me on which parent div to style and how? Additionally, how can I ensure the ...

jqueryhtmlcsstwitter-bootstrapcarousel

Struggling to retrieve a JSON object from an Express and Node application, only receiving an empty result

Can anyone assist me? I'm having trouble with the res.json() function in my code. It seems to work after the first request, but not after the second. Right now, my application is quite simple - it scrapes user data from social media platforms like Twi ...

javascripthtmlnode.jshttpexpress

Unable to set width for td element in media query is not functioning as expected

Is there a way to adjust the width of td elements for smaller screens within an email template? I have tried setting the style as important, but it doesn't seem to be working. CSS .alignmentColumn { width: 25% !important; //for desktop @med ...

htmlcss

Tips for adjusting the animation position in Off-Canvas Menu Effects

I am currently utilizing the wave menu effect from OffCanvasMenuEffects. You can view this menu in action below: ... // CSS code snippets here <link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/f ...

javascriptjquerycsssvg

The align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (<span class="align-middle">middle</span>) in the center of a div. Here is the code snippet: <div class="col-4 shadow product-added"> <div class="row"> <div cla ...

htmlcsstwitter-bootstrap

Navigate between paper cards with Polymer's side scrolling feature

I recently started using Polymer after a long break from HTML and have been relying on stack-overflow and Google's polymer guide for guidance. Currently, I am working on a product catalogue project and I have already started coding the paper-cards for ...

htmlpolymerpolymer-starter-kit

How can you create a jQuery fade in effect for a single <li> element

I'm in the process of developing a task management app that generates a new li element every time a user adds an item. However, I am facing an issue where fadeIn() is activating for every li on the page whenever a new item is added. Does anyone have s ...

javascriptjqueryhtmlcss

unable to execute PHP code

I am attempting to execute a PHP file that will update a database. On Chrome, I am encountering this error: This is the code I have in my index.html file: <!DOCTYPE html> <html> <body> <input type="text" id="descriptioninput"> ...

javascripthtmlajax

How to circumvent an email forwarder that removes attributes from an image tag and still track email opens?

While it may seem like an impossible task, I decided to give it a try. If the service I am utilizing removes the attributes of an image tag =>, is there a workaround available? I attempted inserting random unicode characters to disrupt the parser, but unf ...

htmlemailtagsimagetracking

The Tumblr HTML code is not valid: There is a stray start tag for `html

Occasionally, I check my tumblog for validation in order to fix any errors. While most issues are easy to explain, there is one that has me stumped. What exactly does this mean? (please note: the outputted markup is out of my control) Error: Error: Stra ...

htmlvalidationtumblrw3c-validation

Subpar resolution of PNG images displayed in HTML canvas

My attempt to draw a PNG image onto the canvas is resulting in poor quality. I am using the drawImage method as shown below: src = folder+self.cur+".png"; imageObj.src = src; imageObj.onload = function() { context.clearRect(0, 0, cv, ch), context.drawImag ...

javascripthtmlcanvaspngdrawimage

Do I need to utilize a Form element?

<p>text 1<span>additional information 1</span><span>more details</span></p> <p>text 2</p> <a> hyperlink </a> <button>submit</button> <p>yet another paragraph</p> Greeting ...

html

Is there a way to configure my dropdown menu so that only one dropdown can be open at a time and it remains open when clicking on a <li> item?

I've been working on developing a dropdown menu that appears when clicked, rather than hovered over. I've managed to implement this functionality using JavaScript, and overall, it's working quite well. Currently, the menu shows or hides whe ...

javascriptjqueryhtmlcss