Browser resizing moves header image

  • Hi,
    I’ve added a twitter-linked image to my header, but it moves if I resize the browser. I’ve used the following HTML:

    Header PHP
    ‘<div id=”header_image_sociable”>

    <img src=”    https://www.mypicture.com&#8221; alt=”Twitter” />
    </div>’

    StyleCCS
    ‘#header_image_sociable {position: absolute; right:178px; top: 8px;}’

    Any ideas as to how to stop the image moving and keep it in the same place irrespective of the browser size? My site is https://www.smartgreen.org.uk

    Many thanks,
    Damian

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

  • Can you move the <div id=”header_image_sociable”> inside the <div id=”site-wrap”>

    [signature moderated]

    After you move that, in your CSS add #site-wrap{position: relative;} and change your #header_image_sociable to #header_image_sociable {position: absolute;right: 30px;top: 8px;}

    [signature moderated]

    Thread Starter Mrs Chippy

    (@mrs-chippy)

    Hi Mr Ninja,

    I’ve made those changes. Have a look…it’s still not quite what I’m trying to do. https://www.smartgreen.org.uk

    I’d like to make the twitter icon sit permanently in the pale grey area of the header right above the ‘1234’ of the telephone number, so that no matter what the browser size, it’s always in that same position.

    Any ideas?

    Cheers
    Damian

    Hmm, I don’t see the changes.

    Just to clearify, all of this…

    <div id="header_image_sociable">
<a href="https://www.twitter.com/damianburton">
<img src="https://www.smartgreen.org.uk/edit/wp-content/uploads/2012/07/twittersmall.png" alt="Twitter" /></a> </div>

    needs to go after this…

    <div id="site-wrap">
<!-- right here! -->

    Then in the <style> you need to add

    #site-wrap{position: relative;}
#header_image_sociable {position: absolute; right: 30px;top: 8px;}

    Thread Starter Mrs Chippy

    (@mrs-chippy)

    You really are a programming ninja!

    It’s working perfectly….I’d not saved it in the “site-wrap”

    Thank you very much indeed.

    Damian

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Browser resizing moves header image’ is closed to new replies.