Adding a Dotted Line Trail After Menu Description

Adding a dotted line trail after menu description

The best solution is this:

<ul>
    <li><p class="food">Chinese Food</p><p class="price">$5.99</p></li>
</ul>

then CSS to match (untested, but tweakable to get the effect)

li {
    width: 300px;
    height: 20px;
    border-bottom: 1px dotted black;
    background-color: white;
}

.food, .price {
    height: 22px; //key: just a bit taller than the LI
    background-color: white;
}

.food {
    float: left;
}

.price {
    float: right;
}

So it basically fixes the rectangle of the LI and draws a border on the bottom, then the price and food name cover it up dynamically with their width. YMMV with browsers, but perhaps a negative margin-bottom will get the li border-bottom obscured for sure by the P elements.

I want to create an ordered list with dotted lines, indicating the size of the file. How do?

I would do it in pure CSS

DEMO http://jsfiddle.net/kevinPHPkevin/j6JWT/252/

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt span:after { content: " .................................................................................." }

EDITED

Another solution is by using position absolute, still pure CSS

DEMO http://jsfiddle.net/kevinPHPkevin/nDNsW/

ol {
    list-style:none;
}
li {
    width: 400px;
    position:relative;
     border-bottom: thin black dotted;
    padding:10px 0;
}
.pdf {
    position:absolute;
    right:0;
    bottom:-17px;
}
.one {
    position:absolute;
    left:0;
    bottom:-17px;
}
span {
    background:#fff;
    display:block;
    margin-bottom:13px;
}

Create dotted trail after div when moved

I've created a sample with animation that you will need. Here's how it's done:

Create orange dots with radial gradient background and repeat it:

background: radial-gradient(circle, orange 5px, transparent 5px) 15px 0;
background-size: 20px 10px;

Rotate the element:

transform: rotate(-45deg);
transform-origin: 0 0;

When back circles fly out, change element width, use transition to make it smooth. In my example I've used animation, but there is no big difference.

transition: width 2s;

How do I make a dotted/dashed line in Android?

Without java code:

drawable/dotted.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">

    <stroke
       android:color="#FF00FF"
       android:dashWidth="10px"
       android:dashGap="10px"
       android:width="1dp"/>
</shape>

view.xml:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:src="@drawable/dotted"
    android:layerType="software" />

Effect:

Linear-gradient to produce dashed lines

Apparently, the browser thinks that it doesn't have to do any anti-aliasing for this gradient, since there is a sharp cutoff point between the colors. So, no gradient effect!

(The effect isn't the same in all browsers, by the way; Chrome seems to suffer the most.)

Solution: don't use 50% for both color breaks, but leave just the smallest amount between them, to create a actual gradient from color to color. Half a percent will do.

.lines {  height: 4em;    background: -webkit-linear-gradient(left top, #ffe1d9 49.75%, #989cdb 50.25%);  background: -moz-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%);  background: -o-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%);  background: linear-gradient(to bottom left, #ffe1d9 49.75%, #989cdb 50.25%);}

<div class="lines"></div>

CSS Not Working with Wordpress Custom Menus

Your navigation wrapper has a class of "active" but in your css you are targeting an ID.

Option 1

Change #access to .access

Option 2 (which might be easier)

Change <div class="access"> to <div id="access">

Working example

---

Related Topics