Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help required with image positioning

    Hi,

    I'm new to the forum and am hoping someone can help please to position an image on our website www.yourholidays.com

    It is the Live Chat logo I'm trying to position, ideally underneath the Call Me Back image and I know it needs to relative to another element, but i'm struggling to find the code to make this happen.

    If anyone can help I would be really grateful, I'm not a web expert so please reply in 'laymans terms' where possible.

    Here is the code for the relevant part of the page:

    Code:
    <style type="text/css">
    p.pos_fixed
    {
    position:absolute;
    top:130px;
    right:20px;
    }
    </style>
    
    <p class="pos_fixed"><script type='text/javascript' src='//gateway4.whoson.com/include.js?domain=www.yourholidays.com'></script>
    <script type='text/javascript' >
    if(typeof sWOTrackPage=='function')sWOTrackPage();
    </script></p>
    Many Thanks in Advance

    Craig

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Where do you want it positioned?

    EDIT: Sorry, read your post with more attention this time.

    You need to move your .pos_fixed element so it's within #header. That already has position:relative set, so then you can set the position of .pos_fixed using right and top as now - the difference being that the element will then be positioned relative to #header, rather than to the whole page (as now).

    Elements with position:absolute are positioned with respect to the closest parent element that has position:relative or position:absolute set - or if none exist, relative to the body.
    Last edited by SB65; 02-07-2012 at 12:21 PM.

  • Users who have thanked SB65 for this post:

    cra1g (02-07-2012)

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    25
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Hello,

    Like SB65 said move the whole:

    Code:
    <p class="pos_fixed"><script type='text/javascript' src='//gateway4.whoson.com/include.js?domain=www.yourholidays.com'></script>
    <script type='text/javascript' >
    if(typeof sWOTrackPage=='function')sWOTrackPage();
    </script></p>
    Into the header div..

    I would also look at setting it to a div class not a p class...

    Hope this makes sense.

    P.S Nice SITE!!

    Thanks,

    Scott

  • Users who have thanked ScottBaxter for this post:

    cra1g (02-07-2012)

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks SB65 and ScottBarker I'm not sure how I did it but after following your instructions I've got the image positioned where I wanted it, really appreciate your help.

    Only one problem I have is on IE is that on certain resolutions the Testimonials tab dropped onto 2nd line (this may have nothing to do with the Live Chat logo)
    Is there anything I can do to rectify this.

    Thanks for the comments on the site, but I can't take all the credit for it, we had a company build it for us, I'm just making changes to the site.

    Out of interest would you recommend any online training sites or courses I could go on to improve my understanding of web design, I'm based in North East England (if that makes any difference)

    Thanks again,
    Craig

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    25
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by cra1g View Post
    Thanks SB65 and ScottBarker I'm not sure how I did it but after following your instructions I've got the image positioned where I wanted it, really appreciate your help.

    Only one problem I have is on IE is that on certain resolutions the Testimonials tab dropped onto 2nd line (this may have nothing to do with the Live Chat logo)
    Is there anything I can do to rectify this.

    Thanks for the comments on the site, but I can't take all the credit for it, we had a company build it for us, I'm just making changes to the site.

    Out of interest would you recommend any online training sites or courses I could go on to improve my understanding of web design, I'm based in North East England (if that makes any difference)

    Thanks again,
    Craig
    Hi Craig,

    The best way to learn is to look at w3schools website but I would say just trial and error like you are doing now!

    If you need any more help let me know.

    Thanks,

    Scott

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I can't recreate your Testimonials tab dropping at any resolution in IE8 - in what version are you seeing this? The chat logo shouldn't have affected this at all since position:absolute takes the element out of the flow of the document and shouldn't impact the other elements in that div.

    Best way of learning is just by doing I think. There's lots of references in the sticky at the top of this forum. W3Schools has a bit of an iffy reputation - try HTMLDog.

    (The North East is a fabulous place to live and work, incidentally)

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks again both. I have used w3schools a fair bit but not HTML Dog but that is now bookmarked.

    If you ever need a holiday you know where to come


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •