Creating a stylish dotted line separator or infill using CSS

Question

Creating a stylish dotted line separator or infill using CSS

I am currently working on developing a restaurant's website. I have been tasked with incorporating a dotted line infill between each menu item and its corresponding price. Despite spending a considerable amount of time searching online and testing different methods using CSS, I have yet to discover a suitable solution. While I have come across several alternatives that are effective when a solid color background is in use, the website I am working on features a background image, rendering those solutions impractical.

For instance, this menu style solution on Stack Overflow suggests setting the background colors of the menu item and price to white to conceal the dotted lines. However, this approach is not viable for a background image scenario.

Despite experimenting with various CSS display attributes, including table-row and table-cell, as well as adjusting the width settings for different elements, I have been unable to achieve the desired outcome.

Below is a fictional sample markup that I have been working with:

<ul> 
    <li><span>Soup</span><span class="dots">&nbsp;</span><span>$2.99</span></li>
    <li><span>Ice cream</span><span class="dots">&nbsp;</span><span>$5.99</span></li>
    <li><span>Steak</span><span class="dots">&nbsp;</span><span>$20.99</span></li>
</ul>

I have attempted using the "dots" class element with a bottom border to bridge the gap, but my efforts have been fruitless. I also experimented with adding a bottom border to the LI element extending across each row, but this does not align with the designer's vision. As a last resort, I may have to resort to utilizing JavaScript or revert to using tables, though I would prefer to avoid these options if possible.

I would greatly appreciate any insights or suggestions you may have. Thank you!

html css

Answer 1

Answer №1

If you're looking for a creative solution, you might consider something like the following:

Check out this Example Fiddle for reference

This approach involves using a dotted border on the .dots element and adjusting its position slightly upwards.

ul li {
    display:table-row;
    width:15em;
}
ul li span{
  display:table-cell;   
}
.dots{
    min-width:10em;
    position:relative;
    bottom:4px;
 border-bottom:1px dotted #777;   
}

An added benefit of this method is that you don't need to float the elements. However, please note that using display:table-cell may not be compatible with older versions of Internet Explorer (IE8 and earlier).
Depending on the background, an alternate solution using the li-border technique might be suitable, allowing you to integrate the background image directly onto the span-elements instead of solid colors.

Answer 2

If you're looking for a creative solution, you might consider something like the following:

Check out this Example Fiddle for reference

This approach involves using a dotted border on the .dots element and adjusting its position slightly upwards.

ul li {
    display:table-row;
    width:15em;
}
ul li span{
  display:table-cell;   
}
.dots{
    min-width:10em;
    position:relative;
    bottom:4px;
 border-bottom:1px dotted #777;   
}

An added benefit of this method is that you don't need to float the elements. However, please note that using display:table-cell may not be compatible with older versions of Internet Explorer (IE8 and earlier).
Depending on the background, an alternate solution using the li-border technique might be suitable, allowing you to integrate the background image directly onto the span-elements instead of solid colors.

Answer 3

Answer №2

To achieve this layout, one can utilize definition lists as shown in the example below:

HTML:

<div id="wrap">
    <div class="inner">
        <dl>
            <dt>$2.89</dt>
            <dd><em>Lorem ipsum dolor sit amet </em></dd>
        </dl>
        <dl>
            <dt>$21.89</dt>
            <dd><em>In porta nisl id nisl varius ullamcorper</em></dd>
        </dl>
        ...
        <dl>
            <dt>$21.50</dt>
            <dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd>
        </dl>
    </div>
</div>

CSS:

* {margin:0;padding:0}
h1,h2{padding:10px 20px 0}
#wrap{
    ...
}
* html #wrap {width:502px;w\idth:500px;}
#wrap .inner{
    ...
}
* html #wrap .inner{width:500px;w\idth:418px;}
#wrap dl{
    ...
}
#wrap dd{
    ...
}
* html #wrap dd{
    ...
}
#wrap dt{
    ...
}
#wrap dd em{
    ...
}

Click here for more information

Answer 4

To achieve this layout, one can utilize definition lists as shown in the example below:

HTML:

<div id="wrap">
    <div class="inner">
        <dl>
            <dt>$2.89</dt>
            <dd><em>Lorem ipsum dolor sit amet </em></dd>
        </dl>
        <dl>
            <dt>$21.89</dt>
            <dd><em>In porta nisl id nisl varius ullamcorper</em></dd>
        </dl>
        ...
        <dl>
            <dt>$21.50</dt>
            <dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd>
        </dl>
    </div>
</div>

CSS:

* {margin:0;padding:0}
h1,h2{padding:10px 20px 0}
#wrap{
    ...
}
* html #wrap {width:502px;w\idth:500px;}
#wrap .inner{
    ...
}
* html #wrap .inner{width:500px;w\idth:418px;}
#wrap dl{
    ...
}
#wrap dd{
    ...
}
* html #wrap dd{
    ...
}
#wrap dt{
    ...
}
#wrap dd em{
    ...
}

Click here for more information

Creating a stylish dotted line separator or infill using CSS

Answer №1

Answer №2

Similar questions

Intriguing flashing dark streak, reminiscent of a boundary within NextJS

Issue encountered while implementing async functionality in AngularFireObject

Adaptive Table Layout that Creates a Page-breaking Design

How can one determine the dimensions of the browser window using a property?

The People and Groups selection dialog is displaying incorrectly in IE 10

Saving downloaded web pages as an HTML document

Reactjs encountering issues loading css file

Place a "sticky" button directly below a second "sticky" navigation bar

Why is the Material UI React select not selecting all children except for the last one?

Ensuring elements are correctly positioned

What is the best way to ensure a div occupies the full height within a grid layout?

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

Using HTML within a Material-UI Accordion component

Align two span elements to the right using Bootstrap's float-right class

Modify the bootstrap form dynamically in response to the user's input. Update the form layout instantly as the user types, with no need for clicking any buttons

Extracting Data From HTML Document Specifically Targeting Table

The navigation bar text spills over the designated area

Label positioning for checkboxes

The content of InnerHtml does not appear on the screen

What impact do varying screen sizes have on the width of CSS?