I have a simple list that displays fine in a single column. I have "text-decoration: none" set for the list items. When I add column-count: 2, the second column displays bullets. Any suggestions for a fix?
I believe you are looking for this:
list-style-type:none;
That is, as long as you don't want any bullet points on your <li>.
Example:
<style>
/* code to make <li> horizontal horizontal */
/* code to remove bullet points from all <li> inside of <ul> tags*/
ul > li { list-style-type: none; }
</style>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Or you may use the <table> and achieve this as well. Here is a link that may be of interest regarding tables.
https://www.w3schools.com/html/html_tables.asp
Related
I have a nested UL structure that represents a folder tree which can grow very deep. I'm stuck at doing a simple :hover effect for the LI elements. The problem is that doing a li:hover won't work as it affects all the parent "li's" aswell. Usually I would have tried to apply the hover effect to a link element or something in the LI, to avoid parents taking the style aswell, but due to circumstances that's not an option now. I have a working solution by using javascript to place a class on the hovered LI and then style this class instead, but i'm really interested in seeing if there's actually a way of accomplishing this through pure css.
I imagine there may be a way of doing a very "hardcoded" css solution but i am more interested in a dynamic and clean one, since the structure can nest indefinitely.
Maybe there's some pseudo selector i'm not aware of? Note that it doesn't have to be IE<8 compatible
<ul>
<li>
This LI should not recieve the hover effect
<ul>
<li>
A li:hover will place the effect on this LI,
but also the parent LI, since that element is
also techincally being hovered.
</li>
</ul>
</li>
</ul>
If you want to use pure CSS then you will need to us parent, child, elements.
For the hover elements:
ul li:hover{
"Style"
}
For the other elements:
ul li ul li{
"Style"
}
UPDATE: I just reread your question, in which you state:
"Usually I would have tried to apply the hover effect to a link
element or something in the LI, to avoid parents taking the style as
well, but due to circumstances that's not an option now."
If that is true, then the solution below is not viable for your circumstance, and you cannot achieve what you desire with pure CSS. I've left my answer, however, as others who want to achieve this but can use a nested element may find it useful.
Pure CSS Only by Adding HTML
The only way you can possibly achieve something of what you seek by pure CSS is to add an extra element (like a span) within the li and perform the hover on that. I assume that whatever folder is being hovered, that folder alone is what you want to highlight. If so, this fiddle illustrates what I am saying, using this code:
HTML
<ul>
<li>
<span>Folder 1</span>
<ul>
<li>
<span>Folder 1.1</span>
<ul>
<li>
<span>Folder 1.1.1</span>
<ul>
<li>
<span>Folder 1.1.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
li span:hover {
color: red;
background-color: yellow;
}
Now, if you want child folders to also highlight on hover of a parent folder, then perhaps this fiddle illustrates what you want with this code change:
CSS
li span:hover,
li span:hover + ul span {
color: red;
background-color: yellow;
}
They key point is to utilize the extra element to control the hover, whether of the item itself or any later generation elements that the hover should affect.
Not clear at all... but if you want to style nested LI when you are hovered the parent LI without styling the parent one...
Try this:
CSS
ul li ul li {
color: blue
}
ul li:hover ul li {
color: red
}
fiddle example: http://jsfiddle.net/EHp3n/
Your question is not very clear and also it will confuse. Let me explain, when the user hover the city (India / China / UK), style should be applied to State and Country through CSS.
<ul>
<li>India (Apply Style)
<ul>
<li>India State (Apply Style)
<ul>
<li>India City (On Hover)</li>
</ul>
</li>
</ul>
</li>
<li>China
<ul>
<li>China State
<ul>
<li>China City</li>
</ul>
</li>
</ul>
</li>
<li>United Kingdom
<ul>
<li>UK State
<ul>
<li>UK City</li>
</ul>
</li>
</ul>
</li>
</ul>
I created a box in css and put text inside of the box. I would like it to be a list. However, when I try to use it messes up the formatting of the entire page. I also tried the solution here: CSS list-style-type not working, but that didn't work either. My original code is below. My question is, is it the list- style or the box that I created that might be giving me the problem?
<p class = "total" style= "background-color: #C6C29E;opacity:.9;height:2000px;width:500px;float:left;color:black;text-shadow: 4px 0px #aaa;list-style-type:circle;">
<li>Text</li><br>
<li>Text<br></li>
</p>
Thanks
To create a list, you have to wrap your li items in either a ul or a ol:
<ul class="total" style="list-style-type:circle;">
<li>Text</li>
<li>Text</li>
</ul>
I agree with Joseph. It's a bad idea wrapping a <p> tag around an <li> element and using <br> tags this way. You should use CSS to style the content rather than using the <br> tags to do it for you.
If you're wanting to just add list items into its own self expanding box does this help at all or is this not quite what you mean?
<ul class="my-list">
<li>text</li>
<li>text</li>
</ul>
ul.my-list {
background: red;
padding: 20px;
float: left;
}
I have an unordered list (ul) with some list items (li). One of this have another unordered list inside (ul). Now, I want to se to all these li the same stylesheet, except for the li that have another unordered list inside.
<ul>
<li>Element</li>
<li>Another Element</li>
<li>Special Element
<ul>
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
How can I set CSS without set a specific class for the special li?
ul ul li { your-rules: here; }
I recommend giving this a read, it will help you understand the cascade and specificity: http://reference.sitepoint.com/css/inheritancecascade
-- edit --
Sorry, just realised you want to style the li, not the ul li inside.
li:nth-child(3) { your-rules: here; }
NOTE: this will affect your inner lis as well if there are three or more.
Read http://css-tricks.com/how-nth-child-works/ to understand the rule I've suggested you use.
In the current CSS specs, this is not possible. There is no selector for "an element that contains some specific content". It may be possible in CSS4, but as of now, you will have to take special measures to single out the "special" li.
<ul>
<li>Element</li>
<li>Another Element</li>
<li class="specialelement">Special Element
<ul>
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
and give class .specialelement a style of its own.
try with
ul li > li {
some style
}
I have a horizontal list, I want to be able to click on each of the list items without the following spaces.
HTML:
<ul id="server-header-list">
<li>item1: </li>
<li>item1 value</li>
<li>testing list item2: </li>
<li>value of item2</li>
</ul>
CSS:
#server-header-list li {
display: inline;
list-style-type: none;
padding-right: 7px;
white-space: nowrap;
}
Currently the output looks like this:
item1: item1 value testing list item2: value of item2
This is good. But when I try to click on e.g. value of item2 it selects the whole row instead of only the "value of item2" also when I click on item1, it takes one extra following space with it. Any solutions?
this is because your <li>'s (or <ui>'s but i suspect that's a typo) are displayed as inline. You could do something like this:
li {
display: block;
float: left;
}
this should prevent the whitespace from appearing
I would recommend changing your <ui> tags to <li> as that is what you want I think, <ui> is not a valid tag. This will probably fix it
Hey guys, i need to display all 27 states from brazil in a selection div, I really need to do it using UL.. this is a projection of how they should look:
alt text http://img24.imageshack.us/img24/8726/statesf.jpg
And this is a piece of the UL: What would you suggest? can i do that using this markup?
<ul class="ufLista">
<li>
<ul>
<li>AC</li>
<li>AL</li>
<li>AM</li>
</ul>
</li>
<li>
<ul>
<li>CE</li>
<li>DF</li>
<li>ES</li>
</ul>
</li>
<li>
<ul>
<li>MT</li>
<li>MS</li>
<li>MG</li>
</ul>
</li>
</ul>
Is having those lists nested a necessity? If it was just one list like:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>Four</li>
<li>five</li>
<li>six</li>
<li>seven</li></ul>
Then you could style it with:
ul { width: 300px; list-style: none; line-height: normal; }
li { float: left; width: 98px; border: 1px black solid; }
and get a 'grid' effect pretty easily.
Since the image is missing, I can only guess, but "grid-like" in the title suggests some kind of table layout. You can set the CSS display property to certain values which then should trigger table-like display:
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).
This is described in more detail at The CSS Table Model.
To organize data in a grid-like manner, instead of making elements behave like tables, use <table>. That's what it was invented for, and it still is the right solution.
Edit: As you need to do it with LIs: It should be no problem to present your markup in a table like manner. Give the inner <ul> a width: 100%, clear: both and overflow: auto. Give the inner <li>s float: left and either a relative or absolute width that amount to 100% of the ul.