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
Related
i am working on a WordPress site, and my initial problem was that when i had a bullet, the text would wrap around it such that some text was below the bullet point and so i wanted to align my bullets such that when text is wrapped it doesn't show below the bullet point,
so i did this in my custom css
ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
which worked great except now i have bullets appearing next to the links on the drop down part of my menu, how can i exclude the code from affecting the main menu?
ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
#site-header ul{
list-style:none;
}
Write a specific selector for the site-nav ul list and remove the styles. Adding the #site-header before ul will overwrite the original statement for that element. Effectively, this will apply your original style to all ul elements except the ones in #site-header
I believe wp adds #site-header automatically to the main header element. If this is not the case for your theme, just change #site-header to any parent element id specific to your header.
It's probably because you're using ul as your selector. This will apply those styles to ALL ul elements in your page. If you want to only select a single ul, you can either add an id or class to it, or you can select it's container, such as
div ul { // styles here }
You have to be more specific on your css rule, otherwise you're aplying that style to all your ULs
#parentElement ul {
list-style-type: circle;
list-style: outside;
padding-left: 20px;
}
instead of creating that list-style-type for all ul, just create it for the specific one you want to appear the bullets. Otherwise find the main menu id and add this: list-style-type: none;
I am working on a website simplemedia.dk
i have a responsive menu that works, but when i am trying to define the in responsive mode the browsers does not recognize the style ..
in responsive mode i get a class called "responsified" and i tried adding the class .responsified in front of my navigation style but it doesnt react to it.
.responsive-menus .responsive-menus-0-0 .absolute .responsified .responsive-toggled #navigation ul.menu {
display: block;
float: left;
}
.responsive-menus .responsive-menus-0-0 .absolute .responsified .responsive-toggled #navigation ul.menu li {
display: block;
float: left;
}
In normal mode i want it to display table-cell which it does, but in responsive i want it to show block.
When you use a long space-separated string in your CSS selector like this...
.responsive-menus .responsive-menus-0-0 .absolute .responsified .responsive-toggled
...you are telling the browser "find me something with the class .responsive-toggled which has a parent with the class .responsified which in turn has a parent with the class .absolute which in turn has a parent with the class .responsive-menus-0-0...", etc. etc.
In your actual page, all those classes listed above are applied to a single element.
In CSS, to target an element with multiple classes, you chain them (no spaces):
.responsive-menus.responsive-menus-0-0.absolute.responsified.responsive-toggled
But this is almost certainly way, WAY more complicated than you need for this situation.
Your situation probably needs nothing more specific than this:
.responsified #navigation ul.menu {
display: block;
float: left;
}
.responsified #navigation ul.menu li {
display: block;
float: left;
}
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!
I'm working with Pagelines theme on a Wordpress site.
The default overrides hide the bullets and tweak the margins and padding.
I've been debugging the Firebug. Found the CSS. Redefined styles for the UL element and LI elements I want to show bullets for. They still won't work.
The website URL is http://royalaire.com/site/
The offending list is in the sidebar, a nested list in navigation links.
I want second-level indented items bulleted.
Default are defined as:
.widget ul li ul li {
margin-left: .03em;
}
.widget ul li {
display: block;
font-size: 0.95em;
list-style: none outside none;
padding 0 2px;
}
I tried with the following:
.widget ul.children li.page_item {
list-style-type: disc;
}
Any ideas?
I'm not a CSS expert and I have some trouble figuring out which definitions you have written for that list, but I know that adding !important after a style definition will make sure that it overrides all parent definitions. try:
.widget ul.children li.page_item {list-style-type: disc !important;}
Morning Guys,
I have a CSS issue that's driving me up the wall. I have an unordered list with custom bullet images:
.mainTable ul {
list-style-position: inside;
list-style-image: url(../img/bullet_white.png);
line-height: 18px;
color: #335;
}
Now some of these list items contain links and some do not. For the ones that do, I'd like the bullet to change on rollover. Not too tricky you'd think... Here's how I marked it up:
.mainTable ul li a:link {
padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
list-style-image: url(../img/bullet_red.png);
padding-left:2px; // padding changes (moves link text), but bullet's still white
}
Now I've sussed (as the padding changes) that the styling is being applied to the inner link, and not the "li" container. I tried testing:
.mainTable ul li:hover
and the image changes, but it changes for all "li" tags in scope (because that's what I've told it to do), but that's not what I'm after. There must be a simple way of doing this without resorting to js but I'll be buggered if I can figure it out.
Any suggestions? All help (even if it's just "You need to use js you nugget") gratefully appreciated :)
Danny
GOT IT SORTED! (can't answer my own question yet - for some reason...)
Thanks for the heads up guys. The answer is a mixture of the above suggestions. Moving the bullets from the li tags and on to the anchors worked a treat, but the list items without the link got no bullet...DOH!
I then set up another class, "notALink", and stuck my default list styling on it. Here's the Markup if anyone's interested...
.mainTable ul { /* kill formatting on the ul */
list-style-position: inside;
line-height: 18px;
color: #335;
list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
list-style-image: url(../img/bullet_red.png);
}
Works fine - Cheers peeps, you've dug me out of a little hole I was digging myself
Danny
No, there is no way to change parent on child hover in pure CSS (2 or 3). See: Is there a CSS parent selector?
So you have two options:
Use JavaScript
or
Leave list style as empty and add bullets to childs (a or something else). That way, you will change style of a, not li.
This is what I would do;]
or (from Yi Jiang comment)
Add extra class to li elements containing a
What you can do is style the a as display: block and move it to the left (using negative margin) to cover the li:s bullet. Check this fiddle:
http://jsfiddle.net/TG5Lj/
You may need to set a background-color to the a as well if your a:s background-image doesn't completely cover the li:s.
Try applying styling to
.mainTable ul li:hover li
or something like that. It should override the rule for the parents.
EDIT: Sorry, I didn't fully understand your question. It seems to me that it's impossible to do with css as you would have to apply styling to "a li that has no 'a' descendants", which I don't think can be expressed in css selectors. As a walkaround in order not to use scripts I suggest that you change the background of the link and not the bullet image.