I would like to build a tree like navigation interface in pure markup (that is, without needing javascript/jquery etc.).
Unordered lists <ul> seem like the best solution, and I have found this tutorial on simplebits.com is very close to the solution I need. However, the author defines the stylesheet with the assumption that the final/max depth of any branch is already known:
#sitemap li ul li ul li {
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}
I want to know if there is way to allow the markup to descend "infinitely" and have the styling support this seamlessly.
If you need more clarification on this, please just let me know.
There are tutorials on this but there are two problems:
IE6 doesn't support :hover on tags other than anchors so you need a Javascript solution for that browser; and
It's actually really complicated to get it working consistently across the major browsers.
Consider the alternative using jQuery and the superfish (inspired by suckefish) plug-in:
<ul class="menu">
<li>...
</ul>
<script type="text/javascript">
$(function() {
$("ul.menu").superfish();
});
</script>
Done.
If you do go the (semi-)pure CSS route, I highly recommend you use one of the existing frameworks for this (like suckerfish or a derivative). Otherwise you'll just be pulling your hair out and spending a lot of time to get it to work right.
To answer your question about depth: that rule you mentioned essentially is going to infinite depth. Remember a space in CSS is a descendant selector not a child selector. The reason for the repeated groups is so that the rule only applies from (say) the third level down.
That's because the first and second levels will have special stylings. The first will be a horitzontal or vertical bar. The second will popout from that but from the third level down it will consistently popout in the same way.
the markup you supplied should work for any further elements without having to specify them directly.
for example:
#sitemap li {} -->level 1 and under
#sitemap li li {}--> level 2 and under (overrides previous rule)
#sitemap li li li {}--> level 3 and under (overrides previous rule)
so the last rule would automatically be applied to levels 4, 5, 6 and beyond.
unless you want specific styling for ALL levels, then you should be fine.
How about assigning a class to the unordered list elements?
#sitemap li.tree
{
padding-left: 16px;
}
I don't see why this would not work but correct me if I'm wrong.
Related
How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?
The post is here: http://alexisexhibits.com/trade-show-preparation-checklist
The CSS I have for the style is:
.checklist {
list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}
I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.
The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:
.shortcodes ul li {
list-style: disc;
}
but I'm hesitant to change that as I don't want all ul li to change, just this specific one.
What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?
list-style-image should be applied to the <li> not the <ul>
Like this:
.checklist li{
list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}
The ul tag is very generic and something I continually struggle with.
Initially I had a base style rule defined for my ul and li tags to handle bullet points in my generic text blocks for WYSIWYG text.
I am using BEM so I figured I would just add a class to any ul which had a different role (say a menu, or a list of news thumbnails, etc.)
The problem is that I don't always have control over the markup; my current problem is a pagination plugin which uses a ul/li structure but doesn't allow me add a class to the ul.
I am using BEM so I don't really want to use descendant selectors, and especially element selectors, but I realise I will probably need to do so when I don't have access to the ul/li markup.
Any advice would be appreciated - especially with base/rest rules, as I have ul/li lists all over the place in so many sites and once and for all want to master this problem.
Thanks
A solution:
Reset the styles for ul/li with a CSS reset;
Make an exception in your BEM principles, and use a cascade for the formatted text. Example:
CSS:
.text ul {
list-style: circle;
}
.text li {
margin: .5em 1em;
}
.text p {
margin-bottom: 1em;
}
/* etc. */
HTML:
<div class="text">
<p>Here all the text is formatted</p>
</div>
I agree with #Tarh
So this comes up with WordPress theme dev all the time. All content areas get generic element that you can't attach classes too. So you have two solutions here:
Like Tarh describes above, you use a reset to kill all styles on UL/LI, and you only use BEM for styling them through out your site. But when you reach the content areas that don't allow you to add classes to elements, you just wrap the whole content area in a div with the BEM class of your liking, and you follow the steps above.
2.In WP there is a little know way to handle this, but it requires writing some functions. You can read about how to do this here. Basically, you make the hidden formatting dropdown visible, then you hide the default "paragraph/heading" dropdown hidden. Then you can format generic elements however you want. Like:
array(
'title' => 'Large heading',
'block' => 'ul',
'classes' => 'content__list'
)
But I don't know if you are actually referring to WP stuff, so I'm just going to end this here.
Best of luck! Stay awesome!
My website has two different css style documents. The first is specifically for the index page, which uses lists to do the tabs at the top for a link bar between the title and the rest of it. This has the code:
index.css:
u1
{
list-style-type:none;
}
along with some code which applies to the li elements.
The other css document is for the rest of the site. I want to use lists for some of the other parts, but I'm having an issue. While the li elements are overwriting properly, I can't get u1 element to show the bullets in the rest of the site. I've tried using u1.a and u1.b , but that doesn't fix it.
main.css:
u1
{
list-style-type:circle
}
Try overwriting it by adding !important
u1
{
list-style-type:circle!important;
}
and/or add another CSS file with just this rule to the page you want to be different.
The element is ul as in UL not u1 and in u-one. I assume this is not a typo of the code because it's all over the place in your question.
CSS work by cascading and specificity. Having list style apply to other elements of your site might be as simple as adding a class:
ul.circle {
list-style-type: circle;
}
and then adding the same class to your element in the HTML document, as such:
<ul class="circle"></ul>
There are many different ways to override CSS, and I described them in an answer of sometime ago, but in your case this should be the easiest.
sorry to probably reiterate what was already said, but if you wanted to make your 'u-one' class, you should prepend a dot to it, so it is either a class:
.u1 {list-style-type: circle;}
And you will use it as a usual class, ie
<ul class="u1"> <li></li> </ul>
or use ul [UL] as a tag:
ul {list-style-type: circle;}
and all your UL lists will have this formatting.
The way you put it in your css will not work with html because the 'u1' tag does not exist.
But I'll need to see a snippet of your html to be sure.
in the process of updating my html to html5, i noticed that the inheritance behaved a bit strange. i'm not sure why links in the ul li lists have matched css rules with blocks that have nothing to do with it.
eg in screenshot 1 (aside), it takes over styles from the footer (but out of the screenshot also from role=navigation)
in screenshot 2 (footer), it takes of styles from the aside (and also from the screenshot also from role=navigation)
why does it do so?
In you first screenshot the css that gets applied is used on #footer #footerGrid ul li a, a:link,a:visited. By seperating this with comas you are having 3 different css selectors:
#footer #footerGrid ul li a
a:link
a:visited
So this gets applied to the footer section, but also triggers on a:link and a:visited. And the same goes to your 2nd screenshot vice versa !
documentation for that:
http://msdn.microsoft.com/en-us/library/aa358833%28v=vs.85%29.aspx
Note When grouping selectors, remember that the comma starts an
entirely new selector from the beginning.
I have li already styled in a stylesheet. I need it to stay a specific style. It is styled without using a class, so for example
.selectors{width:50px;}
li{
padding:10px;
}
Now i have run into a problem. I am trying to style the li again, without any classes like what i have in the example code. For example
.options {width:30px;}
li{
padding:50px;
}
What i was wondering is, is there any way to attach certain elemnts to another element. I'm not sure if this is making any sense, but I am trying to have one LI only be applied to a certain part of the page, and the second be applied to another part of the page. Is this possible without using classes? I can't modify the code or add classes otherwise the script doesn't work. Can someone help if I am making any sense at all.
A very common way to do this is
#content li { ... }
#sidebar li { ... }
so the li will behave differently inside two different elements with different IDs. Say, if content is a div, and sidebar is a div, then the li will behave differently inside these two divs.
It is also possible to be "within a class":
.items-to-watch-out-for li { ... }
This is a good way to avoid "too many classes", which is called "classitis", like in this article:
http://www.ehow.com/how_2284990_classitis-html-css-descendant-selectors.html
It's never going to be the nicest way if you can't add classes.
Potentially if the uls are in the same container you could try:
ul:first-child li {}
This will allow you to style the first ul however you want then the generic:
ul li {}
Will take care of the second.
This method should work in all browsers apart from IE6.
http://www.quirksmode.org/css/contents.html#t17
動靜能量 solution is the ideal way.