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!
|
|
