i have the following css:
.navi-live ol{
margin:0;
padding:0;
list-style-type: none;
}
.navi-live li{
margin:0;
padding:0px;
list-style-type: none;
}
.navi-live ol .nav-item-contents{
padding-left:20px;
}
.navi-live ol ol .nav-item-contents{
padding-left:40px;
}
.navi-live ol ol ol .nav-item-contents{
padding-left:60px;
}
.navi-live ol ol ol ol .nav-item-contents{
padding-left:80px;
}
.navi-live ol ol ol ol ol .nav-item-contents{
padding-left:100px;
}
This works (I dont want to indent the li or ol but indent the content as if the li and ol are indented), but limits me to the number of css rules I have created.
How do i do the above without the limitation of having to create a new rule for every new indentation level i want to support?
jsfiddle: http://jsfiddle.net/k4hjp/1/
Thanks,
You should just be able to do a simple select of all the nav-item-content divs, iterate through each one while incrementing the padding variable.
jsfiddle
//put this inside a function and call it when you want to append to the navigation
var padding = 20;
$('.nav-item-contents').each(function(){
$(this).css('padding-left',padding+'px');
padding+=20;
});
EDIT
Added a demonstration of how to append children: jsfiddle.
Related
I'm not sure if I formulated the question correctly, but let me try to explain what I want to achieve.
I'm trying to style navigation menu of a WordPress-based site.
I want the submenu links to be evenly arranged along the entire width of the website's <body> tag (960px wide). If the links of a particular submenu do not fit in one row, I want them to wrap around and arrange themselves in neat columns.
Finally, I want the submenu, when it drops down on hover, to push the rest of the website's content down.
Problem: the submenu unordered list affects the position of the links in the parent unordered list, moving the links around. Somehow, the only thing I could do to keep the parent menu links in place was to pull the submenus out of the way by applying margin-right:-965px;
Question: How should I modify my CSS to position both submenus all the way to the left, level with the edge of the main container?
(If necessary, I can assign custom classes to each submenu separately, for example: .submenu-about and .submenu-investors.)
Thank you in advance for your help!
Here's the complete CSS for the navigation menu:
.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
This Should do it
Add this to your css
.main-navigation ul li .sub-menu {position:absolute; left:0px;}
Found my own answer.
Remove the background from ul li:hover ul.
Set position:relative and the gray background for the ul li:hover >ul li.
Set individually the negative left margins for each submenu li item, to pull them left separately by different number of pixels.
I would like to fix my CSS counter so it resets on each occurrence of OL or UL top level parent. Nested OLs should not reset the counter, but it should reset only for each instance of top level OL or UL.
The css that is likely the problem:
section.post-content ol {
counter-reset: item;
}
You cann't target specifically top level elements (I think).
Instead, target all ol (as you have already), and to avoid reseting counter on non top level ol , create another rule:
ul ul {counter-reset: none}
ol ul {counter-reset: none}
see the result:
http://jsfiddle.net/rjqgz/
EDIT for solution: http://jsfiddle.net/rjqgz/2/
Here is the CSS for styled numbers and colored bullets in lists (etc). I included the html sections because this will work in Wordpress for creating outline numbering, and because it's easier to just style the content lists and unstyle all the rest of them.
section.post-content ol, section.post-content ul {
counter-reset: item;
}
section.post-content ul ol {counter-reset: none}
section.post-content ol ul {counter-reset: none}
section.post-content li {
display: block;
}
section.post-content ol > li {
position:relative;
list-style:none; }
section.post-content ol li:before {
counter-increment: item;
content: counters(item, ".") " ";
position:absolute;
top:-.05em;
left:-3.7em;
width:3em;
height:.9em; line-height:1em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
font-style:italic; font-size:1.02em; font-weight:bold;
font-family: Cambria, Cochin, serif;
opacity:.5;
text-align:right;
}
section.post-content ul > li {
position:relative;
list-style:none;
}
section.post-content ul > li:before { /* Position and style the bullet */
content:'\00B0'; /* CSS Special Character Converter: http://www.evotech.net/articles/testjsentities.html */
position:absolute;
top:-.1em;
left:-.75em;
width:.6em; height:1em; line-height:1em;
margin-right:8px;
padding:4px;
font-size:2.08em;
font-family: Cambria, Cochin, serif;
opacity:.4; /* If you want to change color instead, place in header.php */
text-align:center;
}
/* MARGINS */
/*mobile*/
section.post-content ol, section.post-content ul, section.post-content li { /*children indent*/
margin:0; padding:0; }
section.post-content ol > li, section.post-content ul > li {
margin:0 0em .3em 1em; }
#media only screen
and (min-width : 700px) {
section.post-content ol, section.post-content ul { /*children indent*/
margin:0; padding:0;
margin-left:2em;
}
section.post-content > ol, section.post-content > ul { /*parent*/
margin-left:0; padding-left:0; }
section.post-content ol > li, section.post-content ul > li {
margin:0 0em .3em 2em;
}
}
This might be painfully easy, so my apologies in advance, but I'm on Hour 5 trying to figure this mess out. Here's the UL I'm trying to present as a horizontal bar:
<div id="navbarwrapper">
<ul id="navbar">
<li>Search</li>
<li>Tips</li>
<li>Neighborhoods</li>
<li>Relocation</li>
</ul>
</div>
And here's the strange CSS that seems to malfunction:
#navbar {}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li {display: inline;}
#navbar ul li a {text-decoration:line-through;}
The problem I'm having is that with this markup, the text wrapped in anchor tags in the HTML aren't receiving line-through (I'm using line-through as a placeholder because it's obvious when it's working or not; I don't actually want a line-through in the end).
Here's the strange bit. If I replace the "#navbar ul li a" nest with the following, it works:
#navbar li a {text-decoration:line-through;}
Furthermore, if I change "#navbar li{display: inline;}" with the following, I lose the inline property:
#navbar ul li{display:inline;}
Is it because I'm duplicating with "#navbar" and "ul"? It seems entirely too strange to me, and I feel as though I've been able to use this syntax in the past without error.
Thanks for the help in advance.
Your ul already have id of navbar. That's why #navbar ul doesn't match anything.
ul#navbar will match.
Your selectors are not correct.
#navbar is the UL element itself, so the selector #navbar ul does not target anything.
The correct selectors are
#navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li { display: inline; }
#navbar li a { text-decoration:line-through; }
#navbar ul is wrong...#navbar is the ul itself.
Your <ul> has the ID #navbar, so with #navbar ul you are actually addressing an additional ul inside your ul.
Try
ul#navbar li a {text-decoration:line-through;}
In a global style sheet used across all of our pages sits the following line:
ul { margin: 0; }
li { list-style-type: none; padding-bottom: 3px; }
Therefore, any ul's inside my pages render with no discs next to li's.
However, in special cases, I need to display the disc next to a li.
I have a div with the class "blog-post" and though that the following would do the trick for me.
.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }
However this isn't doing the trick.
So with the following snippet of HTML
<ul>
<li>Testing</li>
</ul>
<ol>
<li>Testing</li>
</ol>
Results with:
Testing
1. Testing
Still no disc in the li's nested in the ul's. Thoughts on how I can get them there? My CSS-fu is weak....
!important is not necessary because class-specific styles override global styles already. The problem is because in the global style you set the margin to zero. The style type is being rendered correctly, but you just can't see it. This should work for you:
.blog_body ul
{
list-style-type: disc;
margin: 1em;
}
Change this:
.blog_body ul { list-style-type: disc; }
.blog_body ol { list-style-type: decimal; }
to this:
.blog_body ul li { list-style-type: disc; }
.blog_body ol li { list-style-type: decimal; }
I am using YUI reset/base, after the reset it sets the ul and li tags to list-style: disc outside;
My markup looks like this:
<div id="nav">
<ul class="links">
<li>Testing</li>
</ul>
</div>
My CSS is:
#nav {}
#nav ul li {
list-style: none;
}
Now that makes the small disc beside each li disappear.
Why doesn't this work though?
#nav {}
#nav ul.links
{
list-style: none;
}
It works if I remove the link to the base.css file, why?.
Updated: sidenav -> nav
I think that Dan was close with his answer, but this isn't an issue of specificity. You can set the list-style on the list (the UL) but you can also override that list-style for individual list items (the LIs).
You are telling the browser to not use bullets on the list, but YUI tells the browser to use them on individual list items (YUI wins):
ul li{ list-style: disc outside; } /* in YUI base.css */
#nav ul.links {
list-style: none; /* doesn't override styles for LIs, just the UL */
}
What you want is to tell the browser not to use them on the list items:
ul li{ list-style: disc outside; } /* in YUI base.css */
#nav ul.links li {
list-style: none;
}
The latter example probably doesn't work because of CSS specificity. (A more serious explanation can be found here.) That is, YUI's base.css rule is:
ul li{ list-style: disc outside; }
This is more 'specific' than yours, so the YUI rule is being used. As has been noted several times, you can make your rule more specific by targeting the li tags:
#nav ul li{ list-style: none; }
Hard to say for sure without looking at your code, but if you don't know about specificity it's certainly worth a read.
In the first snippet you apply the list-style to the li element, in the second to the ul element.
Try
#nav ul.links li
{
list-style: none;
}
shouldn't it be:
#nav ul.links
Maybe the style is the base.css overrides your styles with "!important"? Did you try to add a class to this specific li and make an own style for it?
Use this one:
.nav ul li {
list-style: none;
}
or
.links li {
list-style: none;
}
it should work...