Solved

floating an image over site using absolute positioning

Posted on 2014-02-12
2
264 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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article discusses four methods for overlaying images in a container on a web page
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

919 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now