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.
Related
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;
}
So I've been working on what I was helped with yesterday and I'm so close. My code is much cleaner now. I have 2 issues that still need resolving. I've been trying all morning and can't seem to get it.
I need to control of the height of the subnav. I had to change the height in "ul li a" to 100% from pixels so at least now it just wraps around the text, which is ok, but I will probably need to change that height eventually and don't want to do it by increasing the font size.
ANSWERED - I added a margin-down in % to the subnav and you'll see why based on the design. The problem with this is that once you slowly move the mouse over the white space the sub nav disappears. If you do it fast enough you can sometimes catch it. I had the same issue with the vertical spacers within the subnav but did some rearranging in the css and it seems to be fixed now. Any suggestions?
Can I have the single worded links center without compromising the vertical centering with the multi-worded links?
Is there a better way to add in "margins or buffers" instead of the "spacers" I'm using, or is this "okay"?
http://codepen.io/Compton/pen/iwKJm
--UPDATED CODEPEN--
http://codepen.io/Compton/pen/ufGCI
Thanks in advance.
The problem was caused by the margin you added to the .subnav class: while moving the mouse from the upper list item to the sub list, the mouse had to move over a gap of 0.333% space resulting in a lost focus (or lost hover-effect). I updated your code and removed the unnecessary spacers, the updated version can be found here:
http://codepen.io/anon/pen/hzAaD
Referring to your original code, change your CSS as follows:
.subnav ul li {
margin: 0;
margin-top: 3px;
}
.subnav {
width:100%;
}
For point four, you don't need to add an empty list item for every "space" between each list item, this is bad practice as a list item is meant to actually be used for something, not empty space!
Instead, why don't you simply amend your ul li class so that you add a margin-right property:
ul li {
float:left;
width: 14%;
display:block;
**margin-right: 5px;**
text-align:center;
}
This will achieve the same effect as having those spaces so you can remove them from your html.
I'm creating my first website and I cannot get around this problem, my H3 link keep hovering below my third content list, does anybody know how to get around this problem, I'll be really glad If anyone can help me out
body {
width:98.8%;
position:absolute;
background-color:#e5e5e5;
text-align : left;
}
Demo
If I'm interpreting the comments correctly, I think you want what's happening in this fiddle.
The issue was that the parent anchor tags of the h3 didn't have any positioning, so I removed the top and left position on the h3 and put that styling on the a tag. This is all on lines 27-37 of the CSS in the fiddle.
I think the bigger issue is that the position property is being used in a lot of places and ways that are not ideal.
I have a top bar with text links and images; all the images are shifting to one side?
The images should align next to their respective text links, can anyone tell me what I'm doing wrong?
here is the website:
http://www.heatx.org/productcart/pc/viewCategories.asp?idCategory=2
So, I was looking at the URL you posted in Chrom DEV tools, and i found an entry in pcHeaderFooter11.css
#pcIconBar a {
text-decoration: none;
color: #666;
}
Changed that to :
#pcIconBar a {
text-decoration: none;
color: #666;
display: inline-block;
}
and voila!
And please remember, elements with display: block tend to behave like div tags and end up in a separate space for themselves. is you want alignment like this, you're supposed to specify explicitly that you want the element to be inline. Hope this helps!
I think i see a div in there called "pcIconBarRight" and left.
But personally i would create one div for every button/icon pair.
otherwise you can make the main div "relative" in your css and then move the child objects around based on that. (relative to the parent div (in this case pcIconBarRight)
I didn't know how else to phrase the question, but I'll try to explain through code
<ul>
<li><span>1</span><li>
<li><span>2</span><li>
<li><span>3</span><li>
<li><span>4</span><li>
</ul>
ul{ width:90px}
ul li{width:30px; float:left; position:relative;}
ul li:hover span{ position:absolute; width:60px;}
Now, when you hover on list one, its span would cover list 2, and list 2 would cover list 3. Once you hover over the third list, its span would run over the ul element. So is there a way to make the third span expand from right to left? So at the moment the spans starting point (as I understand it) is the top-left corner of the list. Is there a way to make it start from right. So the extra 30px expand to the left, not to the right?
first,you closed the LI tag incorrectly.I execute the same code as yours.but when i hovered any span nothing happened and it is regular and correct.i think you mean something like jquery accordian plugin or something lick that.maybe you can do that with jquery instead of css in this issue.If you need its code comment me.good luck