Help with CSS

[power fuse0]

Anyone know a way to keep a div over the top over everything and to stop it from scrolling when you scroll up or down a page? Like the facebook Chat.

I thought it would be something to do with position:fixed; and z-index:(above other values); but it didn't seem to help.

OH I also want it stuck to the bottom of the browser (llike facebook chat haha)

If anyone has any know how on doing this with CSS it would be nice. Otherwise i'll have to look in to a way of doing it with javascript.

[iGoD ReLeNtLeS]

position: fixed;

that should do it ;)

if that doesnt also add, that will fix floating collisions

clear: both;



as for positioning, try this

padding-top: 100%;

then gradually decrease from 100% until you find it sitting at the bottom of the window nicely. There probably is a better way than that though.

[power fuse0]

http://squidgytriangles.co.uk/temp/vinyl-designs/

It's the big block of lettering I want to stay at the bottom of the screen in the center at all times. So it's x position is fine but y it needs to be at the bottom. And so when you re-size the window it stays at the bottom of the browser.

[Toonshorty]

http://squidgytriangles.co.uk/temp/vinyl-designs/

It's the big block of lettering I want to stay at the bottom of the screen in the center at all times. So it's x position is fine but y it needs to be at the bottom. And so when you re-size the window it stays at the bottom of the browser.

position: absolute;
bottom: 0;

No idea how you'll get it in the centre of the page though, that's a pain to do with position: absolute.

You could get:

left: 50%;
background: url('img.png') centre;

and make the background extend so that it looks good on all resolutions.

[power fuse0]

position: absolute;
bottom: 0;

No idea how you'll get it in the centre of the page though, that's a pain to do with position: absolute.

You could get:

left: 50%;
background: url('img.png') centre;

and make the background extend so that it looks good on all resolutions.

The image is 1500px wide, so it should cover most resolutions.
I'll give that a go though.

also if the position is absolute won't it scroll with the page?

[Toonshorty]

The image is 1500px wide, so it should cover most resolutions.
I'll give that a go though.

also if the position is absolute won't it scroll with the page?

If it's absolute it'll be 0px from the bottom of the page, always.

So as you scroll it stays at 0px from the bottom.

I believe it works like that.

[power fuse0]

Yeah it scrolls with the page now, i think it has to be position fixed

It should work with this code aparently, but it doesn't want to


<div style="position: fixed; bottom: 0; width: 100%; height: 150px;">&nbsp;
</div>

Ok, I have it stuck to the bottom, buuuut, the image isn't centerised. So, I need to figure out how to keep the center of the image in the center of the page even when you re-size the browser.

[power fuse0]

Problem solved.

I was a derp, the answer was simple when it came to me, just put an absolute div with the image in it, inside of the fiixed div.

Thanks for your help guys :)

[aidan2007]

Problem solved.

I was a derp, the answer was simple when it came to me, just put an absolute div with the image in it, inside of the fiixed div.

Thanks for your help guys :)

To save on divs you could position the <img> absolutely within the fixed div instead of putting the image within an extra div. I used to go around putting everything in a div but that just pointlessly increases file size and markup. It's actually got a name, divitis. Lol.

To centre something in the page btw you give it a fixed width and put margin:0 auto; on it. This doesn't work if it's floated left though and it has to be inside an element that is width:100%;

[power fuse0]

Ahh thank you Aidan, hey, you wouldn't by any chance know if there is a way to click through images?

also what colour is the background of this site to you?

www.vinyl-designs.co.uk

[aidan2007]

What do you mean click through the images?

Background colours to me seem to be orange/tan brown and a kind of salmony pink.

Sent from my HTC Desire HD using Tapatalk

[power fuse0]

What do you mean click through the images?

Background colours to me seem to be orange/tan brown and a kind of salmony pink.

Sent from my HTC Desire HD using Tapatalk

Well at least the colours are right for most. I opened it up on my laptop and it was green <_<.

Click through images, so if I were to have a 500px tall png with transparency over the top of my website, i'd like to be able to click on what is behind the image. So its like the image is there, but is not selectable.
(so if the navigation was behind it on smaller screens you would still be able to navigate the website, without a big bulky image in the way)

[aidan2007]

Well at least the colours are right for most. I opened it up on my laptop and it was green <_<.

Click through images, so if I were to have a 500px tall png with transparency over the top of my website, i'd like to be able to click on what is behind the image. So its like the image is there, but is not selectable.
(so if the navigation was behind it on smaller screens you would still be able to navigate the website, without a big bulky image in the way)

That's not possible no. The element sits on top of what's beneath it, even if you set a transparent background. Think of websites as lots of boxes that sit next to eachother or overlay eachother.

If you set the transparent background you will be able to see what is beneath but not click it as you are actually clicking on the element on top (the one with the transparent background)

There is a thing called z-index that you can use to alter what order elements should overlap eachother. But if you tried to use that to do what you want to do (setting the z-index of what you want to click higher than the element with the transparent background) then the element with your transparent background would just be hidden behind what you wanted to be able to click on, thus defeating the objective.

Elements must have position:relative in order to use z-index as far as i know.

[power fuse0]

Nah, position:fixed uses z-index aswell. And I do realise how websites work, I was just wondering if there was a css property that allows to you click through an image. I guess not though rom what I have seen. Thanks though :]

[aidan2007]

Nah, position:fixed uses z-index aswell. And I do realise how websites work, I was just wondering if there was a css property that allows to you click through an image. I guess not though rom what I have seen. Thanks though :]

Ah yea that's what I meant, requires a position rule. I said relative just coz you can add that to stuff without it effecting its behaviour.

Sent from my HTC Desire HD using Tapatalk