href in css

[aikiart]

Hi.
Does anyone know of a way to use a href in css, the way you can use background and pass it a graphic with href? I want to have an cascading menu with graphics, which are being passed in from css. What should happen is when the user click a menu item it should take you to a page, but since there is no text in the html, (see below) where i’ve put "text should go here", it doesn’t work, if i put so much as a period there it will work, but this is not a viable solution.

Thank
Art

Eg.,"This is a snippet of the css"
#contactus {
background: url(../images/contactusbutton.jpg) left center no-repeat;
padding-left: 20px;
margin-top: 5px;
height: 50px;
}

Eg., "This is a snippet of the html"
<ul id="MenuBar1" class="MenuBarVertical">
<li id = "home">"text should go here"<a href="index.php">
</a> </li>
<li id = "aboutuswithout" >
<a href="aboutus.php" class="MenuBarItemSubmenu"></a>
<ul >
<li><a href="testimonials.php">Testimonials</a></li>
</ul>
</li>
<li id = "serviceswithout">

[noahgelman]

If there is no content in an anchor link, then the link has no width, and is therefore unclickable. Give the link(s) a set width and height in your css so they can be clickable without you have to put text there.

[Rob MacKay]

If you want to target an anchor you just use "a"

Noah is right – if there is no content inside the link then there will be no width – this is because it is classed as an inline element by default.

You can make it a block element and give it a width and height by using display:block when styling it. If you want it to still behave inline but be a block you need to use "display:inline-block" … in earlier version of IE you will need to use a float to make it stay inline.

So you need something like this…

a {
background:url("image.jpg") no-repeat;
display:block;
width:100px;
height:20px;
}

that will force a width and height of the anchor.

[aikiart]

Thank you noahgelman & Robskiwarrior,
I’m not sure i fully grasp what you’re saying, however, i now have some ideas to research and some roads to go down.

Thanks again
Art

[aikiart]

Thanks,

I got it to work by using your ideas and code, with one modification, i used an invisible gif instead of the image.jpg.

Art

a {
background:url("image.jpg") no-repeat;
display:block;
width:100px;
height:20px;
}

[Rob MacKay]

Hey –

Well if you didn’t want it to have a background you could have just left off the background :D It still would have been the width/height you specified :)

[Author]

Posts