CODEWITHSUNDEEP
htmlcssposition
victorhooi
victorhooi

Reputation: 17295

CSS Positioning two elements relative to each other, and keeping there during resize

I'm trying to convert a image mockup into HTML/CSS and I'm struggling to get things positioning correctly and staying in relative position as I resize the window.

JSFiddle code:

http://jsfiddle.net/victorhooi/ZcrCc/

Full-screen JSFiddle output:

http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/

Here is the image mockup:

enter image description here

I'm not sure how to pin the pink and the blue bird to the type, and have it stay in that position both at different resolutions and as you resize the window. I thought of using max-width 100% and height: auto;, however that didn't seem to quite work.

Essentially, I'd like the pink bird to always be on top of the lowercase "a", and the blue bird to always be where it is at the bottom right of the "r", and the ampersand to be vertically centred and stay there.

This is the CSS:

/*TODO - There should be a way to do the two below using child selectors?*/

#alpha-bio-heading {
    color: #faaacd;
}

#victor-bio-heading {
    color: #85b1d8;
}

/*# TODO - Is there a way to fix this better for page resizes?*/
#pink-bio-bird {
    position: absolute;
    right: 55px;
    top: 28px;
}

#blue-bio-bird {
    position: absolute;
    right: 15px;
    top: 85px;
}        

/*TODO - There should be a better way to centre this within the box.*/
#ampersand {
    position: relative;
    bottom: -120px;
}

Upvotes: 1

Views: 6848

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

You should

  • put the bird images inside the h1 elements.
  • make the h1 element to be relatively positioned.
  • adjust the left/top positioning of the images to what you want.

changes made

    #alpha-bio-heading {
        color: #faaacd;
        position:relative;
    }

    #victor-bio-heading {
        color: #85b1d8;
        position:relative;
    }

    #pink-bio-bird {
        left: 210px;
        position: absolute;
        top: 10px;
    }

    #blue-bio-bird {
        left: 245px;
        position: absolute;
        top: 60px;
    }

Demo at http://jsfiddle.net/ZcrCc/3/

Upvotes: 1

Related Questions