SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I move the arrow to the right?

    URL: http://goo.gl/cuwTZ9

    Hello!

    I am having trouble with the arrow that's in the first box on the right side of the page (New Here?...). I need it to appear to the right of the words NEW HERE? but I can't figure out how to do that without messing up the hover values. Do you see what I'm doing wrong?

    Thanks!
    Susan

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As you have a sprite you will need to add a span after the words "new here" and apply the image to the span.

    Set the span to display:inline-block and set the height and width to match your sprite as usual.

    You could absolutely place the arrow using :after but the span is more reliable because it will sit at the end of the text without guessing at a position.

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After "NEW HERE?" in your HTML code, add this "      ".

    Then, in your CSS code for .new-here h4 a, set the background to "url(images/arrow.png) 115px 0 no-repeat;" and on the hover effect set the background to "url(images/arrow.png) 115px -25px no-repeat;"

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ninjadev View Post
    After "NEW HERE?" in your HTML code, add this "      ".
    Thanks for the suggestions and although it may work but there are a couple of issues with this approach if you don't mind me pointing them out.

    First of all we never use html for presentation purposes only as that's what CSS is for so those row of non breaking spaces are not a good idea. (Never use more than one non breaking spaces to achieve a layout effect.)

    Then, in your CSS code for .new-here h4 a, set the background to "url(images/arrow.png) 115px 0 no-repeat;" and on the hover effect set the background to "url(images/arrow.png) 115px -25px no-repeat;"
    That's a rather fragile way to place the image as it will depend on the amount of text present and should the text change (or be resized by the user) it will not be in the correct place. There is also a risk that the sprite may show both states in some browsers and using background images on inline elements isn't fully defined in the specs.

    Adding a specific element is the best approach in this case although it means adding extra html but is much more usable, reliable and future proof.

  5. #5
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are right, I admit it's a pretty fragile technique.

    The only other option you have, which is a much better, solid one, is to create a separate link for "CLICK HERE", and then what I told you for the background. That's the only way you can get around with this.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both of you for your time! I had to put this site aside for a couple days, but now I'm back on it.

    Paul, I'm almost there using your suggestion, but there are a couple issues that I can't figure out.

    1. How can I move the arrow so that it's centered on the text? Anything I try also affects the text but I need the text to stay put.

    2. How can I make it so that when you hover over the text, the arrow changes its colors according to the sprite?

  7. #7
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi susannelson,
    You can add:
    Code:
    .new-here h4 a {
        display: block; /* to make the whole ochre strip hoverable/clickable */ 
    }
    .arrow {
        position: absolute; /* to isolate the arrow from the "normal flow" of the text */
        left: 155px; /* to position the arrow on the first line at 155px distance from left (and 0px from top, which is the default) */
    }
    .new-here h4 a:hover .arrow {
        background-position: 0 -25px; /* to show the hover part of the sprite, triggered by a hover somewhere over the <a> */
    }
    While the arrow-box is in the <a> container, the cascade-rule says that the .arrow should follow the instructions after the a:hover .arrow. Then the sprite is pulled upward (negative value) with 25px.
    The .new-here box has already a {position: relative}, so the 155px left is starting at the left side of the .newhere box: as desired.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by susannelson View Post
    Thanks to both of you for your time! I had to put this site aside for a couple days, but now I'm back on it.

    Paul, I'm almost there using your suggestion, but there are a couple issues that I can't figure out.

    1. How can I move the arrow so that it's centered on the text? Anything I try also affects the text but I need the text to stay put.

    2. How can I make it so that when you hover over the text, the arrow changes its colors according to the sprite?
    Hi,

    It seems you have it almost working now. Just set the vertical-alignment and adjust horizontally with a margin.

    Code:
    .arrow {
        background: url("images/arrow.png") no-repeat 0 0;
        display: inline-block;
        height: 25px;
        margin: 0 0 0 8px;
        vertical-align: middle;
        width: 25px;
    position:relative;
    top:-1px;/* fine adjustment*/
    }

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Do you mean this:
    Code:
    .new-here h4 a:hover span{background-position:0 -25px}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •