...

View Full Version : Help required with image positioning



cra1g
02-07-2012, 11:31 AM
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:



<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

SB65
02-07-2012, 12:11 PM
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.

ScottBaxter
02-07-2012, 12:20 PM
Hello,

Like SB65 said move the whole:



<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

cra1g
02-07-2012, 12:41 PM
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

ScottBaxter
02-07-2012, 01:09 PM
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

SB65
02-07-2012, 01:10 PM
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)

cra1g
02-07-2012, 01:25 PM
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 ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum