Welcome to WebmasterWorld Guest from 54.167.157.241

Forum Moderators: incrediBILL

Message Too Old, No Replies

Unordered List display

     
8:37 pm on Nov 5, 2011 (gmt 0)

Preferred Member

5+ Year Member Top Contributors Of The Month

joined:Aug 30, 2007
posts: 621
votes: 3


Can anyone help?

I have an unordered list of the type

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

In front of each name I have a bullet point showing - which I quite like...

However... within my list I would also like to be able to add a vertical line-space without the bullet point showing as below.. is this possible and how do I do it? it doesn't like me adding a <br />

<ul>
<li>Drinks</li>
<li>Tea</li>
<li>Milk</li>
<li> </> (I would like this to NOT show a bullet point...
<ul>
<li>Food</li>
<li>Biscuits</li>
<li>Bread</li>
</ul>

</ul>
9:15 pm on Nov 5, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 24, 2002
posts:894
votes: 0


A suggestion:

<ul>
<li>Drinks</li>
<li>Tea</li>
<li>Milk</li>
<P>
<ul>
<li>Food</li>
<li>Biscuits</li>
<li>Bread</li>
</ul>

</ul>
10:57 pm on Nov 5, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2194
votes: 25


A <br> or <br /> (2 if necessary) may be better than a <p>
<li>Milk</li>
<br />
<li>Food</li>

Another option is add a style to the <li> you want space below:
<li style="margin-bottom: 10px;">TEXT</li>
11:36 pm on Nov 5, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13543
votes: 404


The <br> or <br /> or <p> or whatever you use has to be inside the preceding or following <li> unless you open and close the whole <ul>. (Lists behave like tables in this respect. They're a closed system ;))

Or you could say something like

li.break {margin-bottom: 1em;}
12:00 am on Nov 7, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Oct 19, 2011
posts: 52
votes: 0


the most fine way is to use css to display any kind of style to your page elements. if you do not want to display the bullet define ul as
ul {display:none}
for the li element just define
ul li {line-height:20px} the 20px could be any value that you think is suitable for keeping the line height. if you want a line to separate the li elements you can use in li border-bottom:1px solid #030303 or whatever color you want to show.
12:10 pm on Nov 7, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Hi Gemini, there should be no need to introduce another element for this: I'm not quite sure I understand your exact HTML structure. But for this:
<ul>
<li>Drinks</li>
<li>Tea</li>
<li>Milk</li>
<li class="nobullet"> </> (I would like this to NOT show a bullet point... <--don't close the </li>
<ul>
<li>Food</li>
<li>Biscuits</li>
<li>Bread</li>
</ul>
</li> <--- close <li> here
</ul>
adding the .nobullet class and the style rule .nobullet {list-style-type:none) should do it.

However note that means the nested list is sort of "hanging" with no connection to the main list. So another way would be:
<ul>
<li>Drinks</li>
<li>Tea</li>
<li>Milk <--don't close the </li>
<ul>
<li>Food</li>
<li>Biscuits</li>
<li>Bread</li>
</ul>
</li> <--- close <li> here
</ul>
That makes a direct connection between the sub-list and the item in the main list, and you can use
li ul {margin-top:1em/*adjust to suit*/}
(or even the adjacent sibling selector li + ul)
12:18 pm on Nov 7, 2011 (gmt 0)

Preferred Member

5+ Year Member Top Contributors Of The Month

joined:Aug 30, 2007
posts: 621
votes: 3


Okay.. I have gone with this.. and it displays okay...
<ul>
<li>milk</li>
<li>tea</li>
</ul>
<ul style="list-style:none">
<li>Biscuits</li>
<li>Cheese</li>
</ul>
12:40 pm on Nov 7, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Great you have a solution that works Gemini - but note that removes the bullet from the whole of the second list, rather than removing the bullet from just the list-item that contains the nested list.
1:06 pm on Nov 7, 2011 (gmt 0)

Preferred Member

5+ Year Member Top Contributors Of The Month

joined:Aug 30, 2007
posts: 621
votes: 3


There are some great suggestions here that can be implemented for different lists. Thanks!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members