CSS ul / Link Problem

dezinerite · 03-19-2009, 05:13 AM

I'm relatively new to CSS...

I'm trying to create a sidebar menu using <ul id="menu"> instead of <div id="menu"> and even if the images do show up on both FF & IE, the <a href="link"> for each button won't work (like if I move my cursor over the buttons, nothing happens). Can someone help me identify the problem? Thanks.

The HTML part looks a bit like this (I'm just replacing the id names):

Code:

<ul id="menu">
<li id="home"><a href="home.html"></a></li>
<li id="about"><a href="about.html"></a></li>
<li id="contact"><a href="contact.html"></a></li>
</ul>

The CSS part looks a bit like this:
????: NamePros.com http://www.namepros.com/web-design-discussion/568244-css-ul-link-problem.html

Code:

#home, #home a {
		margin: 0 auto;
		padding: 0px;
		border: none;
		text-indent: -10000px;
		background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/home.png);
		background-repeat: no-repeat;
		height: 50px;
		width: 300px;
}

#home a:hover {
		background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/home_on.png);
}

sdsinc · 03-19-2009, 08:41 AM

There's nothing within your <a> tags. Perhaps you could try putting some whitespace.

Epic · 03-19-2009, 10:41 AM

Add "display: block;" to your CSS for #home a.

Maybe...

shockie · 03-19-2009, 12:10 PM

as kate said, you'll need something between your <a> tags. you should probably put an image there (home.png maybe?). if you go through the thought process, what you want to link is the image home.png itself, unless you plan to put text on top of the image. otherwise, the image isn't really a background; it's the foreground!

dezinerite · 03-19-2009, 02:59 PM

Originally Posted by Epic

Add "display: block;" to your CSS for #home a.

Maybe...

It worked.

Thanks so much!!!

03-19-2009, 05:13 AM	THREAD STARTER #1 (permalink)
dezinerite www.bpdir.com Join Date: Jul 2007 Posts: 3,055 Follow @bpdir	CSS ul / Link Problem I'm relatively new to CSS... I'm trying to create a sidebar menu using <ul id="menu"> instead of <div id="menu"> and even if the images do show up on both FF & IE, the <a href="link"> for each button won't work (like if I move my cursor over the buttons, nothing happens). Can someone help me identify the problem? Thanks. The HTML part looks a bit like this (I'm just replacing the id names): Code: <ul id="menu"> <li id="home"><a href="home.html"></a></li> <li id="about"><a href="about.html"></a></li> <li id="contact"><a href="contact.html"></a></li> </ul> The CSS part looks a bit like this: ????: NamePros.com http://www.namepros.com/web-design-discussion/568244-css-ul-link-problem.html Code: #home, #home a { margin: 0 auto; padding: 0px; border: none; text-indent: -10000px; background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/home.png); background-repeat: no-repeat; height: 50px; width: 300px; } #home a:hover { background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/home_on.png); } __________________ Free Directory Since 2007! \| Software Directory

03-19-2009, 08:41 AM	#2 (permalink)
sdsinc Domains my Dominion Join Date: Aug 2005 Location: Web 1.0 Posts: 9,963	There's nothing within your <a> tags. Perhaps you could try putting some whitespace. __________________ NameNewsletter.com - free lists of available domain names ZoneFiles.net (beta) - ccTLD and gTLD droplists

03-19-2009, 10:41 AM	#3 (permalink)
Epic Senior Member Join Date: Sep 2005 Posts: 3,767	Add "display: block;" to your CSS for #home a. Maybe... __________________ Attractive, Compelling, Efficient Web Design & Development

03-19-2009, 12:10 PM	#4 (permalink)
shockie Senior Member Join Date: Dec 2006 Posts: 4,702	as kate said, you'll need something between your <a> tags. you should probably put an image there (home.png maybe?). if you go through the thought process, what you want to link is the image home.png itself, unless you plan to put text on top of the image. otherwise, the image isn't really a background; it's the foreground! __________________ - shockie

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)