Skip navigation
uxk
Currently Being Moderated

How to link background shape

Nov 22, 2012 1:24 PM

Hello,

The gray shape below is generated using CSS. Kindly advise if in case the gray color shape (not the text) can be linked to a url.

The text "homepage" can be easily linked to any url.

Thanks

nav.png

 
Replies
  • Currently Being Moderated
    Nov 22, 2012 1:56 PM   in reply to uxk

    Sure it can. Just add a class to the link.

    <a class="home" href="">Homepage</a>

     

    a.home {

    display:block;

    width:60px; /* enter width */

    height:90px; /*enter height */

    background: #666 url() no-repeat; /* an image may be better for this */

    border: 3px dashed pink;

    border-radius:20px;

    font:12px/15px Arial, Helvetica, sans-serif;

    line-height:90px;

    text-decoration:none;

    color:#FFF;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 5:48 AM   in reply to uxk

    Rik's suggestion would apply only to the text, not the 'shape', as you requested.  To answer your question further would require a look at the code used to achieve that shape, but if it's strictly composed of background colors/images, then the answer is likely "no way".

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 7:39 AM   in reply to Rik Ramsay

    Hi

     

    As Murray correctly says Ricks answer will only apply to the text.

     

    If the background is generated by the css for the page, a possible solution would be to apply a javascript onclick event to the html element itself, (or even better use an eventListener).

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 8:10 AM   in reply to MurraySummers

    I am not sure I understand why you think my solution doesn't link the 'shape'. The class I gave the link creates the shape and will link it to anything he wants to. If he doesn't want the text to show, he can simply add text-indent:-9999px; (or remove the text) and then overlay another a.class. Quite simple really - unless I have misunderstood his requirements but I would assume he tested it before replying himself.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 9:17 AM   in reply to Rik Ramsay

    Hey Rik -

     

    It's not clear whether the OP wanted two link functions

    (one for anywhere on the gray shape, and a different link for the text).

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 9:26 AM   in reply to Ken Binney

    Ken Binney wrote:

    It's not clear whether the OP wanted two link functions

    (one for anywhere on the gray shape, and a different link for the text).

    That's how I'm interpreting the question.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 9:29 AM   in reply to Ken Binney

    I agree Ken. I had thought of that but the more I read his question it sounded like he had made a text link but wanted the shape behind it to be linked to the same location. Too many possible interpretations for the same question.

     

    If it were to be 2 links, I would probably do it something like this:

    div {position:relative; width:66px;}

    a.shape {

    display:block;

    width:60px; /* enter width */

    height:90px; /*enter height */

    background: #666 url() no-repeat; /* an image may be better for this */

    border: 3px dashed pink;

    border-radius:20px;

    position:relative;

    top:0;

    }

    a.text {

    display:block;

    width:66px; /* enter width */

    height:20px; /*enter height */

    font:12px/15px Arial, Helvetica, sans-serif;

    text-decoration:none;

    color:#FFF;

    position:absolute;

    top:40px;

    }

    a.text:hover {text-decoration:underline;}

     

    <div>

    <a class="shape" href="page1.html"></a>

    <a class="text" href="page2.html">Homepage</a>

    </div>

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 11:38 PM   in reply to Rik Ramsay

    <!DOCTYPE>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Untitled Document</title>

    <style type="text/css">

    body {

    margin:0px;

    padding:0px;

    }

    .content-bg {

    width:400px;

    margin:0px auto;

    padding:50px 0px;

    background:#000;

    background:../images(folder name)/image.jpg (image name) no-repeat;

    border-radius: 10px;

    font-size:24px;

    color:#fff;

    text-align:center;

    }

    </style>

    </head>

     

    <body>

    <div class="content-bg">Sample text here</div>

    </body>

    </html>

     

    Hope this is useful.By specifying the location of the image ,, it will work correctly...

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2012 2:53 AM   in reply to Shawn Irwin

    That code provides no link to a URL for the background shape or the text.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 26, 2012 4:05 AM   in reply to John Waller

    background:url(../images(folder name)/image.jpg (image name) no-repeat)

     

     

    It is just an example.The image path has to be specified

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2012 2:55 AM   in reply to John Waller

    Whats your opninion waller about this code?? i am welcome to any comments

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 29, 2012 1:08 PM   in reply to uxk

    After all the various options discussed, we don't know what code you are using.Please post a link to your online page 

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 30, 2012 7:55 AM   in reply to uxk

    a.text a:hover {

              color:#069;

    }

     

     

    a.text a:active {

              color:#069;

    }

     

     

     

    Should be -

     

    a.text:hover, a.text:active {

         color:#069;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 30, 2012 8:23 AM   in reply to uxk

    You would change your CSS to be like the below:

    a.shape {

    display:block;

    width:60px; /* enter width */

    height:90px; /*enter height */

    background-color:#999; /* changed to just color */

    border: 3px dashed pink;

    border-radius:20px;

    position:relative;

    top:0;

    }

    a.shape:hover {background-color:#333; border:3px dashed red;} /* Shape hover */

    a.text {

    display:block;

    width:66px; /* enter width */

    height:20px; /*enter height */

    font:12px/15px Arial, Helvetica, sans-serif;

    text-decoration:none;

    color:#FFF;

    position:absolute;

    top:40px;

    }

    a.text:hover, a.text:active {text-decoration:underline; color:#069;} /* Added active and color */

    EDIT:// Also, this rule, div {position:relative; width:66px;} will assign itself to all divs - I did that as an example. You will want to give the div that surrounds these buttons a class and assign it. Eg. .buttons {position:relative; width:66px;} <div class="buttons"></div>

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 30, 2012 9:28 AM   in reply to uxk

    The active psuedo will only be shown as you click it, you are looking for the visited pseudo.

     

    Add a rule like below:

    a.shape:visited {background-color:#333; border:3px dashed red;} /* Shape visited */

    It needs to go after a.shape but before a.shape:hover.

    a.shape{}

    a.shape:visited{}

    a.shape:hover, a.shape:active{}

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 30, 2012 9:49 AM   in reply to uxk

    It wasn't very clear exactly what color change you were looking for. As I explained in the last post, :active is the state when the button is being clicked and will hold that color for as long as you hold the mouse button down. :visited is the state the button/link takes once the link has been visited and will hold that color until the users cache is cleared. The :hover must go after :visited so that the hover action still works.

     

    It sounds like you want the :active state to be the orange color. Either way you can describe 4 states for the shape, a.shape, a.shape:visited, a.shape:hover and a.shape:active. How you assign the color is up to you.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 30, 2012 1:27 PM   in reply to uxk

    Ah ok, now I can understand what you are trying to achieve, which leaves me really confused to the reasons for having the shape and text as separate links.

    This is akin to navigational menu, which changes color when the user click on that specifc menu, as this gives the user a cue which page he is currently on

    That is called a persistent page indicator and has nothing to do with the 4 pseudo classes related to links. Nancy has a very good article on how to achieve this: http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

     

    It basically involves adding a class to each page of the site and targeting that class in the CSS. An example is below but you will probably want to be more descriptive with your classes.

    <body class="home">

    <a href="" class="shape"></a>

    </body>

     

    <body class="about">

    <a href="" class="shape"></a>

    </body>

     

    .home a.shape{/* add styles here */}

    .about a.shape{/* add styles here */}

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points