Floating Upper Right Image

fleemo17

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

Subscribe Post Reply

16144

Gus Richter

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

fleemo17

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

by: Markus Seibold | last post by:

Hello NG, i have a picture galerie with thumbnails. I want to add JS functionality that opens a new window with an enlarged version of the image when the user clicks on the thumbnails picture....

Javascript

MAC image map problem

by: mr | last post by:

i am working on a site that uses image maps for certain files. ive been having problems to make these mapped areas work on mac's (os 8, ie). view the site here: http://navigation.emolife.net ...

HTML / CSS

Want box around an image with flowing text

by: Eric Lindsay | last post by:

I've seen a page using display, and especially display table that did some neat things with boxes, but basically it only worked with Mozilla browsers. Fell over fairly badly with Opera and Safari...

HTML / CSS

Where is the image for the close (X) icom in the window upper right NC corner

by: Just Me | last post by:

I need an image that agrees with the one shown at the right end of the title bar. That is, the image for the button that closes the window. I believe it changes with changes in the theme so I...

Visual Basic .NET

How to disable 'Close box' in upper right of form

by: dbuchanan | last post by:

It's easy to disable the Minimizebox and Maximizebox because they are members of the form, but how do I disable the Closebox or whatever it is called??? (Why are some things so hard to find...

Visual Basic .NET

Open a form upper right corner

by: Roy | last post by:

Hi all, I need to open a form in the uppper righ of the screen. My approach is: create a function that returns Width of user's machine resolution: dim x as integer =...

Visual Basic .NET

Trying to add an image within a page

by: rsteph | last post by:

I've got some product information pages, with images and text, all setup within a table. I'm trying to add a small image in the upper right hand corner of the content div (where all the important...

HTML / CSS

Mouseover image won't load in the right image holder

by: therio7 | last post by:

Anyone can help me with my code? If you look at my page http://www.vitrail-entete.com/tdj/quoi_de_neuf_test.php When you mouseover the thumbnails on each row all the larger images appear in...

Javascript

Create image from url: multiple problems

by: Thew | last post by:

<?php if(isset($_GET) && is_numeric($_GET)){ $img = $_GET; $imgarray = array ( '1' => 'http://www.path/to/image1.png', '2' => 'http://www.path/to/image2.png', '3' =>...

PHP

Access Europe meeting on Wed 2 August - An Access Developer Guide to creating applications in Blazor

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...

Microsoft Access / VBA

Steps manually installing IntelliJ IDEA.

by: erikbower65 | last post by:

Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...

General

Access Europe meeting on Wed 6 Sept - Database Analyzer and other tools

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...

Microsoft Access / VBA

How to insert a new record in a database

by: Taofi | last post by:

I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...

DB2 Database

Cancel Print Action if Sub form has No Records

by: DJRhino1175 | last post by:

When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...

Microsoft Access / VBA

Python code for finding the longest common subsequence

by: Rina0 | last post by:

I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...

Python

To verify entry of a dropdown

by: DJRhino | last post by:

Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...

Microsoft Access / VBA

How does React native implement an English player?

by: lllomh | last post by:

How does React native implement an English player?

Mobile Development

How to calculate date of retirement from date of birth

by: Mushico | last post by:

How to calculate date of retirement from date of birth

Data Management

Floating Upper Right Image

Similar topics