homepage Welcome to WebmasterWorld Guest from 107.20.37.62
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Unordered List display
Gemini23




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

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




msg:4383891
 9:15 pm on Nov 5, 2011 (gmt 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>

Marshall




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

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




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

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




msg:4384249
 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




msg:4384366
 12:10 pm on Nov 7, 2011 (gmt 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)

Gemini23




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

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




msg:4384375
 12:40 pm on Nov 7, 2011 (gmt 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.

Gemini23




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved