WildSpirit

# January 11, 2010 at 11:42 pm

If you look at this site and make your screen wider or narrower you can see that everything on the page EXCEPT for the horses in the top header move/adjust accordingly.

http://superiorstables.wildspiritdesign … ions3.html

I’ve tried switching to position relative but that doesn’t seem to work either and was leaving a huge gap between my header and where the main content (the pictures) starts.

I originally had the horses as part of my header image rather than separate but since the nose of the horse sticks out and the image i used for the main copy area was shorter things were not lining up correctly. Maybe if I choose this option I need to leave "blank space" on the right side of my main copy background so things line up correctly??

I’m open to any ideas at the moment!

Thanks,
Lyle

virtual

# January 12, 2010 at 8:43 am

Read this article by Chris, it may help you solve your problem.
http://css-tricks.com/absolute-position … sitioning/
Personally I avoid using absolute or relative positioning unless absolutely necessary as it removes the element from the natural flow of the document.

Otherwise make your horses part of the header image and slightly reduce their size so they don’t poke out.

justbobf

# January 14, 2010 at 3:04 pm

I think you have to let your horses have Absolute positioning; but, they are Relative to the element that they are inside of, or closest to. So, the Header should have Relative positioning and the Horses should have Absolute. Then, the horses will move relative to the Header text, and they can still stick out of the header, as you now have. I like them bursting out; gives a sense of action and excitement to the page.