I a have a problem with displaying bullets in ul.
Does anyone know where the problem is?
my site and it starts with Co od vás očekáváme
Your <li> tags have the display: block CSS rule that is overriding the default behaviour. The <li> elements have display: list-item to been displayed as default, with bullets. You can make something like this (based on your HTML structure):
section ul li {
display: list-item;
}
And it works automaticaly (only inside <section> <ul> places).
You have used the default styling of ul in your site.
What you can do is you can add a separate class to ul element, for eg bullets like this :-
CSS :-
.bullets {
}
.bullets li {
list-style-type: circle;
}
HTML :-
<ul class="bullets">
<li>dobrý zdravotní stav bez omezení, potravinářský průkaz</li>
<li>manuální zručnost v kuchyni – rychlost, přesnost, šikovnost a pečlivost – bez toho to nejde</li>
<li>samostatnost a zodpovědnost</li>
<li>radost z prodeje</li>
<li>aktivní komunikaci se zákazníkem.</li>
</ul>
Related
I have an unordered list on my webpage.
Home News About
- Weather
- Sports
- Local Events
I'd like to simply hide only the Home list item with CSS, here's what I have;
ul li:first-child { display: none; }
Clearly this will hide every single first li of every ul, even the nested elements. And here's the kicker, I cannot give it a class or ID. That being said, how can I target Home only via CSS?
<ul>
<li> ola1</li>
<li> ola2</li>
</ul>
<ul>
<li> xau1</li>
<li> xau2</li>
</ul>
ul:first-of-type li:first-of-type {
display: none;
}
http://codepen.io/Just14/pen/KaNvVN
You can access to the first li of the first ul
ul:first-child li:first-child { display: none; }
I have a CSS/HTML timeline like this one: http://bootsnipp.com/snippets/97QeW
It uses an unordered list to join the timeline cards. I now need to insert an unordered list inside the cards body and what happens is that the identation and the bullet icons type are inherited from the top-level card ul/li.
How can I reset or isolate a ul/li style inside the cards?
The snippet shows both what I'm getting now and what I need.
To remove bullets:
ul {
list-style: none;
}
you can also assign a class to isolate, as it is in your shared snippet would be a circle:
ul.class {
list-style-type: circle;
}
ul {
list-style-type: disc;
}
ul.ul2 {
list-style-type: circle;
}
<ul>
<li>foo</li>
<ul class="ul2">
<li>
bar
</li>
</ul>
</ul>
The best way to target the unordered list is like so:
ul li > ul li {
list-style:none;
}
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
if i have a list like this one:
<ul>
<li>
item name
<ul>
<li>
item name
</li>
<li>
item name
<ul>
<li>
item name
</li>
</ul>
</li>
</ul>
</li>
</ul>
And for example i want each "li" to display inline like its all one sentence... I need this for breadcrumbs...
I tried this:
ul li {
display: inline;
float: left;
}
But this wont work because the "ul" or "li" doesn't have a defined width so it goes under.
Any help is welcome,
Thanks!
This one works:
ul{display:inline;}
ul li{display:inline;}
ul li ul li{display:inline;}
The jsfiddle: http://jsfiddle.net/naveed_ahmad/QWshN/
Use ul ul li as the selector if you only want the nested ULs to be styled. You also probably don't need float: left.
Just having text inside of the <li> elements is making the text behave like a block-level element itself (effectively wrapping each set of text in a <p> tag). If you wrap the text in a <span>, for example, and make the span inline as well, you will get the desired result
Also, use ul, li, span as the selector instead of ul li
Edit:
In fact, if you just change your original CSS to:
ul, li {display: inline}
it will work perfectly.
You only want the outer ul to be a block level element, so to make all other elements inline elements, you can use:
/* both the inner ul's and the li's */
ul ul,
li
{
display:inline;
}
or, if you want to float them instead:
ul
{
overflow: hidden; /* make sure the uls wraps around their contents, mainly for outer ´ul´ */
}
ul ul,
li
{
float: left;
}
I think this is sexier:
ul, li {
display: inline-block
}
http://jsfiddle.net/jzVcE/
If I have a couple of bullet lits on a page and some lists contains normal text (no paragraph elements) and some contains links, is it possible to have no bullets on the links but bullets on the text items?
To remove all bullets I do:
#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px; list-style-type: none}
But if the item is a link I want to show the bullets. I tried with:
#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px;}
#WebPartWPQ1 li a ,#WebPartWPQ2 li a ,#WebPartWPQ3 li a ,
#WebPartWPQ4 li a,#WebPartWPQ5 li a,#WebPartWPQ6 li a,
#WebPartWPQ6 li a {margin-left: -25px; li ast-style-type: none}
Without success, any ideas?
You would have to resort to server-side preprocessing or Javascript. There is no way in CSS to style an element based on what its children elements are, or to change a parent's style from a child element's style declaration. Here's the W3 CSS2 Selector Reference and the CSS3 working draft Selector reference, and neither of them mention parent selectors.
While you can not change the styling of a list element based whatever element(s) it contains, there is a pure CSS workaround that achieves more or less the same result :
Set block as the display property of all of your list elements
Set list-item as the display property of your link elements, along with a valid value for list-style-position and list-style-type.
So instead of making your list items look like a list item when they contain a link, you're just making the links inside your list items behave like a list item.
Your bullet will have the same color as your link, but that's about the only difference between this approach and the approach you had in mind (which is impossible).
EXAMPLE CODE :
#WebPartWPQ1 li {
margin-left: -25px;
display: block;
}
#WebPartWPQ1 li a {
display: list-item;
list-style-position: inside;
list-style-type: disk;
}
<ul id="WebPartWPQ1">
<li>Item 1 (ordinary item)</li>
<li><span>Item 2 (wrapped in a "span" tag)</span></li>
<li>Item 2 (wrapped in an "a" tag)</li>
</ul>
THE FIDDLE :
http://jsfiddle.net/6kt8jhfo/5/