I have drop-down menu which work properly but there is a problem with CSS style. If I have there on the top CSS file:
* {
margin: 0;
padding: 0;
}
Everything is allright. But if I removed this block, I will get this result http://jsfiddle.net/BERRF/8/. How can I fix that to look like as before with star's block? Answer into jsfiddle would be best. Thanks advance.
* is universal selector. which applies css styling to all the elements.
In your case, you need margin: 0 and padding: 0 only to the ul and h3 elements present in the #accordian element.
So, use #accordian ul instead of using *.
#accordian ul, #accordian h3{
padding: 0;
margin: 0;
}
JS fiddle
Related
I want to decrease the padding of my ul, right now it's 40 (I think). This code works to make the padding zero:
ul {
padding: 0;
list-style-type: none;
}
Using this code above works but it can only be 0 when I try something like 10 or 20 it doesnt work anymore. When I inspect the element I want to change it says the padding is 40 right now.
Since you have not shown any HTML markup, nor CSS classes/Style sheets. Try to resolve the conflict in the CSS itself, or append !important to any size value present.
ul.someClass {
padding:10px !important;
list-style-type:none;
}
And, it is reccommended to add a classname to the element itself, instead of assigning it to the whole ul element.
Anything other than "0" add px (for example).
If you just add 10, it does not know if that is 10px, 10em, etc.
ul {
padding: 10px;
list-style-type: none;
}
I have body * { padding: 0; }. This removes all padding from list. Without removing the CSS, what can I add that can bring back padding for lists ?
The default padding for list elements is 40px.
Note that setting a padding on list elements also removes their bullet, so you'll also probably want to add this back in with list-style-position: inside. This offsets the bullet a little bit, so you may want to go with 30px of padding instead.
body * {
padding: 0;
}
li {
padding: 0 30px;
list-style-position: inside;
}
<p>No padding</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
However, a better option would be to simply not set padding on the list elements in the first place.
Add your own back in. You have to make it as "specific" are the reset itself.
body ul, body ol { padding: (your value) }
See: http://cssspecificity.com/
Fundamentally I'd question the approach of using body * { padding: 0; } since it's far too broad a rule to reasonably apply to a well-structured layout, but in your case, you could do a couple things.
body ul, body ol { padding: 15px; }
The above will add padding to the list wrapper, but you may also want to cover the listitems as well.
body li { padding: 15px; }
Both of the above options would need to come after your existing removal of the padding.
The final alternative would be to use a not selector instead of your body * selector.
body :not(li) { padding: 0; }
Or, to protect ul, ol, and li:
body :not(li):not(ul):not(ol) { padding: 0; }
I'm trying to duplicate the style of an existing menu using CSS.
The CMS platform that I'm using comes with given styling for the navgation. I added a new menu underneath it and am trying to make it look the same as the original. I added an ID "wpmenu" to the div that contains the navigation but the selectors don't select. I created a jsfiddle but the jsfiddle works!
It's really frustrating and I'm not sure where to turn. The html and CSS are here: http://jsfiddle.net/nRrKW/
The particular selector that seems to be failing is #wpmenu li a
Again, it works in jsfiddle but not on my website which is here: advance.trashswag.com.
I had expected to see the following CSS apply to the newly created UL nav within the "wpmenu" div:
#wpmenu li a {
display: block;
position: relative;
padding: 7px 12px;
color: #fff;
overflow: hidden;
text-transform: uppercase;
font-size: 120%;
}
But if I then inspect element on the site, the styling is not applied to those a elements.
Can anyone point out what I'm missing here?
You don't seem to have the #wpmenu li a style
also you have an invalid rule token here:
#wpmenu ul {
padding: 0;
margin: 0;
list-style: none;
}}
That might fix it!
In my case I have, simplified a nested list and enclosing div, i cant change it, it's created by drupal menu.
I want to clone the menu of a hardcoded site (edit removed link)
How would i "embed" the boxes ( ul li ul li items ) in the submenu, is it possible in just a list in block display? Do i need a z-index for them? Or float? Is float even possible on list items?
In general i understand the cascading thing but still do hard in writing css with few repeates. Some tips for shortening would be nice.
My primary question for now is why the style of the last entry (marked) is overwritten. Does the order in file play a role?
#block-system-main-menu .content {
font-size: 17px;
font-weight: bold;
}
#block-system-main-menu div ul li {
width: 207px;
margin: 4px 0px;
}
#block-system-main-menu div ul li {
display: block;
height: 38px;
background: url(/sites/all/themes/schott/menuitembg.gif);
}
#block-system-main-menu div ul li .active-trail {
display: block;
height: 60px;
background: url(/sites/all/themes/schott/menuitembg_p.png);
}
div ul li ul li.leaf { /* both styles are overwritten */
display: inline-block;
background: url(/sites/all/themes/schott/subitem_passive.gif);
}
The last CSS rule written is the one that is used, but specificity takes priority over cascading.
An article on specificity: http://css-tricks.com/specifics-on-css-specificity/
So #block-system-main-menu div ul li .active-trail is the most specific and will overwrite other rules.
yes, the order of CSS definitely plays a role. Anything declared after a style overwrites the previous one. Also, if you want to overwrite default styles of some sort, include them after the default ones (whether you write them in the same file, or just do a meta link to your own stylesheet).
Change it to:
#block-system-main-menu div ul li ul li.leaf {
I'm slightly confused by what you're asking, but in general, if you have two identical rules, the later will be applied. However, if rules are not identical, the more specific rule will take precedence.
Edit: sorry, I can see you just figured that out
I've got a stylesheet that will not, for whatever reason, apply list-style-type to a UL element. I'm using YUI's Grid CSS with their reset-fonts-grid.css file, which I know strips that out as part of the CSS reset.
After calling YUI, I call the stylesheet for the website and in there have a block for UL:
ul {list-style-type: disc;}
I've also tried setting it via list-style but get the same result. I know that the above CSS block is getting read as if I add things like padding or margins those do get applied. The style-type isn't showing up in either Firefox or IE.
The only other CSS I've applied to UL's are in a #nav div but that CSS doesn't touch the list-style-type, it uses the reset that YUI provided, and YUI and the site style sheet are the only two CSS sheets that are called.
I've also got FCKEditor on the admin side of the site and that editor does show the bullet styles so I know it has to be something with the CSS that isn't being filtered by FCKEditor.
You need to include the following in your css:
li { display: list-item; }
This triggers Firefox to show the disc.
and you can also give a left-margin if the reset.css you are using make all margin null :
that means :
li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}
Assuming you apply this css after the reset, it should work !
Matthieu Ricaud
If I'm not mistaken, you should be applying this rule to the li, not the ul.
ul li {list-style-type: disc;}
I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.
Margin messes with this too
This problem was caused by the li display attribute being set to block in a parent class. Overriding with list-item solved the problem.
Make sure the 'li' doesn't have overflow: hidden applied.
My reset.css was margin: 0, padding: 0. After several hours of looking and troubleshooting this worked:
li {
list-style: disc outside none;
margin-left: 1em;
}
ul {
margin: 1em;
}
I had this problem and it turned out I didn't have any padding-left on the ul, which was stopping the discs from being visible. The default padding-left for ul elements is 40px.
The and elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em).
(Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
All I can think of is that something is over-riding this afterwards.
You are including the reset styles first, right?
Have you tried following the rule with !important?
Which stylesheet does FireBug show having last control over the element?
Is this live somewhere to be viewed by others?
Update
I'm fairly confident that providing code-examples would help you receive a solution must faster. If you can upload an example of this issue somewhere, or provide the markup so we can test it on our localhosts, you'll have a better chance of getting some valuable input.
The problem with questions is that they lead others to believe the person asking the question has sufficient knowledge to ask the question. In programming that isn't always the case. There may have been something you missed, or accidentally jipped. Without others having eyes on your code, they have to assume you missed nothing, and overlooked nothing.
In IE I just use a class "normal_ol" for styling an ol list and made some modifications shown below:
previous code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0; width:500px;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; float:left; width:100%;}
modified code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; }
Turns out that YUI's reset CSS strips the list style from 'ul li' instead of just 'ul', which is why setting it just in 'ul' never worked.
Make sure you have no display property set in the li tag in my case I had a display: flex property on my li tag for some reason.
please use inline css
<li style="disply:list-item">my li content </li>
All you have to do is add this class to your css.
.ul-no-style { list-style: none; padding: 0; margin: 0; }
Including the padding and margin set at 0.
Some reset.css set the ::marker to content : "", try to unset that on the <li> element:
li::marker {
content : unset;
}