CSS Help div overlaping

HTML & CSS
1

I’m sure I am making this harder than it is but I can’t for the life of me figure this out and my head is starting to hurt. lol.

If you look at the page in the lower right corner there is a skier that I need to act more as a water mark. I need to take the height space that it is taking it up and pull everything above it down so the above content overlaps it.

http://108.178.28.228/links

Thanks for your help.

2

Are you wanting the bottom of the skier image to align with the “ski run condos” link?

If so, then applying the image as a background to one of the containing divs would be my choice. Assuming this to be a one-off for the Links page, I don’t know how you’d go about this in Joomla, but if you are able to add classes to any div in the markup I’d go for #main-col e.g.

<div id="main-col" class="skiguy">

.skiguy { background: url(/images/ski_guy.jpg) bottom right no-repeat; }

Then remove the moduletable-skiguy div and content, and the empty paragraphs at the bottom of the item-page div. If you need space above the black mountain background silhouette, add some padding-bottom to #main-col.

An alternative would be to add an id or class (e.g. “links”) to the body element to identify it as the links page and then target #links #main-col (or .links #main-col) with the background CSS. This approach allows targeting of elements common to multiple pages with page-specific CSS without having to sprinkle new classes or ids elsewhere in the markup.

3

Its going to be on every page except the home page… I had it attached to the main-col class but I need it closer to that mountains in the footer almost behind it.

4

Applying ski_guy.jpg as a background to #main-col with bottom right position should cause the bottom of the image to align with the top of the mountain image. The home page could be excluded by adding a body id or class to that page as mentioned above (e.g. #home), and adding a CSS rule #home #main-col { background:none; }.

If you want the black area of the mountain image to butt up against or overlap the skier then you’d need to make bg_footer.png transparent and give the div of which it is the background (#rowF) a negative top margin value.