Grow your CSS skills. Land your dream job.

href in css

  • # March 14, 2010 at 11:16 pm

    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">

    # March 15, 2010 at 1:05 am

    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
    # March 15, 2010 at 7:42 am

    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.

    # March 15, 2010 at 9:15 pm

    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

    # March 15, 2010 at 10:29 pm

    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
    # March 16, 2010 at 12:16 pm

    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 :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".