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.
Related
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!
I am having trouble finding out what the i means in the css below. Can someone please explain to me it's purpose and why use it? Thanks.
.social li a:hover i {
}
There exists an i tag in html
According to http://www.htmlquick.com/reference/tags/i.html
The HTML i element makes its content rendered in italic font style. The presentational nature of this element makes it a good candidate for deprecation in future versions of HTML, so the general recomendation is to stop using it.
It is actually just the tag to make things italic. like this
This piece of css affects all italic text in the link where you hover over.
Consider :
<ul class="social">
<li>
This is a <i>sample</i>
</li>
</ul>
This : .social li a:hover i { } will focus on sample in the above eg.
DEMO : http://jsbin.com/UcotesUj/1/ Hint : Try hovering your mouse over the text sample and see the magic..:)
Explanation:
The above selector means
Select any element having class of .social and than further select nested li element and than further select the a tag which is nested inside li and then on hover apply the properties to i tag which is nested inside that a element.
So the selector targets the i element which is used for making the text italic in your HTML
<i>Hey, this is italic</i>
In CSS, any token that begins with a letter means that tag. So i matches the <i> tag, which is used for italic elements.
I have a tab system built in css using unordered lists and list items. I would like to embed a second tab structure using the same visual style within my content region. I was able to do that and everything functioned, but there is an appearance issue. Within my content region I have a different set up ul definitions. I would essentially like to tell one div to follow half of the instructions defined in the content region. The spacing and that type of formatting is needed, but I would like the ul stuff ignored.
If anyone has experience in this, I will gladly supply any needed code. I didn't want to post a bunch of stuff that didn't assist in solving the problem though.
Thanks for your help
You need to specifically target the lis and uls only in your content and override values you dont want or change.
If your content is in a wrapper called #content, and the tabs are called .tabs then do
#content .tabs {
background-image:none;
margin:0px;
}
and so on, setting the values you need.
How are the tabs styled? Use the exact same selectors but put a selector in front of them, like the content wrapper so you can target them specifically.
Hard to give you an exact answer without any code.
Apply an "un-reset" CSS block to your content region.
See: https://github.com/jbcrawford/Un-ResetStylesheet
or: http://noscope.com/vanilla-css
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.
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.