page layout

am 08.08.2007 01:04:09 von Yuri Shtil

I want to layout an HTML page as follows:

1- a number of vertical (on top of each other) containers on the top
level
2 - each container in 1 may have a number of horizontally laid containers
3 - each container in 2 may have a number of containers type 1

Here is an example of what I am trying to accomplish:

header
Text text label
>
> ---------- ---------| ----------
> text | | text | | text |
> select | | select | | select |
> ---------- ---------- ----------
>
> ---------- ---------| ----------
> text | | text | | text |
> table | | table | | table |
> ---------- ---------- ----------
>
> I played with the display attributes and tried to wrap the boxes into
>

to no avail.
>
> Basically I need to know:
> - how to create a container element that can be positioned horizontaly
> or vertically relative to the parent container.

And you do not want to use a table, right?

--
dorayme

Re: page layout

am 08.08.2007 04:07:20 von Neredbojias

Well bust mah britches and call me cheeky, on Tue, 07 Aug 2007 23:04:09
GMT Yuri Shtil scribed:

> I want to layout an HTML page as follows:
>
> 1- a number of vertical (on top of each other) containers on the
> top
> level
> 2 - each container in 1 may have a number of horizontally laid
> containers 3 - each container in 2 may have a number of containers
> type 1
>
> Here is an example of what I am trying to accomplish:
>
> header
> Text text label
>>
>> ---------- ---------| ----------
>> text | | text | | text |
>> select | | select | | select |
>> ---------- ---------- ----------
>>
>> ---------- ---------| ----------
>> text | | text | | text |
>> table | | table | | table |
>> ---------- ---------- ----------
>>
>> I played with the display attributes and tried to wrap the boxes into
>>

to no avail.
>>
>> Basically I need to know:
>> - how to create a container element that can be positioned
>> horizontaly
>> or vertically relative to the parent container.
>
> Any container within a relatively-positioned outer container and positioned
> absolutely will do that. Normally it's a

.
>

Could you point to an example? How do I make sure boxes are aligned and not overlapping?
I looked at a couple of CSS books and articles. For example in Cascading Style Sheets by Eric A.Meyer on page 294 the author says:
[Positioning] allows you to define exactly where element boxes will appear relative to ... a parent element or another element.
Unfortunately I cannot figure out how to do this specifically how to position relative to another element(sibling I guess).

Re: page layout

am 09.08.2007 00:47:32 von Neredbojias

Well bust mah britches and call me cheeky, on Wed, 08 Aug 2007 22:10:56
GMT Yuri Shtil scribed:

>>> Basically I need to know:
>>> - how to create a container element that can be positioned
>>> horizontaly
>>> or vertically relative to the parent container.
>>
>> Any container within a relatively-positioned outer container and
>> positioned absolutely will do that. Normally it's a

.
>>
>
> Could you point to an example? How do I make sure boxes are aligned
> and not overlapping? I looked at a couple of CSS books and articles.
> For example in Cascading Style Sheets by Eric A.Meyer on page 294 the
> author says: [Positioning] allows you to define exactly where element
> boxes will appear relative to ... a parent element or another element.
> Unfortunately I cannot figure out how to do this specifically how to
> position relative to another element(sibling I guess).

I prefer styles in the section or a stylesheet, but for this
example...

Hello dere!

The outer div will be centered and 80% of screen width. The inner div with
text will be positioned within it at 1 em (appx 16px at "normal" font size)
from the outer div's top and 2 em from its left.

For css to work best, you should always use an html 4.01 strict doctype.

--
Neredbojias
Half lies are worth twice as much as whole lies.

Re: page layout

am 09.08.2007 00:58:42 von Yuri Shtil

Neredbojias wrote:
> Well bust mah britches and call me cheeky, on Wed, 08 Aug 2007 22:10:56
> GMT Yuri Shtil scribed:
>
>>>> Basically I need to know:
>>>> - how to create a container element that can be positioned
>>>> horizontaly
>>>> or vertically relative to the parent container.
>>> Any container within a relatively-positioned outer container and
>>> positioned absolutely will do that. Normally it's a

.
>>>
>> Could you point to an example? How do I make sure boxes are aligned
>> and not overlapping? I looked at a couple of CSS books and articles.
>> For example in Cascading Style Sheets by Eric A.Meyer on page 294 the
>> author says: [Positioning] allows you to define exactly where element
>> boxes will appear relative to ... a parent element or another element.
>> Unfortunately I cannot figure out how to do this specifically how to
>> position relative to another element(sibling I guess).
>
> I prefer styles in the section or a stylesheet, but for this
> example...
>
>

> Hello dere!
>

>
> The outer div will be centered and 80% of screen width. The inner div with
> text will be positioned within it at 1 em (appx 16px at "normal" font size)
> from the outer div's top and 2 em from its left.
>
> For css to work best, you should always use an html 4.01 strict doctype.
>
This is great, but what if I have an another inner div I want positioned to the right of the first inner div?

Re: page layout

am 09.08.2007 04:10:57 von Neredbojias

Well bust mah britches and call me cheeky, on Wed, 08 Aug 2007 22:58:42
GMT Yuri Shtil scribed:

>>

>> Hello dere!
>>

>>
>> The outer div will be centered and 80% of screen width. The inner
>> div with text will be positioned within it at 1 em (appx 16px at
>> "normal" font size) from the outer div's top and 2 em from its left.
>>
>> For css to work best, you should always use an html 4.01 strict
>> doctype.
>>
> This is great, but what if I have an another inner div I want
> positioned to the right of the first inner div?

Hello dere!

Hoo dat?

You can also do floats.

Hoo dat?

Hello dere!

--
Neredbojias
Half lies are worth twice as much as whole lies.

Re: page layout

am 09.08.2007 18:46:32 von Yuri Shtil

Neredbojias wrote:
> Well bust mah britches and call me cheeky, on Wed, 08 Aug 2007 22:58:42
> GMT Yuri Shtil scribed:
>
>>>

>>>

>>> Hello dere!
>>>

>>>

>>>
>>> The outer div will be centered and 80% of screen width. The inner
>>> div with text will be positioned within it at 1 em (appx 16px at
>>> "normal" font size) from the outer div's top and 2 em from its left.
>>>
>>> For css to work best, you should always use an html 4.01 strict
>>> doctype.
>>>
>> This is great, but what if I have an another inner div I want
>> positioned to the right of the first inner div?
>
>

> Hello dere!
>

> Hoo dat?
>

>
> You can also do floats.
>
>

> Hoo dat?
>

> Hello dere!
>

>
I've got that far before. The problem is that once could not figure out how to interrupt the float and place the next container below the float row.

Re: page layout

am 09.08.2007 22:12:37 von lws4art

Yuri Shtil wrote:

> I've got that far before. The problem is that once could not figure out
> how to interrupt the float and place the next container below the float
> row.

Look up "clear" property.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com