Welcome to WebmasterWorld Guest from 54.145.44.134

Forum Moderators: incrediBILL

Message Too Old, No Replies

Unordered List display

     

Gemini23

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

5+ Year Member



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>

Staffa

9:15 pm on Nov 5, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>

Marshall

10:57 pm on Nov 5, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>

lucy24

11:36 pm on Nov 5, 2011 (gmt 0)

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



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;}

zabalex

12:00 am on Nov 7, 2011 (gmt 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.

alt131

12:10 pm on Nov 7, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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)

Gemini23

12:18 pm on Nov 7, 2011 (gmt 0)

5+ Year Member



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>

alt131

12:40 pm on Nov 7, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.

Gemini23

1:06 pm on Nov 7, 2011 (gmt 0)

5+ Year Member



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