Aligning the navigation links vertically

I am working on aligning my navigation bar vertically, even when I scroll the page.

I found a method in another thread which suggests using the following CSS code for vertical alignment:

#container
{
    position: absolute;
    top: 50%;
    height: 400px;
    margin: -200px 0;
}

However, I do not want to hardcode the size of the navigation bar. Can anyone suggest a way to vertically align the navigation bar without specifying its size?

I have searched on Google but most of the results provide outdated methods or require hardcoding the size. If there is a resource that addresses this issue, please let me know!

Thank you.

htmlcssalignment

Answer №1

To enhance your website's navigation, consider using the table tag as shown below:

<table id="tblMain" width="80%">
<tr><td colspan="2">Your Header </td></tr>
<tr><td width="30%">
<table id="tblNavigation">
  <tr><td><a href="#">Navigation Link 1</a> </td></tr>
  <tr><td><a href="#">Navigation Link 2 </a></td></tr>
  <tr><td><a href="#">Navigation Link 3</a> </td></tr>
</table>
</td>
<td width="70%"><div id="mainDiv"></div>
</td>
<td colspan="2">Your footer </td>
</tr>
<table>

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

Update the CSS styles using properties specified within an object

Is it possible to dynamically apply CSS styles stored in a JavaScript object to elements? For instance, can we change the width and background of a basic <div> element: <div id="box"></div> <button id="btn">click me</button> ...

javascripthtmlcss

What is the reason that preventDefault fails but return false succeeds in stopping the default behavior

I'm having trouble with my preventDefault code not working as expected. While using return false seems to work fine, I've heard that it's not the best practice. Any ideas why this might be happening? if ($('.signup').length == 0) ...

javascripthtmlajaxjquery

Handling an HTTP Get request by utilizing Server-Sent Events (SSE)

Exploring the possibilities of HTML5 and node.js has led me to test out Server Sent Events successfully using this example. My experiment then involved responding to a button press with an SSE. Upon clicking the "Increment" button, I extracted a number fr ...

htmlnode.jsserver-sent-events

Tips for avoiding re-rendering during onclick event handling

let content=useRef(); let toHide=useRef(); useEffect(()=>{ content.current=document.querySelectorAll('.content'); toHide.current=document.querySelectorAll('.hide'); toHide.current?.[0].addEventListener("cli ...

htmlreactjs

What is the best way to add an active class to a clicked menu item that already has a class

I have menu items on the master page, and if users click on that menu item, I want to show it as active. My goal is to append "Active" to the existing class to indicate that it is active. _Layout.cshtml: <div class="menu-items-navigation"> <di ...

c#cssasp.netasp.net-mvc

Using CSS to create a transition effect for fading in and out background images

I created a website with a captivating full-page background image (img/bg_start.jpg): If you hover your mouse over the central animal on the page, the current image (img/bg_start.jpg) will fade out and be replaced with another picture (img/bg_start2.jpg) ...

javascriptjquerycss

Is there a way to insert text onto an Isotope image?

I recently created a portfolio using Isotope and Jquery, but I am struggling to add descriptive text to my images without disrupting the layout of the portfolio. I have experimented with various options such as using position:relative for the images and p ...

jquerycssblogs

Attempting to showcase extensive content based on the selection made in a drop-down menu

As a newcomer to anything beyond basic HTML, I am seeking guidance and assistance (preferably explained at a beginner level) for the following issue. If I have overlooked any crucial rules or concepts in my query, I apologize. I aim to have each selection ...

javascriptphphtml

Retrieving Dynamic data from an HTML form and saving it in PHP variables

Currently, I am in the process of taking an online aptitude test where 2 random questions are selected from a database and displayed on the webpage for answering. The issue I'm facing is that the values are not being stored correctly in the database. ...

phphtmlmysqlsqldatabase

Retrieve all items on the webpage using the pattern "_ followed by 10 random characters" through JavaScript

On my webpage, there is a table containing table rows in the following format: <tr id="_C15DKNWCSV">text</tr> I am attempting to scan the webpage and extract all table rows that have an id in the format: id="_(10 RANDOM CHARACTERS)" I want ...

javascripthtmlarraysobjectjquery-selectors

Is it possible to utilize viewport height as a trigger for classes in Gatsby?

Unique Case Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with ...

javascriptcssreactjsgatsbytailwind-css

Navigate post Ajax call

When I make an unauthenticated GET request using AJAX, my server is supposed to redirect my application. However, when I receive the redirect (a 303 with /login.html as the location), the response tab in the Firebug console shows me the full HTML of the lo ...

javascripthtmlajaxhttp-redirectget

Incorporating an image within a table while maintaining 100% height: A step-by-step guide

I'm struggling to make the image fit 100% to the height of a CSS-created table. The table and image seem to be ignoring the dimensions of the parent element, as shown below. Since everything needs to be dynamic, I am working with percentages. .img ...

htmlcssimagecss-tables

An issue arises in Django where a particular field fails to display the accurate value when presented in a template

models.py The Order model in models.py defines various fields such as user, customer, card_id, mobile, email, total_price, payment_method, status, take_method, points_earned, date, and address. It also includes preset choices for payment options, order sta ...

pythonhtmldjango

How to use image source and mouse hover effects in CSS3

Can we create a CSS3 class for the src, onmouseout, and onmousehover properties? <img src="http://www.example.com//images/pic.png" onmouseout="this.src = 'http://www.example.com/images/pic.png'" onmouseover="this.src = 'http://www.examp ...

htmlcssasp.net-mvc

Is it necessary for the paths in an HTML file to be full paths when utilizing Express.static in Node.js?

I have the following files: /public/index.html <!DOCTYPE html> <html> <head> <title>Planner</title> <script src="../codebase/library.js" charset="utf-8"></script> <link hre ...

htmlnode.jsexpress

The scrollbar is shifting the page's content towards the left

As a first-time user of Bootstrap, I have encountered an issue while building my website that I cannot seem to solve. Whenever I add large content that requires a scrollbar in the browser, the entire page shifts to the left. In simpler terms, when a scrol ...

htmlcss

What is the process of securing a directory with a password using Node.js and Express?

I am in the process of creating a basic web server using Node.js and Express. My aim is to host various static files, one of which includes a Unity WebGL game. In order for the game to function properly, numerous assets need to be loaded. I am interested ...

htmlnode.jsexpresswebstatic

Issue with CSS background color not extending to full screen in webkit browsers when using 960.gs grid system

When using 960.gs, I have created a login screen with a div for the login form that has a background image. This div is positioned below a header, which centers it in the browser window. In my CSS, I am setting the body color as follows: body { backgr ...

htmlcss960.gs

How can one generate an array containing all attributes found in the HTML of a website?

I have a project idea where I want to be able to input a hyperlink address and then get a list of attribute contents as the output. For instance, if I input a Netflix genre hyperlink for Adventure Movies, I'd like to receive a list with all the movie ...

javascripthtmljqueryjsonattributes