Topic: Positioning Problems...

... 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)

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

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...

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

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 ;-)

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

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

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)

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,

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

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

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

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

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!

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 ;-(

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