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

16173

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

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Floating Upper Right Image

Similar topics