I want to make a list with list-style-type: disc; to list some programs.
But the list-items don't get this "disc" and have scrollbars , i don't know why... look here (Link).
It just should be a list with the disc-icon and no scrollbars on the right for every list-tiem.
html:
<ul>
<li>flashtool</li>
<li>test</li>
</ul>
css:
ul {
list-style-type: disc;
}
The problem is in the declaration of the following class.
main > ul li
{
overflow:auto;
}
The above code will point the first level ul under main. That is perfect. But look at the next selector. It will select all the child-selector of li. This is wrong in your case. It should point only first level of li also. Update the code like below. It will work.
main > ul > li
{
overflow:auto;
}
The reason why your list-style-type is not working is the absence of list-style-position: inside. So your CSS need the following modification:
main > ul li .content > ul {
list-style-type: disc;
list-style-position: inside;
}
in your common.css line number 4
Use
.content ul{
list-style-type:disc;
list-style-position:inside;
}
if you want to remove scrollbar set overflow:hidden
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.
As a requirement at work, I have to use someone's stylesheet and I'm having trouble trying to override one behavior. The unordered list elements <li> are having text that exceeds 1 line wrap around to the area below the bullet point. Here's the CSS that is causing the behavior:
ul
{
list-style: none;
list-style-position: inside;
padding: 0;
}
li
{
list-style-type: disc;
list-style-image: none;
margin-left:0px;
margin-bottom: 5px;
}
Here's a fiddle for that: http://jsfiddle.net/CP32B/1/
What attribute do I need to override so that I can get the text to align like it does by default? (Example of default behavior: http://jsfiddle.net/B5jPH/)
list-style-position: inside; is the property which causes that behavior and inorder to fix that, you need to use outside
Demo
ul
{
list-style-position: outside !important;
padding-left: 2em !important;
}
!important will override the css
Applying padding:0 with list-style-position: inside; is hiding the bullets.
You can left align the bullets without text flowing below it by changing it to the following
ul
{
padding-left:10px;
}
JSFiddle
I'm having a problem with bullet points appearing alongside images on this site: http://docomomo-uk.co.uk/
I've tried using this code based on other posts with similar issues:
div#featured-widget-post ul {
list-style-type: none !important;
}
but no luck. Any suggestions? All help much appreciated.
You don't have the list surrounded by ul tags and you're referencing the element incorrectly with something that isn't there. Wrap your li item with ul
after you wrap your elements correctly, reference it as such...:
.featured-widget-post ul li {
list-style-type: none;
}
Check with
.featured-widget-post li{
list-style-type: none !important;
}
You use id selector instead of class selector.
You don't have ul tags.
Try this:
.featured-widget-post li {
list-style: none;
}
Your code wasn't working because .featured-widget-post is a class (always preceded by a dot (.)) and not an id (preceded by a pound symbol (#)) - and your li tags are not wrapped in a ul.
Apply this css inside your page.
li {
list-style-type: none; docomomo-uk.co.uk #3(line 159)
}
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'm building a navigation with has a drop down unordered list within an unordered list. I'd like to make the list items as wide as at least the "head" list item so that the drop down menu looks right. Just now the drop down menu is thinner as the line items have a lower character count than the line item that contains the unordered list.
I'd like to make somehting of the order:
ul li ul {
{width: *as wide as ul li*;
}
Is it possible to do this without javascript and just within css alone?
Yes, it is. Technically, the ul is already the same width, but it doesn't appear to be due to margins and padding. To change this, use this CSS:
ul li ul {
width:100%;
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
}
You may also want to include the following CSS to change the padding/margin of the li child as well:
ul li ul > li {
width:100%;
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
}
Update
In your specific example (posted in comments), the issue is you've set ul li ul's position value to absolute. This takes it out of it's parent (in regards to handling width), but can be fixed with the following CSS being added to your existing CSS:
ul li {
position:relative;
}
ul li ul {
width:100%;
}
While this allows you to set the submenu to be the same width as the parent, it comes with the side effect of making the menu items wrap (see sui generis menu). To overcome this, use the following CSS instead (in addition to your jsFiddle):
ul li {
position:relative;
}
/* Due to 'min-width', this may not be compatible with all browsers */
ul li ul {
min-width:100%;
white-space:nowrap;
}
width:100%
that should make the child as wide as the parent :)
Try this.
ul li, ul li ul {
width:100px;
}