Omit one element from the margin configuration for the navigation bar

I need help excluding the margin setting for just one item in my navigation bar, specifically the last one labeled "Kontakt"

Here is the HTML code:

<nav>
    <ul>
        <li><a href="index.html">HJEM</a></li>
        <li><a href="forum">FORUM</a></li>
        <li><a href="doner.html">DONER</a></li>
        <li><a href="servere.html">SERVERE</a>
        <li style="margin-right: 0 !important;"><a href="kontakt.html">KONTAKT</a></li>
    </ul>
</nav>

And here is the corresponding CSS:

nav {margin: 10px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; float: left; padding:0;}
nav ul li a {
    background: #FFFFFF;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    color: #717171;
    text-decoration: none;
    float: left;
    padding: 8px 0;
    width: 106px;
    margin: 0px 10px 0 0;
}
nav ul li{ position:relative; float:left;}
nav ul li a:hover {background: #f1f1f1;}
nav ul li ul.submenu {
    position: absolute;
    width: auto;
    display:none;
    top: 35px;
}
nav ul > li:hover > ul {
    left: 0;
    display: block;
}

If you want to know more about centering a navigation bar, check out this link

Feel free to visit our website at htttp://hjortefjellet.com for more information

Answer №1

Your right margin is applied to a link here

nav ul li a {
    background: #FFFFFF;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    color: #717171;
    text-decoration: none;
    float: left;
    padding: 8px 0;
    width: 106px;
    margin: 0px 10px 0 0;<- right margin
  }

All you have to do is:

<ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="forum">FORUM</a></li>
        <li><a href="donate.html">DONATE</a></li>
        <li><a href="servers.html">SERVERS</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a style="margin-right: 0 !important;" href="contact.html">CONTACT</a></li>
  </ul>

You can achieve the same result with CSS as well:

nav ul li:last-child a{
margin-right:0;
}

Answer №2

One issue arises from the fact that every list item in the list has an assigned width value. Even if you attempt to eliminate any margin on the right side of the last item, there will still be spacing present. To address this, some adjustments need to be made to the widths. You can get started by implementing the following modification:

nav ul li a {
    margin: 0px 12px 0 0;

Answer №3

If you find yourself needing to target the last element within nested ul elements, there are several CSS3 selectors you can use. In this particular scenario, I opted to utilize :nth-last-child(1).

All you have to do is insert these two lines of code:

choose red color here for better visibility

nav ul li li:last-of-type a{color:#717171;font-size:16px;} 
nav li:nth-last-child(1) a{color:red;font-size:16px;}

Check out the Working Demo here: http://jsbin.com/zacevosa/4/

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

Exploring a JSON Data Structure

I have a JSON data structure outlined below var json = { "name": "Soft Drinks", "T2": [ { "name": "Bottled", "T3": [ { "name": "Apple", ...

Is it possible to determine the height of a div after it has been rendered using the .resize method?

In my current structure, <div id="A"> <div id="A1"> <div id="B1"></div> <div id="B2"></div> </div> <div id="A2"></div> </div> A2 and B2 contain tables, while B1 has 4 checkboxes. I&a ...

showcasing a map on an HTML webpage

Seeking advice on integrating a map feature in HTML to mark store locations. Working on an app for a business community and need help with this specific functionality. Your assistance would be greatly appreciated! ...

How to utilize jQuery to interact with a RadComboBox located within a grid

As a beginner in jquery, I have a gridview where EditItemTemplate, FooterTemplate, ItemTemplate, and EmptyDataTemplate are used for inserting and updating records. I am also using a RadComboBox in the grid and I want to access its values on the client side ...

Issue with retrieving JSON data through HTTP Get request on Internet Explorer, while it works fine on

Trying to upgrade a basic weather plugin by integrating geolocation services that identify a user's location based on their IP address. Smooth sailing on Chrome and Firefox, but IE seems to be causing some trouble. Any idea what might be the issue wit ...

Error in AngularJS v1.2.5 when using textarea with placeholder attribute in IE11

Having trouble with an Angular JS v1.2.5 form that is not functioning in IE11, despite working perfectly in Firefox, Chrome, and Safari. The issue seems to be related to using interpolation inside the placeholder attribute of a textarea. <body ng-con ...

using JQuery, add a class on click event or on page load

Solved It! After encountering a problem created by some sloppy moves on my part, I managed to solve it. However, another issue arose: adding the class current to li with data-tab="tab-1 upon page load. $('ul.tabs li').click(function(){ ...

Stream music from SoundCloud by simply clicking a button on an external source, no need

My post contains an embedded SoundCloud player using the following code: <iframe class="soundcloud_iframe" width="100%" height="166" scrolling="no" frameborder="no" src="'.esc_url('https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcl ...

How can I collapse the dropdown menu in typeahead.js?

I am currently utilizing typeahead.js for a typeahead functionality. My goal is to achieve the opposite of what was discussed in this thread: Programmatically triggering typeahead.js result display Despite attempting to trigger a blur event on the typeah ...

The background of the div fails to appear

Why is my div's background not displaying properly? Check out the code below: <div style=" width:676px; height:230px; display: inline; margin: 0 0 0 0; background-image: url('http://www.goodsstall.co.uk/ekmps/shops/goo ...

CKEditor's height automatically increases as the user types

I am using a ckEditor and looking for a way to make its height automatically grow as I type. https://i.stack.imgur.com/m7eyi.png <textarea name="description" id="description"> </textarea> <script> CKEDITOR.replace( 'description ...

Ways to align two buttons side by side in HTML

I'm struggling with the code on my company's website. I can't seem to get the buttons to float properly with the given code. <div class="text-center"><a class="text-center" href="/contact-us"><button class="btn btn-small btn- ...

I am having trouble getting my console.log function to work properly on my HTML page

As a beginner in JavaScript, I am facing an issue with my console.log not working at all. When I type a console.log message, nothing shows up on my HTML page. I have tried to debug it, but being a newbie, I lack the necessary knowledge. All I can do is see ...

A Great Option for Easy Drag and Drop Functionality

Currently researching options for Drag and Drop functionality with items such as images and textareas. Need a solution that provides coordinates of where the item is dropped on screen, saves it, and allows placement in the exact same location later. Desir ...

How can I modify CSS styles in AngularJS with Bootstrap UI?

Utilizing bootstrap UI in conjunction with AngularJS directives, I am looking to customize the default styles that bootstrap applies to its elements. Is it recommended to target the HTML contents within the template? Referring to the examples provided in ...

With FlexLayout, the content compresses rather than shrinking and taking up the entire width

When utilizing Angular and the flex Layout to develop a dashboard, I am encountering an issue where the items do not shrink as expected when opening the navigation. This results in the last item being pushed to the next line. Below is the HTML for the pare ...

Transferring identification data between views within an application (AngularJS, NodeJs, HTML)

I'm working on an HTML page that lists users from MongoDB. The page allows for deleting and updating users. I am encountering an issue with the update button - I want a new HTML page to appear with a form when the button is clicked, capturing the user ...

Unable to place the div/ul above a preceding div

I am having trouble setting up a menu of tabs. I want it to move up so that it is positioned just above the previous div. However, every time I try to move it up, it ends up going underneath the previous div. I have attempted to change the z-index but with ...

"The CSS styling for the text input field is not being reflected in the designated

My contact form has multiple controls, but I'm having trouble changing the color of the name that is displayed in the control before a user starts typing their information. I tried using the color property, but this ended up changing the color of the ...

What steps can I take to troubleshoot the 'Uncaught DOMException: failed to execute add on DOMTokenList' error?

I am looking to create media icons <div class="contact"> <span> <i class="fa fa-phone"></i> </span> <span> <i class="fa fa-facebook"></i> </spa ...