Place CSS elements in relation to the underlying element

Question

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...

css html

Answer 1

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-child¹, 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.

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

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-child¹, 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.

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 3

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.

Answer 4

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.

Place CSS elements in relation to the underlying element

Answer №1

Answer №2

Similar questions

Tips for showing placeholder text on Safari

Conceal the div using a sliding left animation

How can CSS be used to change the text color of input placeholder in Edge Browser?

Setting the selected value of a COREUI multiselect widget

Error in Google Translate API AttributeError

What is the best way to position a title and subheading alongside an image?

How to make sure that an element overflowing its container always starts from the top

Obtain the values of multiple attributes using jQuery

AngularJS: Utilizing bold text to enhance the separation of concerns between controllers and templates

Unable to append HTML table row to designated table

The navigation menu that usually appears on mobile devices is surfacing on desktop screens instead - update: images now

Issues with CSS3 height transitions in a specific scenario

Encountering Problem Importing HTML Table Data into R

Height of list items in image gallery does not automatically readjust

Aligning a collapsible feature while ensuring that the content descends

Limit text to two lines inside a cell in a table

I prefer the jumbotron to be uninterrupted by the navbar

Numerous Kendo windows are layered on top of each other, yet the text divisions within them remain distinct

When working with NodeJS and an HTML form, I encountered an issue where the 'Endpoint'

Incorporating Copyleaks SDK into Angular: A Seamless Integration