CSS Absolute positioning

wclew · #1 (**permalink**) 01-24-2004, 06:12 PM

I have an image that has 100px width and 123px height, I would like to have it placed permanently in the bottom right corner of the page. How can I do this with CSS Absolute positioning? I would like to use % to account for all screen resolutions. The problem is that it uses the top & left edges of the image as the point to position accordingly, so if you set the left and top style attributes to 100% it moves the image off of the bottom right corner of the screen. How can I get it to take into account the size of the image and place the bootom & right edges on the edge of the screen exactly?
Any help would be appreciated.
Thanks,
Dennis

mikmik · #2 (**permalink**) 01-24-2004, 06:29 PM

Not so!
You can use the bottom and right edges to postion absolutely as well, wclew.
But beware, when you postion 'absolutely, you take an element out of the 'flow', which means that you have to design with other properties to account for things that will then render and appear in rthe same postion in the page.

Mayhaps you can give me an example of the page to work with. I would love to teach you some posiyioning skills, and learn to use them better myself in the process.

wclew · #3 (**permalink**) 01-24-2004, 06:56 PM

Thanks Mik, I didn't know you could set the bottom & right. I'm not concerned about interupting the page flow, I want the image to float above everything else. I will give it a higher z-index. I will appreciate any help you'll give. I will send you the page later, I have to finish the image first.
Thanks again,
Dennis

mikmik · #4 (**permalink**) 01-24-2004, 07:10 PM

Okay,wclew.
I learned how to use CSS from the links on this pagr - it is the secret to my success!

http://glish.com/css/

here is about box positioning
http://www.thenoodleincident.com/tut...ment/text.html

and finally: ATTENTION ALL CSS DESIGNERS!

http://www.mezzoblue.com/css/cribsheet/

By going through the steps on this page, a person can learn CSS and build a page, learning the order of approach.

I know of one other page that is very, very good for ALL the box/positioning scenario's, it is much easier to understand than anything above, but I can't find it at the moment.
I will get it and be back for you, wclew.

Oops hahaha!
Weposted at the same time.
I see you have what you need, and you do not have to worry about the z-index. If it is positioned absolutely, it will stay 'on top'.

ranjan · #5 (**permalink**) 01-24-2004, 07:43 PM

Use the image as the background image of the body

body {
background-image:file_with_path.jpg);
background-position: right bottom;
background-repeat: no-repeat;
}

wclew · #6 (**permalink**) 01-25-2004, 05:59 PM

OK, guys. I tried both suggestions and have gotten mixed results. How do I get the image to stay in the bottom right corner as you scroll the page?

mikmik · #7 (**permalink**) 01-25-2004, 06:07 PM

What bromser?
But if you use ' position:fixed ' it will stay there and everything will scrool over it
body {
background-image:file_with_path.jpg);
background-position: right bottom fixed;
background-repeat: no-repeat;

}

Also, check the last link that I posted in the other thread here, por "Positioning"

Here is a tutorial all about positioning: http://www.brainjar.com/css/positioning/
But it notes that IE6 does not support fixed positioning. That is news to me.

Here is the other link I provided, as ranjan says, "At the risk of being redundant" (love it :o)
http://www.d.umn.edu/itss/support/Tr...esign/css.html
It is a big links page to every kind of CSS tutorial, there is a 'positioning' category, etc. It is fantastic!
Come back to this topic and post if it still isn't working for you, I still have some suggestions to try next.
Just be sure to give us the 'DTD' that you have in the top of your 'head', ie.-before the first <html> tag...

disciple · #8 (**permalink**) 01-25-2004, 07:20 PM

#bottomright {
position: absolute;
width:100px;
bottom: 0px;
right: 0px;
}

This will work as long as you don't have to scroll the page. If you have to scroll the page then I believe that you will need a little javascript to keep it in place.

wclew · #9 (**permalink**) 01-25-2004, 07:55 PM

Thanks guys.

Quote:

Originally Posted by disciple

#bottomright {
position: absolute;
width:100px;
bottom: 0px;
right: 0px;
}

This will work as long as you don't have to scroll the page. If you have to scroll the page then I believe that you will need a little javascript to keep it in place.

I tried this before and it does scroll. How can I keep from scrolling?

disciple · #10 (**permalink**) 01-25-2004, 07:59 PM

body{
font-family: Trebuchet MS,Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background: fixed url(picture.gif) bottom right no-repeat;
}

wclew · #11 (**permalink**) 01-25-2004, 08:01 PM

Quote:

Originally Posted by mikmik

What bromser?
But if you use ' position:fixed ' it will stay there and everything will scrool over it
body {
background-image:file_with_path.jpg);
background-position: right bottom fixed;
background-repeat: no-repeat;

}

I'm having troubl getting this style to work, I'm using IE 6.0. Can I make this look like it's above everything else?

Quote:

Originally Posted by mikmik

Come back to this topic and post if it still isn't working for you, I still have some suggestions to try next.
Just be sure to give us the 'DTD' that you have in the top of your 'head', ie.-before the first <html> tag...

Belive it or not, I don't have a DTD line. I'm using an old FP version that is hacking my CSS so I'm just using notepad right now.

disciple · #12 (**permalink**) 01-25-2004, 08:04 PM

body{
font-family: Trebuchet MS,Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background: fixed url(picture.gif) bottom right no-repeat;
}

This should work with or without a dtd.

wclew · #13 (**permalink**) 01-25-2004, 08:13 PM

Quote:

Originally Posted by disciple

body{
font-family: Trebuchet MS,Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background: fixed url(picture.gif) bottom right no-repeat;
}

This should work with or without a dtd.

I can't get this to work either. I wonder if it is my browser.

wclew · #14 (**permalink**) 01-25-2004, 08:16 PM

Oops, never mind. I had a typo that caused the problem. It works great. Thank you!

wclew · #15 (**permalink**) 01-25-2004, 08:21 PM

Now, is there a way to also get an image to stay in the top left corner while it scrolls? Have both stay put?

mikmik · #16 (**permalink**) 01-25-2004, 08:36 PM

body{
font-family: Trebuchet MS,Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background: fixed url(picture.gif) bottom right no-repeat;
}
Then make another one like this!
body{ background: fixed url(picture.gif) top left no-repeat;
} (Now you are a css 'hacker' lol)

Quote:

Belive it or not, I don't have a DTD line. I'm using an old FP version that is hacking my CSS so I'm just using notepad right now.

It probably means that your page will render id 'standard html 4.01 transitional if you don't have a DTD, you naughty guy LOL
You are just a troublemaker LOL
The reason I asked is that it can affect how the browser 'renders' the code.

disciple · #17 (**permalink**) 01-25-2004, 08:40 PM

Are you are trying to get one in the top left AND one in the bottom and not have either one of them scroll with the browser window? If so I don't think it's possible with just css.

But I have been wrong before. :-)

wclew · #18 (**permalink**) 01-25-2004, 11:45 PM

Quote:

Originally Posted by mikmik

body{
font-family: Trebuchet MS,Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background: fixed url(picture.gif) bottom right no-repeat;
}
Then make another one like this!
body{ background: fixed url(picture.gif) top left no-repeat;
} (Now you are a css 'hacker' lol)

I tried to do this and it didn't work. It just gave me whichever one I listed last. I tried having 2 body tags to go with them but that didn't help either. Any more ideas?

Quote:

Originally Posted by mikmik

You are just a troublemaker LOL

You got that right, buddy! ;o)

wclew · #19 (**permalink**) 01-25-2004, 11:47 PM

Quote:

Originally Posted by disciple

Are you are trying to get one in the top left AND one in the bottom and not have either one of them scroll with the browser window?

Yes, that's exactly what I want. Any ideas?

mikmik · #20 (**permalink**) 01-26-2004, 12:23 AM

Could you try this:

html{ background: fixed url(picture.gif) top left no-repeat;
}

body{
font-family: Trebuchet MS,Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background: fixed url(picture.gif) bottom right no-repeat;
}
Html is actually the 'root' element of the browser window, and this is a handy way to do a lot of basic formatting.
I hope this works. Just remember that the 'body' will inhereit from 'html', and may be a reason if this doesnt work.

We can also try individual div's with transparency too if this does not co-operate.

wclew · #21 (**permalink**) 01-26-2004, 12:27 AM

Quote:

Originally Posted by mikmik

Could you try this:

html{ background: fixed url(picture.gif) top left no-repeat;
}

body{
font-family: Trebuchet MS,Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background: fixed url(picture.gif) bottom right no-repeat;
}

Nope, that didn't work either. I just got the body part to show up.

mikmik · #22 (**permalink**) 01-26-2004, 02:54 AM

wclew wrote

Quote:

Nope, that didn't work either. I just got the body part to show up.

Dang!
Make sure that you don't have a background color specified in your 'body' or it will cover up anything that is 'under' it ie. 'html'. Put bg-color in there (html).
I am going to make a page for myself ro experiment on, I have twice now, found ou