custom lists lo lu with sublevel using pure css/css3 WordPress
Hi there,
Site....: http://www.urimagnation.com
Issue..: the custom lu list would work on at simple first level list but not at sub level, also the lo doesn't seem to be working either I've create a example page http://www.urimagnation.com/knowledge-sharing/tutorilas-css-php-thml-more/ showing the issue.
Here is what I found in the style.css
#page_section_full{ }
#page_section_full .redbull{list-style-type: disc; color:red; margin-bottom: 15px; }
#page_section_full ul.redbull li span{ color:#707070;}
the ul and ol won't work even when using just plain
The code list definitions above:
<div style="padding-left: 39px; padding-right: 29px;">
<ul class="redbull">
<li><span>Technology Plan For:</span></li>
<ol><h4>using ol to start sub-list with numbers</h4>
<li><span>city1</span></li>
<li><span>city2</span></li>
<li><span>city3</span></li>
</ol>
</ul>
<ul class="redbull">
<li><span>Main list Country1</span></li>
<ul class="redbull"><h4> sub list: Cities</h4>
<li><span>City1</span></li>
<li><span>City2</span></li>
<li><span>City3</span></li>
</ul>
<li><span>First leve list Country2</span></li>
<ul class="redbull"><h4>sub list: Cities</h4>
<li><span>City1</span></li>
<li><span>City2</span></li>
</ul>
<li><span>First leve list Country3</span></li>
</ul>
</div>
<div style="padding-left: 39px; padding-right: 29px;">
Using strait ol ul
<ul>
<li>Technology Plan For:</li>
<li>Technology Plan For:</li>
<li>Technology Plan For:</li>
</ul>
<br>
<ol><h4>using strait ol to start list with numbers</h4>
<li>city1</li>
<li>city2</li>
<li>city3</li>
</ol>
</div>
Answers (3)
designchemical answers:
The styling is only applied to the element that has the redbull class. To add sub-lists use:
#page_section_full .redbull, #page_section_full .redbull ul, #page_section_full .redbull ol {list-style-type: disc; color:red; margin-bottom: 15px; }
Alf Baez comments:
dchemical,
Tried your solution, did not work. Aslo tried to splited into:
....
#page_section_full .redbull, #page_section_full .redbull ul {list-style-type: disc; color:red; margin-bottom: 15px; }
...
#page_section_full .redbull ol {list-style-type: decimal; color:red; margin-bottom: 15px; }
...
Did not worked either.
Christianto answers:
Hi,
ordered or unordered List can only contain list <li> to be render correctly across browser.
so if you have any other ordered/unordered list you have to wrap it inside <li>
so for example on your code and on your site, this is not correct:
<ul class="redbull">
<li><span>Main list Country1</span></li>
<ul class="redbull"><h4> sub list: Cities</h4>
<li><span>City1</span></li>
<li><span>City2</span></li>
<li><span>City3</span></li>
</ul>
<li><span>First leve list Country2</span></li>
<strong><ul class="redbull"><h4>sub list: Cities</h4>
<li><span>City1</span></li>
<li><span>City2</span></li>
</ul></strong>
<li><span>First leve list Country3</span></li>
</ul>
This is correct:
<ul class="redbull">
<li><span>Main list Country1</span></li>
<ul class="redbull"><h4> sub list: Cities</h4>
<li><span>City1</span></li>
<li><span>City2</span></li>
<li><span>City3</span></li>
</ul>
<li><span>First leve list Country2</span></li>
<strong><li>
<ul class="redbull"><h4>sub list: Cities</h4>
<li><span>City1</span></li>
<li><span>City2</span></li>
</ul>
</li></strong>
<li><span>First leve list Country3</span></li>
</ul>
Let me know if it fix your issue..
Christianto comments:
There is also style for ordered list that should be overide on reset.css
ol, ul {
list-style: none;
}
For example
#page_section_full ol{ list-style-type:decimal }
Alf Baez comments:
Chris,
in combination with Raj's solution the line:
#page_section_full .redbull ol {list-style-type: decimal;}
Resolve the numbers issue for the list. child sub/indent list issue is still a problem.
Christianto comments:
Hi,
sorry its midnight when I answered your question.
for indent add margin-left for your list
#page_section_full .redbull, #page_section_full .redbull ul, #page_section_full .redbull ol {
list-style-type: disc;
color: red;
margin-bottom: 15px;
<strong> margin-left: 20px;</strong>
}
if you prefer to only indent child element of unordered/ordered list add:
#page_section_full .redbull > ul, #page_section_full .redbull > ol{
margin-left:0
}
Manoj Raj answers:
//ol won't work even when using just plain
add this at the end of your css
.redbull ol {list-style-type: decimal;}
You missed the above thing it seems.