8 replies [Last post]
ArmanTanzarian
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2005-10-17
Posts: 5
Points: 0

Hey All,

Like most designers/developers I am being faced with the css transition after doing like anything I wanted with clear gifs and nested tables. It's all good I'm board with the bene's but have those early questions. So let me get to it......

I am able to place "elements" [what were tables and are now div layers?] anywhere I wish using absolute positioning top=200px left=200px or something like that. That's all good. But let's say I have what was 3 tables and their vertical positioning is as such....

A top=200px

B top=400px

C top= 600px

What happens on another page if "table A" is now 500px in height based on new content? With absolute positioning the style sheet is now in conflict with Table B cause it's scripted to be at the 400px position from the top? Overlap. Is there a way to write that style so it is positioned vertically based the height of the table [div layer?] above it? Or what if on an additional page "B" isn't needed at all? Then I would have this gap. I would want "C" to slide up. I could write new style sheets for 400+ unique pages but I would have to think there is a solution here. I've been looking but have yet to find something. Any help would be fantastic!

Cheers
-a-

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Vertical positioning based on div layers above?

You have fallen for the seductive whispers of absolute positioning (AP). Most newbies to html+css layouts do, but it's the worst thing you could do. Until you are very experienced and competent with css, you should avoid using AP. Once you gain the experience, you'll know just how seldom it's needed.

Try not positioning the elements at all. They will naturally fall just below one another, automagically spacing themselves according to their content. If you need spacing between the elements, use margin.

Come back with specific layout issues, and we can lend guidance. In the meantime, work through some tutorials. There are a bunch on the web.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ArmanTanzarian
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2005-10-17
Posts: 5
Points: 0

Vertical positioning based on div layers above?

Hey Gary - I suspected I had fallen into this trap. Precisely why I tried to keep things very simple in my questioning. I think I follow what your say and I'm guessing your reference to spacing [margin] was dividing the page in vertical halves? Here's a link to a rough page I'm working on. I simply flated and flushed red a photoshop doc set it as background and have been placing "elements over it.

http://www.codesixty2.com/localBuild/test.html

If I follow what your saying, I should style sheet these with "left" attributes which are constant and let them fall into line vertically from there?

Cheers
-b-

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Vertical positioning based on div layers above?

I'm not quite sure what your question is, but rather than placing actual content in position as you have now, you need to start with the larger divisions, i.e. header & columns because your actual content is going to have a different relationship to the <div>s that hold it than it does now.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ArmanTanzarian
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2005-10-17
Posts: 5
Points: 0

Vertical positioning based on div layers above?

Tyssen - If I follow you correctly, I wanna say you are eluding to maybe nesting <div>s? Like make these "larger divisions" and flow smaller <div>s into them. Or is this thought all wrong and still a very table way of looking at this?

cheers
-b-

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Vertical positioning based on div layers above?

No, that's right. If you're still thinking in tables terms, you'd look at your layout and decide how many columns/rows there would be, but instead of using a table, you use <div>s. So in your case, you've got a 3-column layout with a header on it. Create those areas first and then worry about slotting the content into those areas afterwards.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ArmanTanzarian
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2005-10-17
Posts: 5
Points: 0

Vertical positioning based on div layers above?

Right on. So would it be then safe to say after I create these divisions and I begin to slot info in I would essentially be creating what one could call single cell <div>s and I could then use relative positioning to position content within? Assuming the <div>s accept attribules such as height width as well as position?

I'm thinking the nav structure I have spec'd could be <div>s nested; with heights like say 80pxs and a width of 200px with the text then spec'd "relative" to be at say left=20px top=60. Or does "relative" not take a "top=" parameter so I could use "Absolute" in this case?

Cheers
-b-

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Vertical positioning based on div layers above?

ArmanTanzarian wrote:
Right on. So would it be then safe to say after I create these divisions and I begin to slot info in I would essentially be creating what one could call single cell <div>s and I could then use relative positioning to position content within? Assuming the <div>s accept attribules such as height width as well as position?

Don't get into a practice that's generally known as divitis. There are plenty of other elements at your disposal such as h#, p, ul etc that can be used to style your content and which have more semantic meaning.

ArmanTanzarian wrote:
I'm thinking the nav structure I have spec'd could be <div>s nested; with heights like say 80pxs and a width of 200px with the text then spec'd "relative" to be at say left=20px top=60. Or does "relative" not take a "top=" parameter so I could use "Absolute" in this case?

Check out Listamatic for some good tutorials on how to use lists to create navigation elements.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ArmanTanzarian
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2005-10-17
Posts: 5
Points: 0

Vertical positioning based on div layers above?

Thanks for all your help!

Cheers
-b-