Position the menu links in different alignments - some to the right and others to the

I have created a horizontal menu using HTML and CSS. Currently, the links (boxes) are displayed from left to right, floated to the left of the page.

However, I am looking for a way to make one of the links (boxes) float to the right side of the page. I attempted to use the float right property in a separate class called navigation-right, but it did not produce the desired result.

HTML

<div class="navigation-left">
  <ul>
    <li><a href="<?php echo $website_url; ?>">Home</a></li>
    <li><a href="<?php echo $website_url; ?>">SAF</a></li>
    <li><a href="<?php echo $website_url; ?>">Acudetox</a></li>
  </ul>
</div>

CSS

.navigation-left {
    height:auto;
    list-style:none;
    margin-right:40px;
    display:inline;
}
.navigation-left li{
    width:200px;
    height:25px;
    margin:5px;
    padding:5px;
    background-color:#666666;
    border:none;
    text-align:center;
    display:inline-block;
}
.navigation-left li:hover{
    background-color:#f36f25;
    color:#FFFFFF;
}
.navigation-left li a{
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.navigation-left li.current {
    background-color:#F36F25;
}
.navigation-left li.current a {
    color:#FFFFFF;
}

http://jsfiddle.net/W2x5y/

htmlcss

Answer №1

Did the Fiddle meet your expectations?

<div class="navigation-left" style="float:left">
<ul>
<li><a href="<?php echo $website_url; ?>">Home</a></li>
<li><a href="<?php echo $website_url; ?>">SAF</a></li>
</ul>
</div>

<div class="navigation-left">
<ul style="float:right; ">
<li><a href="<?php echo $website_url; ?>">Acudetox</a></li>
</ul>
</div>

Answer №2

Using a simple float: right; declaration will align the elements to the right side.

<div class="navigation-left">
    <ul>
        <li><a href="#">Home</a></li>
        <li style="float: right"><a href="#">SAF</a></li>
        <li><a href="#">Acudetox</a></li>
    </ul>
</div>

http://jsfiddle.net/W2x5y/1/

Answer №3

To achieve the desired effect, you would need to target specific li tags with a class. Additionally, adjusting the width of the containing ul element is necessary to allow for proper alignment on the right side.

Check out this example on JSFiddle: http://jsfiddle.net/W2x5y/2/

<div class="navigation-left">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">SAF</a></li>
        <li class="right"><a href="#">Acudetox</a></li>
    </ul>
</div>

ul {
    width: 100%;
}
.right {
    float: right;
}

Answer №4

These questions are quite intriguing. I believe this information will be beneficial.

To enhance the user experience, it is recommended to anchor the navigation-left and navigation-right elements within a navigation box.

Here is an example of how to structure this in HTML:

<div class="nav-box">
    <div class="nav-left">
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
    <div class="nav-right">
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
</div>

For styling, apply the following CSS:

body .nav-box {
    top: 0;
    width: 100%;
    height: auto;
    background: #eee;
    overflow: hidden;
}
.nav-box .nav-left {
    display: inline;
    left: 0;
    float: left;
    width: auto;
}
.nav-box .nav-right {
    display: inline;
    right: 0;
    top: 0;
    float: right;
    width: auto;
}

You can view a working example here.

Answer №5

It appears that the two navigation bars are quite different, so it might be beneficial to separate them into two elements. Create two separate elements. You can view an example in this Fiddle: http://jsfiddle.net/q7e3M/1/

<div class="container">
  <div class="navigation-left">
    <ul>
        <li><a href="<?php echo $website_url; ?>">Home</a></li>
        <li><a href="<?php echo $website_url; ?>">SAF</a></li>
    </ul>
  </div>
  <div class="navigation-right">
    <ul>
        <li><a href="<?php echo $website_url; ?>">Acudetox</a></li>
    </ul>
  </div>
</div>

If you prefer to keep them as one element, you can do so with this code: http://jsfiddle.net/Afxkt/1/

<ul class="navigation">
    <li><a href="<?php echo $website_url; ?>">Home</a></li>
    <li><a href="<?php echo $website_url; ?>">SAF</a></li>
    <li class="navigation-right"><a href="<?php echo $website_url; ?>">Acudetox</a></li>
</ul>

CSS: 

.navigation {
    display: inline;
    list-style: none;
}
.navigation li {
    float: left;
}
.navigation-right {
    float: right;
}

Answer №6

Aligned on the right side

.right_side{ float:right}

<div class="navigation-left right_side">
<ul>
<li><a href="<?php echo $website_url; ?>">Home</a></li>
<li><a href="<?php echo $website_url; ?>">SAF</a></li>
<li><a href="<?php echo $website_url; ?>">Acudetox</a></li>
</ul>
</div>

Move the last <li> to the right 

.navigation-left li:last-child{ float:right}

Move the first <li> to the right

.navigation-left li:first-child{ float:right}

Move the second <li> to the right

.navigation-left li:nth-last-child(2){ float:right}

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

Node-modules CSS

In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...

csswebpacknode-modulescss-loader

When viewing HTML emails in dark mode on iOS Gmail, the CSS appears to be inverted

While sending an HTML email from a nodejs app, I encountered an issue with Gmail on iOS where elements with background-color or color properties were getting reversed. This was most noticeable on black and white elements. Despite consulting various guides ...

htmlcssnode.jsemailgmail

Choosing an element in JQuery based on the value of its style property

I have three divs with the same class but different styles. I need to select only the third one using JQuery. <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-div ...

javascriptjquerycss

"Escape the confines of traditional div sections with the dynamic features of

In the beginning, I have arranged two rows of three divs on my webpage, which is how I intend to use them later. However, when testing the 'mobile view', the divs in the section overflow and move into the next part below the section. This causes ...

htmlcssfullpage.js

An alert box displays N times when the submit button is clicked N times

Consider the following function: function validateForm() { var elements = ["firstname", "lastname", "password", "favfood", "favsport"]; document.getElementById('register').setAttribute('noValidate', true); document.getElement ...

javascripthtmlformsalert

Showing fetched data from Firebase in an Ionic 3 HTML file

Looking for assistance on how to display data retrieved from my firebase database in my HTML file. I need help with organizing the data, starting with displaying customer user's data. Eventually, I want to make it clickable and put the user's dat ...

htmlangularfirebaseionic-frameworkfirebase-realtime-database

Scrolling to specific ID scrolls only in a downward direction

I have been using fullpage.js for my website and I am facing an issue. When I create a link and connect it to an id, everything works perfectly. However, I am unable to scroll back up once I have scrolled down. Here is the HTML code: <a href="#section ...

javascripthtmlcssonepage-scroll

Avoid placing content before a link to ensure better focus

I came across some CSS code that closely resembles the following code. (I copied it from http://jsfiddle.net/LmvgM/8/ thanks @thirtydot). I noticed that when the link is focused, the :before content is included. Is there a way to remove it from the highli ...

css

A helpful tip on how to designate a specific color to the helperText in Material UI in order to emphasize

Is there a way to customize the color of helperText in material-UI for highlighting errors in a TextField? I've been struggling to change the color of helperText with no success. I attempted using MuiFormHelperText-root-406 to add CSS styles, but it ...

cssreactjsmaterial-ui

Designing an HTML banner with 100% width and 660 pixels in height for optimal responsiveness

I am in need of a responsive banner that will be displayed at 100% width and 600px height on fullscreen. Below is the code I have: <style> /* default height */ #ad { height: 660px; width: 100%; } @media o ...

jqueryhtmlcss

Issue with jQuery not being able to retrieve the data from my CSS property

this is my custom style code: table.table tr td{ padding:30px; border-left: double 1px white; border-bottom: double 1px white; cursor:cell; } and below is the jQuery script I am using: $(document).ready(function () { ...

javascriptjqueryhtmlcss

Utilizing different levels of `<div>` within the card-body component in Bootstrap5

While following a web application tutorial on YouTube, I encountered a question. The code snippet is shown below: <div class="card card-body"> ... </div> The resulting output is displayed in this image: https://i.sstatic.net/D3iBL.p ...

htmlbootstrap-5bootstrap-cards

The <ul> tag is not receiving the correct styles and is not displaying properly

I have successfully integrated an input control and button into my table within the Angular 7 application. When a user inputs text in the control and clicks the add button, the text is appended to the <ul> list. However, the layout of the <ul> ...

htmlcss

Using an HTML5 image icon as an input placeholder

Is there a way to incorporate an image icon into an input placeholder and have it disappear when the user starts typing, across all browsers? In trying to achieve this, I successfully implemented a solution for webkit (Safari+Chrome) using ::-webkit-input ...

csshtmlcross-browserplaceholder

CSS designed for small-screen laptops is also being utilized on iPads running Safari

To specifically target the iPad/Safari browser and accommodate some minor differences in appearance compared to windows/linux browsers, we are implementing the following HTML meta tag and style query: <meta name="viewport" content="width=device-width, ...

cssipadsafari

When hovering on the list items, the text-decoration with a border-bottom and vertically centered unordered list "jumps"

I'm specifically looking for a solution using CSS only. I have a navigation bar with an unordered list containing list items. My question is how to underline these list items with a border-bottom. The additional requirement is that the navigation bar ...

htmlcss

Can you explain the purpose of the URL function in the context of url("#foobar"

Currently, I am developing a CSS concatenator and one of the tasks involved is URL to absolute URL rewriting. For this process, I exclude any absolute URLs that start with http, https, etc. In the case of Django projects, they designate the following URL ...

css

Tips for integrating JavaScript code into React JS applications

I am attempting to create a scrollable table that scrolls both horizontally and vertically, using the example provided by . In my project directory under src/components/ScrollExample.js, I have copied and pasted the HTML code. In addition, in src/styles/c ...

javascriptcssreactjsscroll

What is the mechanism behind image pasting in Firefox's imgur integration?

Start by launching an image editing software and make a copy of any desired image. Avoid copying directly from a web browser as I will explain the reason later on. Navigate to "http://imgur.com" using Firefox. To paste the copied image, simply press Ctrl+V ...

javascripthtmlfirefoxclipboardimgur

Problem with Silverstripe: Replicating Site configuration or settings menu

I have duplicated the Settings menu (siteConfig) folder in order to create a new CMS menu for inputting company information. The functionality of the menu is working correctly, however, the CSS styling is not loading properly. Image: https://i.stack.imgur ...

csssilverstripe