Grow your CSS skills. Land your dream job.

Moving a span inside a h1 to create a-two-part-h1

  • # March 25, 2013 at 5:03 am

    Hey,
    I am currently having a problem. For a website, I need to style a h1, which is divided into two parts: The first word (in an orange box) and the rest (light blue box). The orange box is on top and left of light blue one, so they just slightly overlay. Here’s my problem: I can’t do it. I try it with adding a span to the first word, I tried moving it with padding, margin and so on. I moved the orange box, but the blue one moves too, every time I move the orange one. I can’t move them individually somehow.

    Here is my code:

    http://codepen.io/anon/pen/vFkqy

    # March 25, 2013 at 5:20 am

    use position:absolute to move individually

    # March 25, 2013 at 5:27 am

    I have no idea of the end result you’re looking for. Maybe it’s just me.

    # March 25, 2013 at 5:38 am

    Hard to explain, but yoyo was right. Thank you!
    [img]http://i.imagebanana.com/img/xc48zjix/sup.JPG[/img]

    # March 25, 2013 at 5:44 am

    Right, okay. That image helps clarify.

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

You must be logged in to reply to this topic.

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