I have a template I am modifying. It links to a stylesheet that the following code to manipulate unordered lists.
ul {
float: left;
margin: 0 40px 16px 0;
padding: 0;
list-style: none;
}
I have a separate style sheet that has the following:
.featured_list ul {float: none; list-style: circle; list-style-position: inside;}
.featured_list li {margin: 5px;}
In my HTML code I reference my class like this
<ul class="featured_list">
Can anyone please tell me why my list is still set to float left tag? Thanks for any help.
For this markup
<ul class="featured_list">
you should be selecting it as
ul.featured_list {
styles here
}
You want this:
ul.featured_list
That is a ul with the class featured_list. Your selector is for a ul contained within an element with class featured_list.
The issue is with the way you are writing your selector for unordered list as:
.featured_list ul{float:none; list-style:circle; list-style-position:inside;}
This will try to find all ul elements which are child elements of element with class featured_list. Instead of this you can directly use the class name to apply the style to the list as:
.featured_list {float:none; list-style:circle; list-style-position:inside;}
DEMO:
If you cannot change the CSS file, then you want to wrap the ul with .featured_list:
<div class="featured_list">
<ul>...</ul>
</div>
If you can change the stylesheet, then you need to change the styles to:
ul.featured_list {}
Related
I have defined a CSS for my basic document layout:
div#content li {
font-size:95%;
list-style-image:url(/css/bullet_list.gif);
line-height:1.5;
}
deeper down in one document, I'm including a CSS file defining
.codexworld_rating_widget li{
list-style: none;
list-style-image: none;
float: left;
}
but the list element still displays the bullet graphic (bullet_list.gif) as if it would override the list-style-image: none; definition. Does anyone know why?
URL of the HTML document in question: http://www.psychotherapiepraxis.at/artikel/trauma/traumatherapie.phtml , the code in question is at the "Bewertung" section close to the end - the rating stars are covered by the bullets.
Try setting near enough the same elements as the original definition but include the selector.
div#content .codexworld_rating_widget li{
list-style: none;
list-style-image: none;
float: left;
}
This should fix your problem.
You should apply list-style rules to UL(OL) tags and so far you are targeting LI(list item) tags
CSS specificity gives div#content li a value of 102 while .codexworld_rating_widget li gets a value of 11. You need to either add a parent with an ID to .codexworld_rating_widget li or remove the id from div#content li. This specificity calculator can be very handy.
I'm trying to apply a style to all li items as long as that item is not anywhere in a container with a class of .k-widget
.c-w1 ol li :not(.k-widget) { list-style: decimal outside; }
However the style continues to be applied. The .k-widget is on a div that contain divs that contain the actual li I don't want styled.
<div class="k-widget">
<Lots of Things>
<li> ....
Should be something like that:
div:not(.k-widget) .c-w1 ol li {
list-style: decimal outside;
}
Of course the :not() has to be applied on the div which is before the li as allready stated by Marijke Luttekes.
Also have a look at caniuse for browser support of css3 selectors.
Another possibility would be to tell the .k-widget contents to inherit its styles with list-style: inherit;. So you can override it without using a specific value and adding redundance to your styles:
div .c-w1 ol li {
list-style: decimal outside;
}
div.k-widget .c-w1 ol li {
list-style: inherit;
}
Currently the list style is applied to any item inside a li that does not have the class .k-widget applied. If I understand your problem correctly, you can easily fix this by placing the statement :not(.k-widget) before li.
The problem is that the :not() selector on a parent will match if any parent matches, and since all li elements are within both body and html, all li elements will match.
I would recommend constructing two styles, one overriding the other.
.c-w1 ol li { list-style: decimal outside; }
And
.c-w1 .k-widget ol li { override style here }
See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo
I am currently having trouble with wrapping my head around the idea of class and id selectors. Posted below is my current markup for my navigation. What I am trying to achieve in my css stylesheet is the horizontal menu.
Why can I not target .navigation-menu to style everything within this class (.navigation-main)?
<nav class="navigation-main">
<ul class="menu">
<li class"home">Home</li>
<li class"submit">Submit a Pic</li>
<li class"advertise">Advertise</li>
<li class"contact">Contact</li>
</ul>
</nav>
CSS
.navigation {
display:inline;
}
You are not targeting the elements:
.navigation-main li{
display:inline;
}
You're looking for this:
.menu li {display:inline;}
according to the question its because you apply the css on the class navigation which is not used you need to include this class to apply the css
try
.navigation-main li {
display:inline;
}
It seems like you might be confused about how CSS selectors work. A class needs the same name as it's definition to actually match.
HTML
<div class="my-class"></div>
CSS
.my-class
{
...
}
So, to answer your question (as it is currently), why you can not target .navigation-menu to style everything within .navigation-main. It is because your CSS class .navigation does not match any classes in your current HTML
To style your NAV with class="navigation-main":
CSS
.navigation-main
{
...
}
To style only a UL with class="menu" that is inside a NAV with class="navigation-main":
CSS
.navigation-main .menu
{
...
}
To style all the elements within NAV class="navigation-main"
CSS
.navigation-main *
{
display:inline;
}
I would like to be able to set the property list-style-type: none; on all li elements that contain a major header (<h1>, <h2> and <h3>).
At first I tried this -
li h1,
li h2,
li h3 {
list-style-type: none;
}
But then I realised it wouldn't work, because it is setting the property on the headers, not the list elements.
How can I do this?
You can assign a class to li items which contains header elements and set list-style to none.
For Example:
li.header {list-style:none;}
Try the following:
CSS:
li {
list-style-type: none;
}
HTML:
<ul>
<li><h1>test1</h1></li>
<li><h1>Test2</h1></li>
</ul>