Place CSS elements in relation to the underlying element

This is an example of my HTML structure:

<nav id="menu">
   <ul>
      <li><a href="">Products</a></li>
      <li><a href="">Offers</a></li>
      <li><a href="">References</a></li>
      <li><a href="">Directions</a></li>
      <li><a href="">About us</a></li>
      <li><a href="">Jobs</a></li>
      <li><a href="">Partners</a></li>
      <li><a href="">Contact</a></li>
   </ul>
</nav>

Here is the CSS styling for the menu:

#menu {
    position:relative;
    width:100%;
    height:35px;
    margin-bottom:10px;
    background-image: url("../img/menuBackground.png");
    background-repeat: no-repeat;
}
#menu ul {
    display: block;
    list-style-type: none;
    position: relative;
    top:5px;
    margin-left:20px;
    margin-right:20px;
}

#menu ul li {
    display: block;
    position: relative;
    float: left;
    margin-right: 16px;
}

There is a concern about the spacing around the text in the A elements overlapping the white stripe in the "menuBackground.png" image. The issue occurs with the Kontakt element, where the text overlaps the white stripe.

How can I ensure that there will be additional spacing added when an element overlaps the white stripe?

Thank you in advance for any suggestions or solutions to this problem.

Check out a JS FIDDLE EXAMPLE for reference...

csshtml

Answer №1

What has been found to work is:

#menu {
    position:relative;
    width:100%;
    margin-bottom:10px;
    background-repeat: no-repeat;
    overflow: hidden;
}
#menu ul {
    display: block;
    list-style-type: none;
    position: relative;
    top:5px;
    margin-left:20px;
    margin-right:20px;
    background-color: #ff9025;
    overflow: hidden;
}

#menu ul li {
    display: block;
    position: relative;
    float: left;
    padding: 0 8px;
    height: 35px;
    background-color: #ffbf00;
}

#menu ul li:last-child {
    background-image: url(https://i.stack.imgur.com/WSJSV.png);
    background-position: 63% top;
    background-repeat: no-repeat;
    padding-right: 60px;
}

Although it's not the most elegant solution.

View JS Fiddle demo.

The approach involved moving the background-image from the ul (or maybe the nav, unclear) to the end of the li:last-child1, positioning it correctly to show the stripe. Additional padding was added to that element, and the ul was styled with the color of the right side of the image, while the li elements were given the left side color to create the illusion of the image. Although not perfect, this method seems to be functioning reliably. It is recommended to add and comment out more li elements for testing purposes.

Update: In light of the limited support for :last-child in some browsers like IE, jQuery can be used as your site already utilizes it:

$('#menu li:last').addClass('lastChild');

Updated JS Fiddle demo.

Further Update: Here is what I believe to be the final version, including a feature-detection to enable the jQuery option if :last-child support is lacking (although explicit testing for lack of :last-child support is challenging, assuming that a browser without support for document.querySelectorAll() likely lacks support for :last-child):

if (!document.querySelectorAll){
    $('#menu li:last').addClass('lastChild');
}

Final JS Fiddle demo.

  1. This issue primarily affects older browsers, particularly those before IE9, as versions prior to IE9 do not support the :last-child pseudo-selector. A review of compatibility tables on Quirksmode.org reveals the extent of the problem.

Answer №2

Adding space using a background image can be challenging as it requires precise customization. One option is to create a div that divides your navigation bar, but this may involve cutting your background image into separate parts for the navigation section and white stripe. Alternatively, adjusting margins and font size can also help achieve the desired spacing.

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

JavaScript: Understanding the concept of closure variables

I am currently working on an HTML/JavaScript program that involves running two counters. The issue I am facing is with the reset counter functionality. The 'initCounter' method initializes two counters with a given initial value. Pressing the &a ...

javascripthtmlclosures

When using jqueryprint.js to print from Firefox browser, an additional blank page appears before the content

Seeking assistance in printing a section of an HTML page using PHP with a large header space for empty space after printing. Despite multiple attempts, achieving the desired result in Chrome, but facing issues with Firefox, which adds an additional page be ...

jquerycsshtmlprinting

Arrange three images both vertically and horizontally at the center of the page

I am facing an issue with aligning a button and 2 images in a row on my website. Currently, this is how it looks: https://i.stack.imgur.com/yrQB6.png Here is the HTML code I am using: <div class="row text-center"> <div class="col-md-12"> ...

htmlcssimagetwitter-bootstrapalignment

Photographs featuring a ripple effect in the columns of Zurb's Foundation framework

Working on a WordPress site using the Foundation 6 CSS framework, I have a design with a row containing two large-6 columns, each filled with an image featuring a wave shape. Check out the image I've linked below. View the row with 2 columns I' ...

htmlcsswordpressimagezurb-foundation

Tips on rearranging the location of a div element within a directive

I have created a custom directive that displays two divs, Div1 and Div2, with a splitter in the middle: Splitter Image Now, I am looking for a way to swap the positions of these two divs dynamically using an Angular directive. I thought about using ng-swi ...

javascripthtmlcssangularjsangularjs-directive

My node.js code is not producing the expected result. Can anyone point out where I may be going wrong?

I've been working on a BMI calculator where I input two numbers, they get calculated on my server, and then the answer is displayed. However, I'm having trouble receiving the output. When I click submit, instead of getting the answer, I see a lis ...

javascripthtmlnode.jsexpress

Include a new row in the form that contains textareas using PHP

I'm trying to add a new row to my form, but I'm facing challenges. When I click the add button, nothing happens. If I change the tag to , then I am able to add a row, but it looks messy and doesn't seem correct to me. Here is my JavaScript ...

javascriptphphtmlformsrow

Bug in floating elements within a header causing issues with IE6 and IE7

We are currently facing an issue where an anchor tag is floating right inside a header. While it displays correctly on IE8 and Firefox, we are encountering problems with it popping outside the header box. Does anyone have any suggestions on how to prevent ...

htmlcssinternet-explorer-6internet-explorer-7css-float

Position an element to the right inside its parent container with varying width in Internet Explorer 7 or earlier

I am trying to align a button to the right edge of a table inside a container-div that has no set width. The goal is to have the button float on the right side of the table, lining up with its right edge. While my current approach works in most browsers, i ...

htmlcss

What is the process for creating a duplicate element within the target div after the original element has been dropped?

Imagine a scenario where the "HI" div is dragged into the "DRAG HERE" div, causing the "HI" div to be removed from its original location. What if, instead of disappearing, dragging the "HI" div to another location generated a new "HI" div? /** * Fu ...

javascripthtml

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...

javascripthtml

What could be causing my navigation bar to malfunction?

Being fairly new to HTML and CSS, I have been struggling with my nav bar. Despite multiple attempts to fix it, the dropdown items do not appear when hovered over. Changing display: none; to display:block; only results in the items dropping down to the next ...

htmlcsshoveruinavigationbarnav

Modify the shading of the mesh generated with the face3 method

I have utilized face 3 and three js to generate a mesh, but the expected color is not displaying correctly on the mesh. Below is the code snippet I used: var geometry = new THREE.Geometry(); var f = 0; for (var i = 0; i < data.real.length ...

javascripthtmlthree.js

Is it possible to overlay color on top of a div background? (i.e. modify div color without altering the 'background-color' property)

Can you apply a color "on top of" a div's background? I'm looking to change the displayed color of a div without altering the 'background-color' value. I need to keep the background-color for comparison when divs are clicked: var pick ...

javascriptjquerycsshtmlbackground-color

Display a specific element only if another element exceeds a specified height

A snippet of HTML code is given below: <span class="day-number">{{day-number}}</span> <div class="event-box"> <div class="event-container"> </div> <div class="more-events">more ...</div> </div> The .e ...

javascriptjqueryhtmlcss

The Geolocation API popup on Safari for iOS kept appearing repeatedly

I have successfully implemented a code using the HTML5 Geolocation API to retrieve the user's current position within a mobile website. Although the code functions properly, there is an issue with Safari on iOS. Whenever the page is reloaded, a syste ...

javascriptioshtmlsafarimobile-safari

"Utilizing the ng-class directive in AngularJS to apply multiple

I have been attempting to utilize the ng-class directive in AngularJS based on a certain condition: if a JSON value is 1, it should display as green; if it's 2, red; and if it's 0, white. However, I am unable to achieve the desired result for som ...

cssangularjs

continuously refresh choices available for selection

I am looking for a way to dynamically populate the second select option based on the selection made in the first select option. While I know how to achieve this using traditional jQuery and HTML, I was wondering if there is a way to update options_for_sele ...

jqueryhtmlruby-on-rails

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section. <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" /> In order to make the website mobile-friendly, I s ...

javascriptjqueryhtmlcss

Encountering redundant links during the scraping process

I'm currently working on extracting "a" tags with the class name "featured" from a specific website . Although the code I've written seems to be error-free, it unfortunately duplicates the links. How can I resolve this issue and avoid the duplica ...

pythonhtmlweb-scrapingbeautifulsoup