For some reason my css is acting weirdly on pages that are not the index.
Which is weird because the whole top part of the webpage is a shared include between all of them.
Here is a pic of the problem and the relevant code:
Top part of pages: http://pastebin.com/qePqZhsE
navbar.php: http://pastebin.com/7065Dxcy
Css for navbar: http://pastebin.com/79tdQ4eP
It has to be something in the CSS, because the rest is identical but I don't see it. (though I might just be lacking too much sleep :P)
Replace
ul.dropdown li.hover a { color: red; }
with
ul.dropdown li:hover a { color: red; }
on line 12 in css file
EDIT:
As said in the comment below, You have a structure like this: "ul.dropdown > li > ul > li > a" qhile you are applying css to "ul.dropdown li a".
So, try replacing
ul.dropdown li.hover a
with
ul.dropdown > li > ul > li.hover a
or remove at all.
Simply, the issue is that the navbar's structure in your PHPs other than index is different, here's a screenshot of the structure of your navbar in index.php:
In empty.php:
Just make sure you're using the same structure, I guess; hope that helped!
Related
I have been trying to remove the bullet and indent from a < ul> element for quite a while now and I just can't figure out how - or rather why it's not working.
There are several solutions here on overflow, however none of them is working for me.
this should work(?) but it doesn't:
.widget li {list-style: none; } or:
.widget li {list-style-type: none; } (!important does not help)
here is the link to the page with the problem and a picture of the location I mean: any ideas? thanks!
http://wuttke-klima.witconsult.de/neue-firmenzentrale-der-fam-magdeburg/
that arrow is displaying from a :before just display:none it
Remove the left padding to remove padding on li
.arpw-ul li:before { display: none; }
.arpw-ul li { padding-left : 0 }
TIP : Just use google chromes inspect element to test these kind of things. just live results
Looks like you have a pseudo-element that creates the arrow bullet. You should be able to remove it with:
.footer-widget li:before, .widget li:before {
border: none;
}
If that is really a bullet (seems like it is not) then this shall help:
.widget li { display:block; }
But I suspect it is not a bullet but something else (like ::before pseudo element). Use DOM/style inspector tool in your browser.
Try this:
ul {
list-style-type: none;
}
Is it possible to remove the dot before each of these fields using CSS? I cannot seem to find the ability to do so. thanks!
http://www.inksharks.com/kbca-registration/
There's a background image added to each li element. You have to remove it by adding the following CSS
ul > li, .dark-icons ul > li {
background-image: none;
}
you may try
.gform_body ul li{list-style:none;}
if above code does not work then
.gform_body ul li{list-style:none !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.
I'm trying to make a nice-looking CSS menu, for this website. (The domain is just a sandbox, not the actual website I intend to use the designed pages on!)
As you may be able to see, there is a CSS menu at the top. When you hover over one of the sections, it drops down all nicely, but the sub-menu text is staying black, instead of the #CCC (grey) colour that I wanted -I need black for the hover font colour, for aesthetic reasons. I checked out the current CSS styles in the Inspector part of Google Chrome (F12), and the #CCC part of the section has been crossed out. From what I understand, that means it's been overidden, but I don't know what by...
If anyone has a similar code feature in their browser, I would really appreciate it if you could check it out. I made the menu all by myself, so I'd like to think I can code, but I just can't understand what's overiding the font colour.. I think it's line 73 of the new_menu_style.css file.
You should try adding this to the CSS:
.menu ul li:hover ul li a {
color: #ccc;
}
.menu ul li:hover ul li a:hover {
color: black;
}
The .menu ul li:hover a gets a higher weight than the other one, overriding it.
First: Do something about your code style. proper indentation makes a great effort to increase readability:
So here is a solution: add this to your css as these override the .menu ul li:hover a
.menu ul li:hover ul a {
color:#ccc
}
.menu ul li:hover ul li:hover a {
color:#000
}
I have a drop down menu made in css. When you hover over the text (ul) the menu appears (the li appears). I wanted to know, how to make a submenu, that when you hover over the li's another menu (submenu) would appear and would offer other options.
Ex:
-Tutorials (You hover over tutorials)
(Then these options appear)
-Video tutorials
-Other tutorials
-Windows (and if you hover over windows you have 3 choices)
//How do I make that!
-Windows xp
-windows 7
-Windows Vista
That is what I want to make.
Thanks people!!
you need this tutorial: son of suckerfish dropdowns
If you're using pure CSS then you just need to add a new level of styles. You haven't posted your original code, but assuming you currently have something like:
ul.menu > li > ul {
display: none;
}
ul.menu > li:hover > ul {
display: block;
}
Then you'd simply need to add:
ul.menu > li > ul > li > ul {
display: none;
}
ul.menu > li > ul > li:hover > ul {
display: block;
}
You will of course need to add some positioning code to your third level list so it appears to the right of the active menu item.
CSSPlay is a great resource with all kinds of menu's you can possibly imagine. Plus all menu's are completely cross-browser.
Check it out, I'm sure Stu got one that fits your needs:
http://www.cssplay.co.uk/menus/