CSS stylized horizontal navigation bar completed

* {
border: 0px;
margin: 0px;
padding: 0px;
}
body {
background-color: #FFC;
}
#wrapper {
width:70%;
margin: 0% auto;
}

#header {
background-color: #C1D1FD;
padding: 3%;
}

#nav {

clear:both;
padding: auto;
position:inherit;
background-color:#F0D5AA;
width: auto;

}
#nav ul {
list-style-type:none;

}

#nav a {
display:block;
float:left;
padding:0%;
width:20%;
background-color:#F60;
border-bottom:1px #fff solid;

}

#content {
padding:7%;
margin-left: 20%;
background-color:#fff;

}

#footer {
background-color: #C1D1FD;
padding: 2%;
text-align:center;
}

HTML CODE:

<form id="form1" runat="server">
<div id="wrapper">
    <div id="header">
        <h1>Welcome to our Website</h1>

    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div> <!-- end nav-->
    </div> <!-- end header-->
    <div id="content">
        <h2>Page Heading</h2>
        <p>welcome</p>
        <p>welcome</p>
        <p>welcome</p>
    </div> <!-- end content--><br>
    <div id="footer">
        <p>Copyright 2010</p>
    </div> <!-- end footer-->
</div><!-- end wrapper-->
</form>

Hello, this is my unique CSS and HTML code. I am facing an issue where my navigation bar below the header appears jagged like stairs instead of straight. How can I make my navbar buttons align properly? Any help or advice would be greatly appreciated.

Answer №1

This website provides a clear demonstration:

For an example, follow this link:

Answer №2

To solve the staircase issue, I simply deleted a single line from the existing CSS script. By commenting out the position:inherit; command in the #nav section, the problem was completely resolved.

Answer №3

Here's a tip: try removing the line "display:block;" and change "#nav ul li" to "display:inline;"

This code is currently functional, but feel free to customize it to better suit your needs:

#nav {
background-color:#F0D5AA;
}
#nav ul {
list-style-type:none;
padding-top:3px;
padding-bottom:3px;
}
#nav ul li {
display:inline;
}
#nav a:link, a:visited {
text-align:center;
padding:3px;
}

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

Angular - developing a custom web element to enhance the project

Is there a way to convert a single module into a web component and integrate it within the same project? Specifically, I have 3 modules in my project and I am looking to transform only module1 into a web component and incorporate it seamlessly. Thank you! ...

Tips for styling an array of objects using mapping techniques

I have an array of messages and I am currently using the map() function. Each message in the array has two keys - one for the author and another for the message content. What I want to achieve is to change the styles of the div tag when displaying the last ...

Commence the 10-second Redirect Timer

I implemented a page that automatically redirects the user after 10 seconds using the following code snippet. <META HTTP-EQUIV="refresh" CONTENT="10;URL=login.php"> Now, I have this PHP code that I want to display dynamically counting down from 10 ...

What is the best approach for maximizing user experience: setting a maximum screen width or allowing for auto-width?

I manage a blog with responsive design that adjusts to the width of the screen. The majority of our blog posts consist of lengthy content, often reaching over 1000 words, along with user comments. My main concern is about the reading comfort and usability ...

What is the best way to send a parameter from jQuery to PHP?

I am trying to create a simple button that, when clicked, will pass a value from jQuery to a PHP file for execution. The idea is that when the button is clicked, it triggers an onclick event which sends the number "1" to the jQuery code. Then, jQuery shoul ...

Customizing Material UI Select for background and focus colors

I am looking to customize the appearance of the select component by changing the background color to "grey", as well as adjusting the label and border colors from blue to a different color when clicking on the select box. Can anyone assist me with this? B ...

Error with Bootstrap 4 tabs and JavaScript AJAX implementation

I have implemented Bootstrap 4 tabs to showcase content fetched through an AJAX call. However, I encountered an issue upon completion of the call. The error message displayed is: Uncaught TypeError: $(...).tab is not a function The tabs are initially hi ...

As the page is resized or zoomed in and out, the div elements start shifting in different directions

When I apply position:absolute to prevent the elements from moving when zooming in and out of the page, they all end up congregating in one place. Can anyone help me with this issue? None of the solutions I've found have worked so far. I'm develo ...

Converting date formats in HTML with the help of JavaScript

I am completely new to JavaScript and would greatly appreciate any assistance. Within my HTML code, I have dates extracted from a form that need to be displayed. <body> Test Date<br> <span id="test">{{TestDate|"dd/MM/yy"}}</span> ...

Even after setting [attr.disabled]="false" in Angular, the Textarea still remains disabled

I am currently utilizing ngModel for a textarea, and I would like to be able to enable and disable the textarea based on a certain condition. Even though I have bound it correctly and the value is changing to [attr.disabled]="false", the textarea remains d ...

Using Python, Scrapy, and Selenium to extract dynamically generated content from websites utilizing JavaScript

I am currently utilizing Python in combination with Selenium and Firefox to extract specific content from a website. The structure of the website's HTML is as follows: <html> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> ...

JavaScript condensed into a single table cell rather than occupying an entire webpage

Hey there, I have a simple question that I can't seem to find the answer to anywhere. I'm working on a JavaScript function that pulls data from my database and I want it to display in one cell of a table instead of outputting to the entire page. ...

Discovering the present width of an Angular element after it has been eliminated

Imagine you have a horizontal navigation bar coded as follows: HTML: <ul> <li ng-repeat="navItem in totalNavItems">{{name}}</li> </ul> CSS: ul, li { display: inline-block; } The data for the navigation items is fetched from thi ...

What is the best way to implement an AppBar that fades in and out when scrolling within a div?

I'm trying to implement a Scrollable AppBar that hides on scroll down and reappears when scrolling up. Check out this image for reference To achieve this functionality, I am following the guidelines provided by Material-UI documentation export defa ...

Deactivate an option within an angularjs multi-select menu

Currently, I am utilizing an angularjs multiselect box which is displayed below: https://i.stack.imgur.com/w6ffN.png Here is the html code snippet: <select multiple ng-options="Language.LangID as Language.LangName for Language in AllLanguages " ng-mo ...

Can we limit the number of items to just two per row in a grid with two columns?

I'm currently facing issues with aligning items within a two-column grid. When looking at this image, you'll notice that the alignment is off. Specifically, 'Example 3' does not align properly with 'Example 4'. This seems to b ...

CSS selector for detecting elements with empty or whitespace-only content

A special selector called :empty allows us to target elements that are entirely devoid of content: <p></p> However, in some cases, the element may appear empty due to line breaks or white spaces: <p> </p> In Firefox, a workar ...

Aligning icons side by side using only CSS styling

I'm having trouble positioning icons next to each other horizontally and they keep stacking on top of one another. Can you please review my CSS code to see if I made a mistake? Here is the CSS: #social { top:20px; left:30px; height:32px; width:200p ...

Attempting to generate an absolute Xpath for the Add button, which is a subelement

I'm struggling to locate the Add button on our website, which I am in the process of automating using Python and WebDriver. Despite trying various Xpath suggestions without success, I've consulted with the developer who informed me that the butto ...

Saving HTML form data to a text file

I have a form on my website's index.html that looks like this: <form id="demo" action='submit.php' method='post' enctype='text/plain'> link: <input type='text' name='web'></br> <i ...