Formatting and designing text within anchor tags

I need assistance with properly displaying a list of links in a navigation structure. Here is the current HTML code I am using:

<nav>
  <ul>
    <li><a href="#"><span class="code">1</span><span class="name">One</span></a></li>
    <li><a href="#"><span class="code">2</span><span class="name">Two</span></a></li>
    <li><a href="#"><span class="code">3</span><span class="name">Three</span></a></li>
  </ul>
</nav>

Each link item should be presented as a square shape and aligned vertically. The content within each square should have a large font number (1) followed by its name (one) directly below it.

However, I am facing an issue where the name text is appearing too far down, almost going into the next anchor tag.

You can view my current setup here: http://jsfiddle.net/pmb6pqea/

If anyone has a solution to fix this problem, please let me know!

htmlcss

Answer №2

The issue lies in the 'line-height' setting for the li tag. It's important to note that line-height impacts all lines within the container, not the container height itself. This results in the content inside the two elements (code and name) being pushed down.

To address this, I removed the line-height property. Additionally, I eliminated the height:100% from the .code class to bring .name closer to it. I then applied padding-top to the .code class to center both elements.

nav {
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  position: fixed;
  width: 150px;
  color: #000000;
  border-right: solid 2px #000000;
  background-color: #FFFFFF;
}
nav ul,
nav ul li {
  margin: 0;
  padding: 0;
}
nav ul li {
  height: 150px;
  border-bottom: solid 2px #000000;
}
nav ul li a:link,
nav ul li a:hover,
nav ul li a:visited {
  display: block;
  color: #000000;
  text-decoration: none;
  width: 150px;
}
nav ul li a span.code {
  padding-top: 15px;
  display: inline-block;
  font-size: 72px;
  width: 100%;
  text-align: center;
}
nav ul li a span.name {
  display: inline-block;
  font-size: 20px;
  width: 100%;
  height: 40px;
  text-align: center;
}
<nav>
  <ul>
    <li><a href="#"><span class="code">1</span><span class="name">One</span></a>
    </li>
    <li><a href="#"><span class="code">2</span><span class="name">Two</span></a>
    </li>
    <li><a href="#"><span class="code">3</span><span class="name">Three</span></a>
    </li>
  </ul>
</nav>

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

How can I customize the color of the disabled state in a mat-slide-toggle?

I am trying to customize the disabled state color of a mat-slide-toggle. This is what my slide toggle currently looks like: https://i.sstatic.net/Lhz0U.png Here is the code I have been using: <div> <mat-slide-toggle>Slide me!</mat-slide ...

cssangularangular-material

Why is it that this particular line of code sometimes gives me an "undefined" result before returning an actual value?

Why does the method 'equal' always return with an "undefined" followed by a number? And when I try to parse it, it returns me a NaN. <!DOCTYPE> <html> <head> <script> var fnum = 0; var secondNum; var operation; functi ...

javascripthtml

Save a CSS class within the browser

One feature of my project is the ability to change the site theme with a simple click: <ul> <li class="=contact"><a href="#">Contact</a></li> <li class="facebook"><a href="#">Facebook</a></li> &l ...

javascriptjqueryhtmlcss

Tips for saving input data from an HTML page to a text file

How can I save the inputs from a simple form as a text file using HTML code? Here is an example of the HTML code: <div id="wrapper"> <div class="main-content"> <div class="header"> </div> ...

htmlcss

What are the best techniques for resizing a bar graph column to perfectly and proportionally match its container size?

Creating a basic bar chart library using vanilla JS and jQuery is what I'm working on. The code below is functional: var userData = { 'Black': 8, 'Latino': 6, 'Native': 4, 'Asian': 10, 'White': 12, & ...

javascripthtmlcssheightscale

What is the best way to initiate a function upon each page load?

(Apologies in advance for any English mistakes) Hello everyone, I am currently developing a simple Chrome extension to edit certain graphics and text fields on a website (Freshdesk) that cannot be modified directly on the site due to proprietary code. ...

javascriptjquerycssgoogle-chrome-extension

Ways to correct misaligned Bootstrap column grid

I'm currently working on a form using Bootstrap 4, but I'm facing an issue where the columns are not aligning properly, causing unwanted space and reducing the size of the input boxes. Despite trying different Bootstrap CSS CDN codes in addition ...

htmlcssbootstrap-4

Monitoring changes within the browser width with Angular 2 to automatically refresh the model

One of the challenges I faced in my Angular 2 application was implementing responsive design by adjusting styles based on browser window width. Below is a snippet of SCSS code showing how I achieved this: .content{ /*styles for narrow screens*/ @m ...

cssangulartypescriptsassrxjs

What steps can I take to ensure my CSS selector for the element is functioning properly?

Here is an example of some code: <html> <head> <style> .test{ background-color: red; p { background-color: yellow; } } </style> </head> <body> <div class="test"> ...

javascriptcssangular

Incorporating jQuery ajax requests into divs seamlessly to avoid any page disruptions

When loading numerous ajax calls on a page, the timing of each call varies, resulting in some content loading before the user reaches the top of the page. This may cause the user to miss viewing certain data unless they scroll back up to the top. Below is ...

javascriptjqueryhtmlajax

Jquery ripple effect does not function properly with background-attachment: fixed style

Is there a way to make the effect ripples () work with background-attachment: fixed? I'm trying to achieve this effect while keeping the background fixed in place. Any suggestions on how to make this work? background-attachment: fixed; ...

javascriptjquerycss

Tips for performing addition with JSON data

How can I add up the values of qty in + (sum of qty) +? [{"qty": "34"},{"qty": "5"}] $.ajax({ url: "localhost/sp/text.json", //json link dataType: 'json', success: function(data) { var items = []; $.each(data, func ...

jqueryhtmljson

Adjust the width of a jQuery Mobile control group

Having trouble resizing a control group using jQuery Mobile 1.3.0 Seeking the correct approach, currently attempting to resize the .ui-btn class with the following code: #test_1 .ui-btn { width: 200%; } The buttons are not resizing as expected; when ...

jquerycssjquery-mobilejquery-mobile-grid

Guide on extracting the string "152" from a textnode using Selenium

I'm having trouble getting the xpath for the number 152. The xpath I tried only extracts "Test" which comes after 152, but it excludes the actual number itself. How can I get this to work and extract the count of 152? My current xpath is: //div\ ...

htmlseleniumxpathcss-selectorstextnode

Is it possible to adjust the ul width to match its parent's width using CSS?

Whenever I type in a search, a list is displayed. The issue arises on small devices where the width of the list exceeds that of the search input or its parent container, which should not happen. On small devices, it should always look like this: Example L ...

cssbootstrap-4

I can't seem to figure out why I constantly struggle with adding a check mark to a checkbox using

Take a look at the code I've provided below : HTML : <input type="checkbox" name="xyz[1][]" id="sel_44" style="margin:2px;" value="12345" onclick="myClick(this)"> Javascript : <script> $('#sel_44').attr("checked", true); < ...

javascriptjqueryhtmlcheckbox

What is the reason behind the label value persistently showing up after the page is refreshed?

Why is the data that I deleted from the database still showing in the label? Even after running the delete function and reloading the page. The label should not have any value once the data is deleted. Here is my code: $(document).on('click', ...

jqueryhtml

Recording a message from an HTML input using NodeJS and socket.io

I am currently working on a project where I want to log user input from an input box to the NodeJS console. For example, if a user types "Hello world" into the input box and clicks "Send message to console", I want it to show up as "Hello world" in the con ...

javascripthtmlnode.jssocket.io

What is the best way to extract data from a text file in order to access the values in a dynamic HTML

After successfully generating a dynamic HTML table that takes input values using HTML and JavaScript functions, I am now looking to plot a graph with the values from the table. The challenge is to insert these values into the table from an external text fi ...

javascriptphphtmljsongetjson

Creating a CSS grid with uniform row heights, each adjusting independently

I'm currently working on creating a CSS grid for a product display. My goal is to have rows with equal heights, but each row should adjust its height based on the tallest column within that specific row. Right now I have all rows set to be the same he ...

csscss-grid