...

View Full Version : Difficult CSS positioning



bradix14
11-19-2012, 08:02 PM
I've attached a link to the mock up of the page I'm trying to make. I currently have everything working properly except for a big arrow image that overlays multiple divs. I'm trying to find the best way to put it where it goes, but honestly don't know where to start.
I've attached an image of what it is supposed to look like and below is a link of what it looks like now. Right now I just have it absolutely positioned, but obviously that doesn't work with any variation in window size.

any tips would be much appreciated! Thanks!

What it looks like: bradnelsoninc.com/test/layout.html (http://bradnelsoninc.com/test/layout.html)
What it's supposed to look like: bradnelsoninc.com/test/mockup.png (http://bradnelsoninc.com/test/mockup.png)

Excavator
11-19-2012, 11:58 PM
Hello bradix14,
Look what position: relative; can do for you -
#wrapper {
margin: 0 auto;
position: relative;
width: 980px;
}
Adjust your top/left positioning to suit.

CSS positioning in 10 easy steps here (http://www.barelyfitz.com/screencast/html-training/css/positioning/).

bradix14
11-20-2012, 01:08 AM
Hey, thanks. That did it. It worked, but I'm wondering why adding position:relative to the parent element changes the way the child is positioned?

especially when the child is position: absolute.

Excavator
11-20-2012, 02:04 AM
Hey, thanks. That did it. It worked, but I'm wondering why adding position:relative to the parent element changes the way the child is positioned?

especially when the child is position: absolute.

Your #wrapper is centered with left/right margins set to auto. If you make an ap element relative to the body of the document, like you had, it doesn't move because the body of the document looks just like the viewport of the browser. In other words, #wrapper can move away from it.

By making #wrapper the relative element, the ap element stays where it's supposed to.

bradix14
11-20-2012, 04:19 AM
Thank you. Way appreciate the help. Someday I'll be smart enough to help someone with this stuff!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum