Forums

i9mickey

So this is my first foray into the WP skinning game. And I'm figuring it out. But I'm still running into some little issues here and there. Right now, for some reason, the links in my sidebar are not functioning correctly. That is to say, they're not functioning as a hyperlink. Most times there is no hover at all. Even the Past Articles popup menu isn't popping up. But the search field seems to be working fine. Anyway, sure could use some help. Thanks in advance.

Here's the link. http://www.i9creative.com/blog

Mickey

ikthius

your links in the sidebar don't have the correct CSS.

e.g.
sidebar a
should be
sidebar ul li a

you need to really target the actual link

think of it like the russian dolls, how can you see & hold what is at the centre if you don't open each containing doll to get to the correct one???

i9mickey

Thanks for the reply. I'm pretty sure I understand what you're saying, and I tried it, but it doesn't seem to be working. I've been using CSS for awhile now, but I still think of myself as an amateur a lot of the time. If you don't mind, I'd like to show here what I did and see what you think might be the problem.


#sidebar-inside ul li a:link {
	color:#7F4300;
	text-decoration:underline;
}

#sidebar-inside ul li a:visited {
	color:#7F4300;
	text-decoration:underline;
}

#sidebar-inside ul li a:hover {
	color:#F47B20;
	text-decoration:none;
}

#sidebar-inside ul li a:visited:hover {
	color:#F47B20;
	text-decoration:none;
}

Also, the thing I don't understand is that the link should have worked right anyway because the "inside" div was within the "sidebar" div, so it should have inherited the CSS from that, right? Your Russian doll analogy is a good one, but is that how it works for the heirarchy? If I have 3 divs nested inside each other and the first div sets the CSS rules for links, then shouldn't the nested divs follow suit?

And this is how it used to look.


#sidebar a:link {
	color:#7F4300;
	text-decoration:underline;
}

#sidebar a:visited {
	color:#7F4300;
	text-decoration:underline;
}

#sidebar a:hover {
	color:#F47B20;
	text-decoration:none;
}

#sidebar a:visited:hover {
	color:#F47B20;
	text-decoration:none;
}

Again, thanks for the help. I do appreciate it.

ikthius

the heirarchy depends how much you want to just focus in......

your links should be set up like:

a.nav, a.nav:link, a.nav:visited a.nav:hover a.nav:active

in that order
e.g. .nav is a class I used, I just copied the order.

you can use what is in the heirarchy, but if you want to actuall make the links work, focus in on them

apostrophe

I'm not sure why this works, but if you remove

div {
position:relative;
}

from line 13 of layout.css your links will work. If you do need other divs in the layout to still be position:relative; (and you don't need it in the sidebar) then just apply the position on a per div basis.

i9mickey

apostrophe!

That's it! We have a winner! :)

That's just weird. Yeah, I don't know why it works, but you nailed it. Thanks!

treehouse : what would you like to learn today?

Forums

[Solved] First WordPress Skin help...