Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

How can I achieve a layout similar to the one shown in this image: ul menu li tags

Should I use two tags for each element? Here is an example:

<ul class="menu">
    <div class="outside"><li class="inside"><a href="#">Firefox</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Chrome</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Opera</a></li></div>
</ul>

Alternatively, should I use double li tags instead? I have experimented with the linear-gradient property in CSS, but using just one tag. To achieve the desired result seen in the image, it appears that two separate tags with different background colors are required, with the black-colored one having a higher z-index.

Being relatively new and inexperienced in design and styling, I truly appreciate any help or guidance you can offer. Thank you in advance!

htmlcsshtml-listsmenuitem

Answer №1

To add a colored side on the left, use the pseudo-element ::before

Keep in mind that using div directly inside a ul is not valid, so I have removed them

Alternatively, you can achieve the same effect using a left border

Answer №2

To create a linear-gradient effect, simply specify both colors to be at the same position on the gradient (e.g. gray 10%, black 10%) so that they divide the background at that specific point.

Note: It is recommended to remove the outer div elements surrounding your li tags, as they are not valid within a ul element.

ul.menu {
  list-style: none;
  display: flex;
}

ul.menu li.inside {
  background: linear-gradient(to right, gray 10%, black 10%);
  margin-left: 5px;
  padding: 5px 5px 5px 20px;
  width: 120px;
  display: block;
  box-sizing: border-box;
}

li a {
  color: white;
}
<ul class="menu">
  <li class="inside"><a href="#">Firefox</a></li>
  <li class="inside"><a href="#">Chrome</a></li>
  <li class="inside"><a href="#">Opera</a></li>
</ul>

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

Box Pattern with Pop-Up Modal

Check out the grid of squares I've coded below: <div class='square-container'> <div class='square'></div> <div class='square'></div> <div class='square'></div& ...

javascriptjqueryhtmlcss

Guide to altering the color of the row that is clicked in a table using css and jquery

Is there a way to change the text color of a row in a table when it is clicked, similar to an example like this but without changing the background color? The code I have tried is not working for me. Below is a snippet of the code I am using: $("#myTab ...

javascriptjqueryhtmlcsshtml-table

The menu was intended to be hidden when the mouse is moved away, but it actually hides

I'm facing an issue with my button and menu functionality. Even though I have coded the menu to hide itself when the mouse leaves, it hides before the mouse even goes over it. Any suggestions on how to resolve this? function showMenu() { var menu ...

javascriptjqueryhtmlcss

LFT Etica font showcases digits with varying heights

In the project I am working on, we are required to use the font LFT Etica. However, there is an issue with the height of certain digits when displayed. Specifically, some numbers appear taller than others. Is there a way to make all digits have equal heigh ...

cssfontsfont-feature-settings

I'm puzzled as to why the hidden input field consistently returns the same value every time

As a beginner in php, I am facing an issue where I cannot trace the correct value of the hidden input which represents the ID of the image in the products table. Every time I try to delete an image, it always returns the ID of the last image in the product ...

phphtmlcss

Ellipsis not displaying correctly in a paragraph class with text overflow issue

I'm currently tackling a project that prioritizes mobile-first design. While I have a list of elements to work with, I've encountered an issue with one in particular. In this project, I want the "h3" element to always be fully visible for easy re ...

htmlcss

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

Hello there, I have successfully created three columns in one row with column sizes of col-sm-4 each. Each column is further split into two equal sections and includes a footer row. You can see the alignment in the image below: Check out this sample align ...

htmlcsstwitter-bootstrap

Moving the words from textArea to each 'ol' element using JavaScript

When a word is entered in the textarea, it should be assigned to a specific class within an 'ol' tag. Each subsequent word will be placed in the next class sequentially. If there are no more words, the remaining classes should remain empty. <! ...

javascripthtml

What is the best way to display a bitmap image in a Div, Span, Label, etc. on an Asp.Net page without using a Handler?

I am looking to display a bitmap image within a Div element using code behind. I prefer not to use a handler for this task. Here is an example of what I would like to achieve: div.InnerHtml = BitmapImage; ...

c#asp.nethtmlbitmap

I am looking to identify when the focus event occurs on all HTML input elements on a page without using addEventListener or any HTML attributes

Does anyone know a way to detect the focus event on all HTML input elements on a page without using the addEventListener function or HTML attributes? I was successful in detecting click events with the following code: onclick = () => { // do somethi ...

javascripthtmlfrontenddom-events

Eliminate the .html extension from the URL and initiate a redirect

I need assistance removing the .html extension from URLs that are displayed in the address bar. To achieve this, I used the following code: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}\.html -f This solution ...

html.htaccesshttp-redirect

When using jQuery, the value of an input type text field remains constant despite any alerts

My issue involves an input text used to check if the corrected values are being displayed in an alert. However, when I modify a value in the form and check if the updated value appears in the alert box, it still shows the old value. Below is the relevant ...

javascripthtmljquery

Optimal approaches for managing form processing duties

What is the most effective approach to handle form processing? In my situation, I typically follow these steps: If the user has not submitted the form, Display the form Otherwise, If there are any form errors, Show error messages Display the form ...

phphtmlforms

Should CSS variables be defined within the render method of a React component?

Yesterday, I mistakenly created and deleted a post. Now, I am facing an issue with creating a component that requires specific styling. The problem arises when the componentDidMount() method causes flickering during the rendering process, as it takes some ...

javascripthtmlcssreactjscss-variables

Center the navbar menus at the bottom

Trying to position two menus on a webpage can be challenging. One needs to show at the center bottom, while the other should appear in the top right corner. When attempting to achieve this layout, it's important to ensure that both menus are displayed ...

csstwitter-bootstrapbootstrap-4

Experiencing strange behavior with floating labels in Bootstrap 5.3 on my Google Chrome browser (Version 123.0.6312.86 (Official Build) (64-bit))

Lately, I've observed an unusual behavior with BS 5.3 floating labels. Strangely, the placeholder is being displayed below the label text, which is not the expected behavior. On Google Chrome, the floating labels are appearing like this: https://i.ss ...

cssgoogle-chromebootstrap-5

Include an edit button with each row in an HTML table for seamless editing of the database

I am currently exploring php and seeking assistance with a project for my internship. I have successfully queried all records from the mysql database and displayed them in an html table. However, I now want to include an edit button in a separate column fo ...

phphtml

The constant reloading of the page is hindering the crucial display of the data

After successfully getting something to work, I noticed that the data disappears when the page refreshes. How can I prevent this from happening? <html> <head> <meta charset="utf-8"> <title> IT Services </ti ...

javascripthtmlforms

Which is more accessible: a disabled textbox or a div with role="textbox"?

Imagine I have a form in which one of the fields (name) is always disabled. When it comes to accessibility, would it be more effective to use an input <label> Name <input role="textbox" aria-readonly="true" value="Joe Shmoe" /> < ...

htmlaccessibilitywai-aria

What is the best way to create a new row at a specific index in an ng-repeat loop?

My Goal: I am aiming to insert a new row of ul after every 2 elements in my ng-repeat loop. For example: <ul class="col-sm-2"> <li><p>Automobile & Motorcycle</p></li> ...

javascripthtmlangularjs