- This topic is empty.
-
AuthorPosts
-
March 14, 2010 at 11:16 pm #28399aikiartParticipant
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
ArtEg.,"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">March 15, 2010 at 1:05 am #72395noahgelmanParticipantIf 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.
March 15, 2010 at 7:42 am #72404Rob MacKayParticipantIf 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.
March 15, 2010 at 9:15 pm #72440aikiartParticipantThank 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
ArtMarch 15, 2010 at 10:29 pm #72443aikiartParticipantThanks,
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;
}March 16, 2010 at 12:16 pm #72453Rob MacKayParticipantHey –
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 :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.