CSS Challenge... absolute AND relative positionning

This is a discussion on "CSS Challenge... absolute AND relative positionning" within the Web Page Design section. This forum, and the thread "CSS Challenge... absolute AND relative positionning are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Feb 6th, 2007, 20:36
New Member
Join Date: Feb 2007
Location: Montreal
Age: 29
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Exclamation CSS Challenge... absolute AND relative positionning

Hi everyone. I'm new to this beautiful forum.

I have a very hard challenge to overcome.
I'm working on a web portal, with columns. I have a column on the right, separated in 3 sections, one under the other.

All these sections must be scalable with the text.
At the bottom of the 1st section, i must have div that contains a flash animation with a transparent background. This div is positionned over everything because the flash overflows the website design.

What I have to do is make sure this div is always aligned to the bottom of the section, mo matter what happens.

Ok now I'll summarize what I just said :P

I have an absolute DIV that must always be aligned with the bottom of one div that's in a column. This must be done without using PHP or Javascript.

I tried to put an absolute div nested within a relative div, but it didn't work, it aligned to the bottom of the page.

I hope I was clear with the statement of my problem.
Can anyone help?

(I just added a visual example...)
Attached Images
File Type: jpg example.jpg (36.6 KB, 123 views)

Last edited by Trollivier; Feb 6th, 2007 at 20:47. Reason: added a visual example to help understand the problem
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Feb 6th, 2007, 21:12
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: CSS Challenge... absolute AND relative positionning

Sorry I don't see why this is a problem? Just put it in the right order in your code.
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Feb 6th, 2007, 21:14
New Member
Join Date: Feb 2007
Location: Montreal
Age: 29
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS Challenge... absolute AND relative positionning

Hmm because it has to be positioned over the columns borders, and a little over the next section's header.

To my knowledge, a relative div can't be positionned over the ones positioned over or under them, can they?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Feb 6th, 2007, 22:43
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS Challenge... absolute AND relative positionning

The property z-index is what you need
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Feb 9th, 2007, 15:45
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: CSS Challenge... absolute AND relative positionning

Yeah if you want to stack them then listen to Ryan.
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Feb 9th, 2007, 16:41
New Member
Join Date: Feb 2007
Location: Montreal
Age: 29
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS Challenge... absolute AND relative positionning

This problem has been solved

The float box needed to be "position: relative" so the other absolute box inside it would follow the bottom.

Without the position:relative, the absolute box was always at the bottom of the page, rather that at the bottom of it's parent.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
vertical, relative, css, align, absolute

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Absolute Div, wrapped in Relative Div (IE6 - AARRRGGHH) tenderfoot Web Page Design 3 Feb 7th, 2008 18:43
positioning - relative or absolute? google Web Page Design 13 Nov 8th, 2007 16:00
loadMovie function (and absolute/relative URL's) DocBoy52 Flash & Multimedia Forum 1 Aug 26th, 2006 05:16
Anyone up for a CSS challenge? bob_visualefx Web Page Design 7 Apr 7th, 2006 14:30


All times are GMT. The time now is 20:34.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved