Stylesheets - Floating Upper Right Image

Author

Floating Upper Right Image

fleemo17@comcast.net

2005-05-18, 11:32 pm

I thought this would be very simple to set up in CSS, but I'm having
difficulty making it work in several browsers. I'd simply like to have
an image float at the upper right hand corner of my web page. If the
browser is expanded, the image would cling to the browser's right edge,
remaining in the upper right hand corner regardless of the window size.

I attempted this using the following CSS:

img.photofloat { position: relative; top: -108px; float: right; }

It seems to work pretty well in the PC browsers I've tested it on, as
well as Firefox and Netscape 7.2 on the Mac, but the image just
disappears when you widen the page in Safari and Opera on the Mac, and
appears too low in IE on the Mac. Is there a way to make this work on
most modern browsers?

Here's an example of what I'm talking about :

http://tinyurl.com/89uru

-Fleemo

Gus Richter

2005-05-19, 4:23 am

fleemo17@comcast.net wrote:
> I thought this would be very simple to set up in CSS, but I'm having
> difficulty making it work in several browsers. I'd simply like to have
> an image float at the upper right hand corner of my web page. If the
> browser is expanded, the image would cling to the browser's right edge,
> remaining in the upper right hand corner regardless of the window size.
>
> I attempted this using the following CSS:
>
> img.photofloat { position: relative; top: -108px; float: right; }
>
> It seems to work pretty well in the PC browsers I've tested it on, as
> well as Firefox and Netscape 7.2 on the Mac, but the image just
> disappears when you widen the page in Safari and Opera on the Mac, and
> appears too low in IE on the Mac. Is there a way to make this work on
> most modern browsers?
>
> Here's an example of what I'm talking about :
>
> http://tinyurl.com/89uru
>
> -Fleemo

The concept is a little off. What you want is to position the banner
image top/left and the photo image top/right in the viewport. Class the
banner image, use the background shortcut and remove the orphan div
closing tag and try this:

<body>
<img class="banner" src="images/zorg.jpg" ........>
<img class="photo" src="images/photo1.gif" .........>
[all the rest of the stuff]
</body>

body {
padding:0; margin:0; font-family: arial, helvetica, sans-serif;
background:#fff url(images/cloudtile.jpg) repeat-x; }
img.banner {position:absolute; top:0; left:0;}
img.photo {position:absolute; top:0; right:0;}
div.content {background-color:#fff; margin: 180px 72px;}
/* for same vertical spacing ^^^^^ */

--
Gus

fleemo17@comcast.net

2005-05-19, 7:27 pm

Gus, thanks so much. When I read your code, it was like "ButOfCourse!"
Thank you for shedding some light on that dark corner of my brain.

All the best to you.

-Fleemo