468,556 Members | 2,367 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,556 developers. It's quick & easy.

Floating Upper Right Image

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

Jul 21 '05 #1
2 15908
fl******@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
Jul 21 '05 #2
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

Jul 21 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by mr | last post: by
14 posts views Thread by Eric Lindsay | last post: by
2 posts views Thread by Roy | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.