Tips for inserting an image within a horizontal list of items

Struggling to find a solution here. I have a menu with a unique bar design between list elements, featuring breaks at the top and bottom.

I attempted to use li:after in the CSS to insert an image, but encountered issues with padding and margin. Below is the embedded CSS and HTML code (Bootstrap framework is being used). Any suggestions on how to make these bars function correctly?

Screenshot:

(Please disregard the red color from illustrator).

https://i.stack.imgur.com/AdHEk.png


    #reviews .review-actions {
        text-align: center;
        z-index: 2;
        padding-top: 1px;
      }
      #reviews nav {
        display:inline-block;
        margin:0 auto;
      }
      #reviews nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #reviews nav ul li{
        display: inline;
        margin: 0;
        float: left;
        padding: 10px;
        background-color: #fff;
        font-size:1.2em;
      }
      /*#reviews nav ul li:after{
        content: url('./img/menu-splitter.png');
      }*/
      #reviews nav ul > li:first-child {
        border-top-left-radius: .5em;
        border-bottom-left-radius: .5em;
        border: 1px solid #ccd0d0;
        border-right: none;
      }
      #reviews nav ul > li:nth-child(2){
        border: 1px solid #ccd0d0;
        border-right: none;
        border-left: none;
      }
      #reviews nav ul > li:last-child {
        border-top-right-radius: .5em;
        border-bottom-right-radius: .5em;
        border: 1px solid #ccd0d0;
        border-left: none;
      }
      #reviews nav ul li a{
    
      }
    <section id='reviews'>
        <!-- Navigation -->
        <div class="review-actions">
          <nav>
            <ul>
              <li><a href='#'>The App</a></li>
              <li><a href='#'>Our Service</a></li>
              <li><a href='#'>Surprises</a></li>
            </ul>
          </nav>
        </div>
      </section>

htmlcsstwitter-bootstrap-3

Answer №1

One way to customize the appearance of your li element is by setting the background directly within the li tag. Here is an example of how you can achieve this:

#reviews .review-actions {
        text-align: center;
        z-index: 2;
        padding-top: 1px;
      }
      #reviews nav {
        display:inline-block;
        margin:0 auto;
      }
      #reviews nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #reviews nav ul li{
        display: inline;
        margin: 0;
        float: left;
        padding: 10px;
        background-color: #fff;
        font-size:1.2em;
      }
      /*#reviews nav ul li:after{
        content: url('./img/menu-splitter.png');
      }*/
      #reviews nav ul > li:first-child {
        border-top-left-radius: .5em;
        border-bottom-left-radius: .5em;
        border: 1px solid #ccd0d0;
        border-right: none;
      }
      #reviews nav ul > li:nth-child(2){
        border: 1px solid #ccd0d0;
        border-right: none;
        border-left: none;
      }
      #reviews nav ul > li:last-child {
        border-top-right-radius: .5em;
        border-bottom-right-radius: .5em;
        border: 1px solid #ccd0d0;
        border-left: none;
      }
      #reviews nav ul li a{
    
      }
      li:nth-last-child(n+2) {
           background-image: linear-gradient(blue, blue);
           background-size: 2px 90%;
           background-repeat: no-repeat;
           background-position: right center;
      }
<section id='reviews'>
        <!-- Navigation -->
        <div class="review-actions">
          <nav>
            <ul>
              <li><a href='#'>The App</a></li>
              <li><a href='#'>Our Service</a></li>
              <li><a href='#'>Surprises</a></li>
            </ul>
          </nav>
        </div>
      </section>

Answer №2

To create a faux border effect, one strategy is to apply 4 single-pixel-width box-shadows around the <ul>, and then add an actual border to the <ul> matching the color of the <li> background:

      #reviews .review-actions {
        text-align: center;
        z-index: 2;
        padding-top: 1px;
      }

      #reviews nav {
        display:inline-block;
        margin:0 auto;
      }

      #reviews nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 6px solid #ffffff;
        box-shadow: 1px 1px #ccd0d0, -1px 1px #ccd0d0, -1px -1px #ccd0d0, 1px -1px #ccd0d0;
        border-radius: .5em;
      }

      #reviews nav ul li{
        display: inline;
        margin: 0;
        float: left;
        padding: 10px;
        background-color: #fff;
        font-size:1.2em;
        border-left: 1px solid #ccd0d0;
      }

      #reviews nav ul > li:first-child {
        border-left: none;
      }
      <section id='reviews'>
        <!-- Navigation -->
        <div class="review-actions">
          <nav>
            <ul>
              <li><a href='#'>The App</a></li>
              <li><a href='#'>Our Service</a></li>
              <li><a href='#'>Surprises</a></li>
            </ul>
          </nav>
        </div>
      </section>

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

Incorporate pug and sass into your React project for a more

Are pug/jade and sass compatible with react? I enjoy organizing my code by separating files, and the functionality that sass and pug provide is great for this purpose. Is there a way to integrate pug and sass into a react project? Pug example: doctype ...

javascripthtmlcssreactjspug

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

javascripthtmlcssangulartypescript

The div element is not adjusting its size according to the content it

Essentially, I want the #main-content div to expand so that its content fits inside without overlapping, as shown in the codepen example. I've been unsuccessful in implementing the clearfix or overflow:hidden solutions so far. It's puzzling why ...

javascripthtmlcss

The specified number of columns and width values are being disregarded

The Challenge While using the CSS column-property to create columns on my webpage, I have encountered some unusual behavior with the layout engine. Specifically, I have set up the following styling: body { padding: 0; background-color: black; margi ...

htmlcsscolumn-widthcss-multicolumn-layoutcolumn-count

Using Express.js to render an HTML table in a web page

Is there a way to display a full table using the res.render method? This is what I'm attempting to do: I need to define where to send one of my tables. main.hbs <html> ... <div id="main_frame" class="col s12">{{{bod ...

htmlnode.jsexpress

Is it possible to operate a mobile site automatically alongside a desktop site?

I'm currently working on a website that looks fantastic on desktop, but doesn't quite function properly when viewed on mobile devices. I'm curious if there is a method or system I could implement to automatically load the mobile version of t ...

htmlcssresponsive-design

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Our web designer has implemented special pages for Internet Explorer by using IE-specific comments. This means that certain stylesheets are only loaded if the user is using a specific version of IE: <!--[if lt IE 7]> <link type="text/css" rel="st ...

javascriptcssinternet-explorerconditional-comments

Guide on incorporating `Animate.css` into an Angular application

I've been attempting to implement the bounceInUp animation from animate.css on a div upon showing it, but I can't seem to get it to work. What am I doing wrong? Can someone guide me on the correct way to achieve this effect? This is my CSS code ...

htmlcssangularjs

JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Which method is better for HTML5/JavaScript GeoLocation: Passing data to a callback function or suspending an async call using promises?

Trying to figure out how to utilize HTML5/Javascript Geolocations effectively for passing location data to an ajax call and storing it in a database. The main challenges I'm facing are the asynchronous nature of the Geolocation call and issues with va ...

javascriptajaxhtmlasynchronousgeolocation

The Enchanted URL Folder Name

Spent two painstaking hours dealing with this issue. It's incredibly frustrating. Struggling to load css files in PHP pages when the URL contains a folder named "adsq" Comparing two identical pages, only differing in the folder name: One works perf ...

phpcssdirectory

I'm having trouble getting my Retina image code to work perfectly. The high resolution image isn't loading at its full

After learning how to display my Retina optimized logo from this tutorial (link), I encountered an issue when testing on my iPad and Samsung Galaxy Note II (using Safari, Firefox, Dolphin apps). The Retina image is showing up at its full size of 1200px x 5 ...

androidcssipadretina-display

How can the values be preserved with two action forms and two submit buttons?

On my webpage, I have 2 action forms and 2 submit buttons. The first form is for adjusting the zoom level. The second form is for setting the refresh rate in seconds. Whenever I submit the zoom form, the refresh rate resets. Similarly, submitting the re ...

htmlformssubmitaction

the child div within a Bootstrap 3 column is not being properly styled

Experiencing a strange issue with a relative div within a column in Bootstrap 3. Here's my code: <div class="col-lg-6"> <div class="large" style="background: url(img/bg.jpg);"> <h1 class="grid-header">Content 1</h1> ...

htmlcsstwitter-bootstrap-3

Tips on aligning vertically centered left and right floating objects without having to use the line height property

          Here is the issue I am facing http://jsfiddle.net/vT4YT/ <table><tr><td><div></div><div></div></td></tr></table> You can see that the options and row text are not vertic ...

htmlcsscss-floatvertical-alignment

Passing string values to an onClick event listener in Javascript is similar to how it is done in an onclick event listener in HTML

render() { return ( <div> <div onClick={() => "FSR.launchFeedback('ax9sgJjdSncZWoES6pew6wMIyCgSXpC')" } /> </div> ); } This piece of code initially appear ...

javascripthtmlreactjs

Tips for incorporating a PDF file into a website when the Adobe Reader add-on is disabled in Internet Explorer

I attempted to insert a PDF into my website using the <embed> tag. Unfortunately, it doesn't seem to be functioning properly in Internet Explorer when the Adobe Reader add-on is disabled. Is there a solution that will allow it to work even if th ...

javascriptjqueryhtmlcss

Invoke the parent method within the child application

I have a checkbox on the child app controller. When the user clicks it, I need to call a method from the parent controller: Parent app controller: <div ng-controller="ParentCntr as parentCntr"> <child-app></child-app> </div> C ...

javascripthtmlangularjs

Struggling with CSS button hover effect: can't get border and background change to work

Hello coding community! I am a beginner in programming and I'm eager to learn. Recently, I came across a stunning button effect on Codepen that caught my attention. You can check it out here. However, when I tried to replicate the code from this exam ...

htmlcssbutton

Replace character within a table using jQuery

Below is the table content: <table> <tr> <td>"James"</td> <td>"do"</td> <td>"you</td> <td>"like</td> <td>"your life"</td> </tr> </table> <butt ...

javascriptjqueryhtml