Grow your CSS skills. Land your dream job.

Positioning and Link Span help

  • # May 23, 2013 at 10:14 am

    Hi everyone,

    Two questions for you.

    Please see this diagram: [http://i.imgur.com/dja3vOb.png](http://i.imgur.com/dja3vOb.png “http://i.imgur.com/dja3vOb.png”)

    1 – how do i make two text links absolutely positioned on either side of a fixed centered image?

    2 – how do i markup the links so that the tags sit on top of the main word and are aligned with the center of the page (left/right text align)?

    Thanks!
    Jony

    # May 23, 2013 at 10:21 am

    So you want them vertically centered **regardless** of the height of the the ‘outer’ div?

    >so that the tags sit on top of the main word

    Not sure what you mean by this.

    Perhaps a better image example?

    # May 23, 2013 at 10:27 am

    Hi Paulie_D

    Here is the actual design: [http://i.imgur.com/051Qwd6.png](http://i.imgur.com/051Qwd6.png “http://i.imgur.com/051Qwd6.png”)

    # May 23, 2013 at 10:36 am

    @jony, I’m as confused as @Paulie_D on what you meant on point #2.

    Here’s a codepen that replicates your design though:

    http://codepen.io/ChrisPlz/pen/fxtCu

    # May 23, 2013 at 10:44 am

    @ChrisP @Paulie_D Sorry guys, the forum played a trick apparently. “so that the tags sit on top of the main word” should have read “so that the span sit on top of the main word”

    This week’sBrunch
    This week’sLunch

    To me it makes sense that the lunch and brunch classes are text-aligned left and right, so that takes care of the positioning of the span (relative to the center); I just don’t know how to make the spans appear on top of the main word

    # May 23, 2013 at 10:47 am

    Why use spans?

    No reason that can’t both be links wrapper in a h tag.: http://codepen.io/Paulie-D/pen/xckbi

    If you **really** need this to be a single link there are other options.

    Sometimes it’s best not to overthink these things.

    # May 23, 2013 at 10:53 am

    @Paulie_D, ideally when one hovers over the text, both the top and the bottom changes colours, which is why I assumed the span class was the way to go. Is there any other way you can think of?

    # May 23, 2013 at 10:59 am

    Well you **could** do that with a ‘adjacent’ selector.

    # May 23, 2013 at 11:16 am

    I have [forked](http://codepen.io/unasAquila/pen/fEatb) @ChrisP Pen maybe helpful

    # May 23, 2013 at 11:17 am

    Second thoughts…sometimes a `
    ` and a `` is the simplest option.

    http://codepen.io/Paulie-D/pen/wJmFB

    # May 23, 2013 at 3:30 pm

    Here’s my quick and dirty pen

    http://codepen.io/wolfcry911/pen/idwxs

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

You must be logged in to reply to this topic.

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