PDA

View Full Version : Floating image


JoeH
04-17-2013, 11:49 AM
Hi, hope someone can help - the last time I posted on here it was to great amusement to a few as this site uses tables - well - you can have another chuckle!

I'm testing the concept of using a floating image on this page -
http://www.provision-cctv.com/videos_copy.html

I wanted the 'test' image to be flushed right and would sit 'on-top' of the page. i found some code had a play, changed the Styles.css and this is the result - not really what I wanted!

So i was hoping that someone may be able to push me in the right direction. In an ideal world I would love the test image to be always top right when scrolling down the page. Any thoughts?

Many thanks.

Joe.
--

gentleone
04-17-2013, 01:19 PM
You have this:
<img src='images/test.png' style="float-image" />
Wich should be this:
<img src='images/test.png' class="float-image" />
Furthermore you've placed the image in the <head> while it should be somewhere in between the <body> tags.

JoeH
04-17-2013, 01:25 PM
Ideal - I'll give that a try!

many thanks for your help - enjoy your day!

Joe.
--

JoeH
04-17-2013, 01:44 PM
Okay,

Again, many thanks for the reply - I've made the suggested changes (I think!) I've uploaded the corrected page, and I'm a step closer to what I'm searching for - however I don't think the test graphic stays on top when you scroll down the page.

I'm only able to check this by making my 'page' smaller in the browser so to obtain a vertical scroll - unless that is not the correct way to check?

Thanks.

Joe.
--

gentleone
04-17-2013, 02:15 PM
In your css for .float-image change 'position: absolute' to 'position: fixed'

JoeH
04-17-2013, 02:29 PM
Super!

As we would say in the UK - That's just what the doctor ordered'!

Just need to tweak and tidy up the test graphic.

Again, thanks for your trouble.

Regards.

Joe.
--

JoeH
04-18-2013, 09:35 AM
Thanks for your help - almost there! The modification works as i expected it to - even in IE! - However, with IE - there always seems to be a sting in the tail and it displays an ugly border around the image. So after doing a little delving I have added the following the the style.css sheet :-

}
a .img {
border: 0px;
outline: 0px;
}

But this has not done the trick - any thoughts?

Many thanks.

Joe.
--

gentleone
04-18-2013, 10:23 AM
img is a HTML tag and not a defined classname, so you need it without the period in front.

a img {
border: 0;
outline: 0}

JoeH
04-18-2013, 10:46 AM
Great - many thanks - I think i understand - I've change the style sheet - but no joy in IE - as it's a HTML tag - should i change the code on the page as well? Sorry.

Thanks.

Joe.
--

JoeH
04-18-2013, 11:22 AM
Think I've sorted it!

http://www.provision-cctv.com/videos_test.html

Again, many thanks.

Joe.
--

gentleone
04-18-2013, 11:33 AM
Sorry, I didn't payed attention well enough. This is actually all you need to get rid of the blue border in IE

img { border: 0 }

JoeH
01-22-2014, 12:28 PM
Sorry to resurrect an old thread - but I guess I've made a change to the CSS file somewhere, as what worked a dream before has now gone pear shaped!

http://www.provision-cctv.com/videos_test

For some reason the 'promo' graphic is flush left, yet the last time i used it it did as it was told to do and flush right.

Can anybody please offer any advise on what I may have changed to cause this?

Many thanks.

Joe.
--

gentleone
01-23-2014, 12:27 AM
You somehow deleted the css of that image. I believe you had something like this. Put this in your CSS.

.float-image {
position: fixed;
top: 0;
right: 0
}

This will stick it to the right top corner.

JoeH
01-23-2014, 09:03 AM
Many thanks for your response and help. The current code in the css files reads:-

}
.float-image {
position: fixed;
top: 0;
right: 0;
width: 114px;
height: 118px;
background: url(images/test.png) no-repeat;
display: block;
}

Yet it still flushes to the left? Any thoughts?

Again, many thanks.

Joe.
--

gentleone
01-24-2014, 12:35 PM
you have a double closing bracket in style.css. Delete one and you should be good.


a img {
border: 0px;
outline: 0px;
}

} <------- here

.simplelinkbig {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: strong;
color: #024b90;
text-decoration: none;
text-align: centre;
padding-right: 5px;
padding-left: 5px;
}

JoeH
01-24-2014, 12:51 PM
Sorry - should have spotted that.

Many thanks for your time!

Joe.
--

gentleone
02-01-2014, 02:29 PM
You're welcome! You can also validate your CSS wit a CSS validator which would spot the error for you too.