Navigation bar with horizontal layout

I have the following

HTML:

<div id="filter-menu">
    <div class="filter-item home selected"></div>
    <div class="filter-item animals"></div>
    <div class="filter-item ancient"></div>
    <div class="filter-item energy"></div>
    <div class="filter-item env"></div>
    <div class="filter-item travel"></div>
</div>

CSS:

#filter-menu{
    width: 505px;
    height: 40px;
    float: left;
    margin-left: 10px;
    margin-top: 3px;
}

#filter-menu .filter-item{
    float: left;
    height: 38px;
    width: 84px;
    background-position: top;
    background-repeat: no-repeat;
    margin-right: 4px;
}

#filter-menu .selected{
    margin-top: 3px;
}

#filter-menu .home{
    background-image: url('images/Home.png');
    width: 78px;
}

#filter-menu .animals{
    background-image: url('images/Animals.png');
    width: 80px;
}

#filter-menu .ancient{
    background-image: url('images/Ancient.png');
    width: 80px;
}

#filter-menu .energy{
    background-image: url('images/Energy.png');
    width: 79px;
}

#filter-menu .env{
    background-image: url('images/Environment.png');
    width: 85px;
}

#filter-menu .travel{
    background-image: url('images/Travel.png');
    width: 79px;
}
  1. The first menu item should align with the left border.
  2. The last item should align with the right border.
  3. The distance between menu items should be automatically calculated.

pic: Help needed to modify the CSS rules, as currently the spacing is set manually and the last element doesn't align with the right border.

htmlcss

Answer №1

I would advise against stretching the menu, instead consider creating a centered menu for better aesthetics.

If you're looking for an alternative way to achieve your desired layout, you can use tables like this:

 #nav {
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;

    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid #fff;
}

For a demonstration, feel free to customize and experiment with this example: http://jsfiddle.net/eCPSh/647/

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

Tips for splitting h4 and p elements

Having trouble separating some of my h4 and p tags, even after setting margins for them. Any suggestions on how to overcome this? <div class="row text1 offset-md-1"> <h4>Description</h4> &l ...

htmlcss

Prevent the appearance of a scrollbar on a fixed-position popup element

Whenever I click on a button, a Sidebar opens up and fills the entire screen due to its position being set to fixed. Here's how it looks with TailwindCSS: return ( <div className="fixed z-40 flex left-0 top-0 h-screen w-screen"> ...

cssreactjstailwind-css

I am currently in the process of transitioning a Gatsby project from CSS to SCSS, and running into obstacles with the

Currently, I am in the process of converting a Gatsby starter project that utilizes Lost grid from CSS to SCSS for better organization and efficiency. The original starter project can be found here: https://github.com/wpioneer/gatsby-starter-lumen The ma ...

javascriptcssnode.jspostcssgatsby

Displaying modal popups limited to one per session

Is there a way to display this Dialog Popup only once per session? I have looked into using cookies for configuration, but haven't been able to implement it in this scenario: $(document).ready(function() { ShowDialog(true); e. ...

jqueryhtmlcsspopupmodal-dialog

How can I extract echoed information from PHP after submitting form data through jQuery Ajax?

I am looking to transfer a file from an input form to a php script using ajax and handle the response echoed by my php script. Here is my HTML form: <form id="fileUploadForm" method="POST" enctype="multipart/form-data"> <input name="fileToU ...

javascriptphpjqueryhtmlajax

Can you explain how Google highlights the specific search term within the description?

The functionality of my search engine is quite similar to how Google search works. When you search for a word, it gets highlighted in the returned results. https://i.sstatic.net/Y1vc0.png In my search engine, the searched word is enclosed in a span like ...

jqueryhtmlcss

Display the execution duration on an HTML document

Recently, I created a loan calculator using Javascript and now I'm contemplating on incorporating the time taken for the code to execute into the results. My intention is to have the execution time displayed on my HTML page, but I am unsure of how to ...

javascripthtmlcssbootstrap-4frontend

Modifying SVG HTML5 pattern attributes for a particular instance or use case

Having a SVG Pattern that serves as the fill for multiple other SVGs presents a challenge. Any changes made to the pattern attributes will reflect in all SVGs using it. Is there a way to customize the pattern attributes for a specific instance/use only? ...

javascripthtmlsvgsnap.svg

What is the best way to showcase a Table and an Image side by side in HTML using inline

Can someone help me figure out how to align my image and table on the same level? I've been struggling to get "inline-block" to work. :( <p id="play"> hey </p> <div id="menu"> <table> <tr> <td>Models</td& ...

htmlcsslayout

Guide to displaying a redirect from a CodeIgniter controller with an ID in PHP

I only have one button, but it needs to trigger two functions. I am trying to save data and redirect to a view with an ID. However, I keep encountering an error in the syntax. Message: Too few arguments to function c_transaksi::tambah_shrinkage(), 0 passed ...

phphtmlajaxcodeigniter

Striving to create a responsive fixed sidebar using HTML and CSS

My HTML page has a left side vertical navbar with a fixed position, so it stays in place when I scroll down the other div containing a guide with text. I'm facing issues with making it responsive due to its fixed position. Is there a workaround for th ...

css

Replacing inline CSS with styled components in Next.js Sass modules

In order to display emoji icons in my Next.js App, I utilize the Twemoji library. These emojis are rendered as <span><img></span> elements in the final HTML output. To customize their default width and height, I use the !important rule in ...

htmlcssnext.jscss-modules

Guide: Transform Bootstrap 4 Inline Checkboxes into Stacked Format When Screen Size Is Altered

The new layout of checkboxes and radio buttons in Bootstrap 4 really caught my attention. However, I am looking for a way to switch between "stack" and "inline" based on the screen size. Although size tagging has been added for various elements, I haven&ap ...

javascripthtmlcssbootstrap-4

What is the best way to assign a Python variable to an <a-assets> element?

There exists a Python function that provides the chosen background <a-sky ID="sky" color="{{object.background}}"></a-sky> The backgrounds can be in the format of '#c6aa99', '#e1a600', '#290942', 'star' ...

pythonhtmlaframe

Ways to eliminate the pale blue space

How can I remove the light blue gap between the "new customer account application" and Name/Street/City sections to make them adjacent? Any suggestions for improving my code as a beginner are appreciated. Thank you. I need to add more text because there ...

html

Stacking two divs for the team section layout

Although I'm new to this, I've been struggling to achieve a specific layout for a team page. My goal is to display a picture on the left side and text on the right for each team member. The design includes the person's name, title, and a set ...

htmlcss

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss

Tips for matching variable content with button identification to display content within a variable for ThreeJS?

I'm currently working on a project using Three.js where I need to load multiple 3D models and store them in an array. Each model has a corresponding button with a unique ID that when clicked, should add that specific model to the scene and remove any ...

javascripthtmlthree.js3d-model

Having trouble limiting the number of special characters in AngularJS

I am having trouble restricting special characters and spaces in the input text field. I tried using the following code snippet: ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" to prevent special characters, but it doesn't seem to be workin ...

javascriptangularjshtml

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

javascriptjqueryhtmlshopify