Topic: Positioning Problems... Pages that link to <a href="https://ozoneasylum.com/backlink?for=26359" title="Pages that link to Topic: Positioning Problems..." rel="nofollow" >Topic: Positioning Problems...\

 
Author Thread
templar654
Paranoid (IV) Inmate

From: below the Eternal Potty Trainer!
Insane since: Apr 2004

IP logged posted posted 07-31-2005 07:48 Edit Quote

... why does this have to be so hard! I have a problem and so far Google's let me down take a look at the diagram as I explain.



In the diagram you notice that there's a little rectangle and some circles here and there. I have to make a page which looks much similar to that. The circles must be above the rectangle and the over all page must under any circumstance be flexible... and above all center aligned to the view port. I've never done anything like this before so it's quite new for me. After about 10 or so tries ending up in the recycle bin I've decided to post it!

I've tried relative, I've tried absolute and even percentages and by now my ice bags even melted from the headache I've got from this! I've checked out a couple of articles mostly from ALA and some other sources but I just can't figure out what to do... so, is there a solution!

Silly me where's the image



(Edited by templar654 on 07-31-2005 07:49)

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 07-31-2005 08:28 Edit Quote

An explanation of what specific problems you are having, as well as a link to a test page or the code in question, might be helpful.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

templar654
Paranoid (IV) Inmate

From: below the Eternal Potty Trainer!
Insane since: Apr 2004

IP logged posted posted 07-31-2005 08:50 Edit Quote

Well the problem is that I want the circles to be positioned in that particular way on top of the rectangle staying flexible. I'll get that test page up in while...

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 07-31-2005 09:45 Edit Quote

Well, without much to go on, it's tough to give you an answer. But as for the circles staying on top of the rectangle, that should be a simple matter of controlling the z-index. If the circles appear after the rectangle in the code they will automatically have a higher z-index and appear on top of the rectangle.

I'm not sure what you mean about the "staying flexible" part.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

Tyberius Prime
Paranoid (IV) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 07-31-2005 12:22 Edit Quote

provided the content never ovelaps the virtual lines layed out by the circles, this is one of those layouts I'd have no problem to keep liquid with tables (with a clever mixture of background images for the black-orange strips, and real images (with align="appropriate") to keep the balls positioned where I want them.

With divs and css only? I have no instant.
You can't do absolute positioning if you want to keep the layout liquid.

how about: three vertical divs.
first one background black-orange stripe (one pixel, repeat-x), an image on in with float:right (the ball + spacing).
last one - the same with the bigish ball.
center div, seperated into three horizontal ones.
first one - background black-orange, ball on image, height:100% (pray for this to work),
center one - orange background, content goes here
right one - black-orange, ball, vertical-align:bottom, height:100% (pray again. Plus additional prayer for the vertical align).


just an idea... my css hacker is not very advanced, I fear ;-)

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 07-31-2005 15:21 Edit Quote

It's late and I'm tired, but after reading TP's comments, I think I get what you mean by staying flexible. Without trying anything out, I can say that the solution will involve positioning the circles in relation to the box (i.e., the circles will be the children of the box).

Not only is there no need to use a table for this, doing so would be a hack. Notice how some of TP's solutions require divine intervention to work. That's because tables weren't meant to do stuff like this.

I'll give it another look once you have something online that I can actually play around. Hopefully this will be when I am more awake. It will be a lot easier to try to help if I can see where you are and what specifically is causing the problems.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 07-31-2005 16:35 Edit Quote

could you give us another image of how you'd want it to look if it were twice as big?

Tyberius Prime
Paranoid (IV) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 07-31-2005 21:14 Edit Quote

what?
Only my div solution requires divine intervention!

If you replaced 'div' with table in the text above, you'd have to add a gazillion colspans, but it would work rather straight forward.


Edit: And no, - don't do that!

(Edited by Tyberius Prime on 07-31-2005 21:16)

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 08-01-2005 00:52 Edit Quote

So to make it clear, can you explain if this layout is not to be fixed width, or to not resize with the browser window size, if not yes then no... I still think (if it's a liquid layout) it can be done with background images though, it would certainly take many!

More info please...

Cheers,

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 08-01-2005 02:46 Edit Quote

TP: Ah, like I said, it was late. I thought you were talking about a table layout.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

templar654
Paranoid (IV) Inmate

From: below the Eternal Potty Trainer!
Insane since: Apr 2004

IP logged posted posted 08-01-2005 13:44 Edit Quote

Sorry for the delay, I finished the test yesterday just didn't find time to upload it.

http://www.haiderali.5gigs.com/position-hell.html

On further investigation of this positioning hell I don't think it's even possible in CSS! The circles are actually going to be images on top of the rectangle but the images have been created to fit perfectly on top. Now with position I think it's either hell hard or not possible! But using Custom Corners technique from ALA I think it's possible to stay flexible and get that effect. I'll have to make some more adjustments to the layout though for that if it's possible like this than well and good otherwise back to Photoshop for me :S

Tyberius Prime
Paranoid (IV) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 08-01-2005 14:19 Edit Quote

have a look at http://test.coonabibba.de/random/templar/test.html - I admit it's using a single table, but I don't have the time I wish I had to help out here.
It should give you some inspiration, though.

so long,

->Tyberius Prime

Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

IP logged posted posted 08-01-2005 17:12 Edit Quote

Is this what you're trying to get? http://www.smith-web.net/temp/positioning.htm

templar654
Paranoid (IV) Inmate

From: below the Eternal Potty Trainer!
Insane since: Apr 2004

IP logged posted posted 08-01-2005 19:04 Edit Quote

Nathus: No that's not what I want nice try though.

Tyberius Prime: That's exactly what I wanted!! But unfortunately I've decided to alter the design a bit and fix it to use the Custom Corner's Technique. I'm going to have to increase the amount of images I was trying to use as less as possible, but if it validates I think I can sacrifice that. Your's doesn't validate TP I think I'll put in some free time and figure this one out. I'll hang on to that code though, should come in handy! Nice work, thanks guys!

Tyberius Prime
Paranoid (IV) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 08-01-2005 21:47 Edit Quote

of course mine doesn't validate. It's a 4:43 minute hack. I timed myself. Alas, I don't have much time these days ;-(

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 08-06-2005 15:14 Edit Quote

It's silly to expect valid markup from everyone all the time, frankly. Validation is something you have to work on with every project. That's why validators exist in the first place.


Justice 4 Pat Richard



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu