?
Solved

floating an image over site using absolute positioning

Posted on 2014-02-12
2
Medium Priority
?
299 Views
Last Modified: 2014-02-12
I work on a mac. Trying to get he display cabinet (on right) to float over navigation bar and image of man working.  I got it to sit nice in some browsers but in other browsers, it goes off the page.  Any advice on keeping the display actually on the website (and not on the wood background)?

http://nsitedesigns.com/nsitedesigns/lakeshore/test.html

Safari screenshot
http://screencast.com/t/HWi2pAq6Q

Chrome screenshot
http://nsitedesigns.com/nsitedesigns/lakeshore/test.html

Firefox screenshot
http://nsitedesigns.com/nsitedesigns/lakeshore/test.html
test.html
0
Comment
Question by:nsitedesigns
2 Comments
 
LVL 8

Accepted Solution

by:
Adrian Crabtree earned 2000 total points
ID: 39853939
Hi nsitedesigns,

You need to set your .container to a position: relative. This will then give a bounding box for the img you want to position absolute. Your new CSS for .display and .container would be this:

.container {
  width: 946px;
  background-color: #FFF;
  margin: 40px auto;
  position: relative;
}
.display {
  position: absolute;
  top: 90px;
  right: 20px;
}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 39853980
Hallelujah!

Should have asked hours ago.  I have been futzing with it for about 2 hours.  Thanks again!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Before you approach an Ionic Mobile App development company for developing mobile apps using the ionic framework, you must know why you should choose the framework. Let's try to understand that through this article.
An ASP.NET Web Form User Control is not newly introduced in ASP.NET. In fact, it was an old technology yet still playing a role to generate web content, especially when we want to use it to have a better and easy way to control part of the web conteā€¦
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question