SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    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,545
    Mentioned
    183 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,545
    Mentioned
    183 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
    89
    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,545
    Mentioned
    183 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
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    A small typo above: {position; relative;} has to be: {position: relative;}.

    Funny, css often can give almost the same result in a different approach.
    • With Paul's method, the result is font-scaling (by the visitor) resistant; the arrow is moving with the text-size before it (and cannot be always in the horizontal center of the first line).
    • In my way, the arrow is always in the horizontal center of the strip; the arrow doesn't move by font-scaling, and can overlap the text of the first line (but here only in case of an extreme enlargement).

    Anyway, I think the {display: block} for the link has to be added (making the whole strip hoverable/clickable), and the rule that a hover everywhere on the link (not only over the image) does shift the image in his/her hover state.

    (In the testpages the "museo_slab500" font doesn't arrive, because cross-domain font grabbing is forbidden).

    For the rest I should suggest: to get a better visibility/feedback, the link text can have some text-shadow and a different color in case of the hover.

    Note: As far as I know Wordpress, the added/changed styles have to be put in a separate custom.css, and not in the normal style.css of the Theme; otherwise a Theme update can replace/overwrite the existing style.css, and your custom styles are gone. Or you have to adapt the new style.css again - if you remember over .. months what you changed.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Francky View Post
    A small typo above: {position; relative;} has to be: {position: relative;}.
    Argghh - fixed now thanks.

    Funny, css often can give almost the same result in a different approach.
    Yes, I always say that the beauty of CSS is that you can do the same thing in many ways but it is also hard for beginners to grasp which is the right way for the case in hand.

    As you say there are pros and cons for most methods so you have to weigh them up and decide on the best approach for the job in hand. This of course always depends on "what comes next"

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again to each of you.

    Paul, do you know how I can make it so the arrow changes when you hover over the text? I added display: block to the h4 a, but that didn't help.

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

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

  13. #13
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I'm not Paul but I hope he can agree.
    As I said, add:
    HTML Code:
    .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> */
    }
    In examples fcof-p2.htm and fcof-f.htm (and the source codes of them) you can see it is working.

    Edit:

    Too late

  14. #14
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh gosh - sorry I missed that! Trying to do many things at once.

    Many thanks to you both!!!


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
  •