Knowing Nothing

Okay, that’s everything but the drop-downs done. I was a pain to get the images working again. I had to re-jig it so that I use z-index to overlap the links. Unless you know of any way to specify an exact point on an image to hyperlink? Effectively all I am doing is hiding the other transparency changes under the main image by sing z-index…

#menu{

	float: left;
	padding: 0;
	margin: 0;
	font-family: Georgia, sans-serif;
	font-size: 25pt;
	font-weight: bold;
	width: 762px;
	height: 100px;
	position: absolute;
	top: 300px;
}

#menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#menu ul li{
	display: inline;
	margin: 0;
	padding: 0;
}

#menu ul li a{
	text-decoration: none;
	color: #003300;
	border-bottom: 0 none;
}

#menu a{
	overflow: hidden;
	position: absolute;
	left: 50px;
	top: 28px;
	height: 43px;
	width: 655px;
	background: url(images/kn-menu.png) top left no-repeat scroll;
	border-bottom: 0 none;
	z-index: 40;
}

#menu a:hover{
	overflow: hidden;
	border-bottom: 0 none;
}

#menu .home a{
	width: 125px;
	float: left;
	z-index: 50;
}

#menu .home a:hover{
	background:url(images/kn-menu.png) 0 -42px no-repeat;
}

#menu .about a{
	width: 275px;
	float: left;
	z-index: 49;
}

#menu .about a:hover{
	background:url(images/kn-menu.png) 0 -42px no-repeat;
}

#menu .goodies a{
	width: 465px;
	float: left;
	z-index: 48;
}

#menu .goodies a:hover{
	background:url(images/kn-menu.png) 0 -42px no-repeat;
}

#menu .topposts a{
	width: 655px;
	float: left;
	z-index: 47;
}

#menu .topposts a:hover{
	background:url(images/kn-menu.png) 0 -42px no-repeat;
}

#menu span {
	position: absolute;
	height: 0;
	width: 0;
	overflow: hidden;
}

This site was also great for checking gout IE6 and such. Do you know if z-indexes work properly on IE6 and Mac? It was a bit strange (the image rollovers don’t work in IE6, but the links do…)

https://www.my-debugbar.com/wiki/IETester/HomePage

Well… I mean there is always more than one way to reach a destination, so it really just depends on what you’re the most comfortable with.

For link positioning, I recommend checking out this website…

https://www.barelyfitz.com/screencast/html-training/css/positioning/

Check out tab 4 specifically, that deals with position: relative + position: absolute. It’s mostly how I tend to position my elements lately, and it seems to work pretty well in most browsers and plays nice with margins and paddings. It might even help you dance around your z-index issue…

I guess I’m really just trying to teach you to fish rather than do it for you, so I hope you don’t mind that? You seem to be taking CSS and the programming thing pretty well so good job. ??

Nice link. It explains positioning clearly.

No, I’m perfectly happy with all the help you’ve given me! Thanks so much for your time. One day I’ll have time to really learn CSS properly I’m sure, but I feel I’ve made a pretty good start so far ^^.

I’ll probably do a short write up about all this on my journal sometime soon. Any site you’d like me to link to? I noticed your homepage is under construction…

Yes you’ve definitely picked up on it really quickly!

If you’d like to link to my homepage that is perfectly fine with me! It is under some reconstruction but should be done soon. ??

Always appreciate the link love!

Cool. Will do. Busy with essay and stuff right now, but will get around to it!

All done: View the post here ^^

https://michaeldowney.net/css-image-rollovers

I love it – but I’m biased, having lived in (and loved) Japan.

It’s a nice looking site and I enjoyed reading your post about the rollovers. I’ve been thinking about incorporating a few into my own site, so I know where to find a good tutorial when the time comes.

Thanks again for the kind words. ??

It took a lot of trial and error, but I finally got it to work. I created a new nav menu in my footer using this method and it works beautifully. The thing that was a real pain is that all of my image links are a different size and shape, so it was a huge pain to get each of the hover states positioned correctly. I still need to do the same thing for my header image, but that will be a project for another day.

Now I’ve got the header image and the nav menu working. It all makes sense after you figure out what you’re doing, but my site was probably more difficult than most because all of the images I’m working with are weird shapes and sizes. The only problem I have now is that the header image does not appear in the correct position in IE.