I want to change the subnavs on this code but everytime I try it takes the parent element (the background image from above.
I would have thought adding the following code would get rid of the background image for the subnavs but it doesn't.
ul.subnav li {
background-color:000;
}
What I want is to do some basic css for the subnavs with the names of each link. Nothing fancy.
Heres a link to the fiddle
http://jsfiddle.net/mitchelll182/t7QQ8/1/
Ok, so I see you're doing a CSS only menu, but that involves putting classes on everything and it ends up being a huge code mess. I think a better way would be to use jQuery. Something like this: http://jsfiddle.net/ewB9b/
See how the HTML code is nice and clean? Just nested UL's with one class. Now in the CSS, you can easily style the main links differently from the drop-downs. Read the comments in the CSS to see what's what.
.
Try:
ul.subnav li {
background-image: none;
background-color:000;
}
Related
I found this nice progress bar which I'm currently trying to customize.
The original is pulling CSS content values from an html attribute like this:
<li class]="is-active" data-step="1">Patient Screening</li>
&:before {
content: attr(data-step);
}
In my code, I'd like to just define the content in CSS. When I attempt to do this, though, the step circle bumps down.
Here is a CodePen.
Add vertical-align: top to .progress > li. You're using tables, and that will fix your problem.
New CodePen
I am trying to organize a gallery using figures, but I keep getting this annoying dot or bullet next to them. Are there any solutions like "list-style-type:none" for figures?
Thanks
(had to post a link to picture because I'm not allowed yet)
I suspect that your images are contained in a list and you need to change the list style to none for the relevant list.
Do this
body ul {
list-style: none;
}
This would apply a none list style for all the lists under the Body element.
Referencing this fiddle
I want to color the background of the LI being hovered over. However it seems to set the class on the entire set of LI elements (not just the hovered one).
Can someone see what the issue is here?
just do this:
.parentSelectorBox li:hover
{
background-color:red;
}
you don't need js to achieve hover effect. CSS will be fine.
This is because you anchor your JS to the whole list.
See that.
I don't remove all JQuery stuff, but only what set to hover your li class.
I suggest to remove JS that know is useless
Look, this is my test site.
http://www.securebitcr.com/test/balls.php
The problem that I am having is, that I see the link style in the flying objects, but I am resetting that in my css .
Please take a look at my code, I've been trying a lot of things and anything works for me.
Thanks,
Marco,
Add this CSS?
.box img {
border: 0
}
http://wilwaldon.com/itsbroken/templateleftnav.php
As you can see on the left navigation the link for Template 01 is highlighted green. The link underneath is also highlighted green.
I think the problem lies with the initial LI controlling the ul underneath somehow.
I need to keep the xhtml formatted exactly how it is right now and only change the CSS to fix this problem.
I'd appreciate any help you may be able to point me in the right direction, I'm pretty stuck at this point.
Thank you in advance!
The green background for the highlighted li element goes for the entire element, including the nested ul. To get around it, override the text and background color of the nested ul like this:
li.leftactive ul {
background-color: #E3DECA;
}
li.leftnav1b a {
color: #363;
}
You might want to tweak margins and/or padding as well, but this should get you started.