page layout

Y

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 <select> text <textfield> <checkbox> 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
<div> 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.
 
D

dorayme

Yuri Shtil said:
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 <select> text <textfield> <checkbox> 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
<div> 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?
 
N

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 <select> text <textfield> <checkbox> 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
<div> 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 <div>.
 
Y

Yuri Shtil

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


Any container within a relatively-positioned outer container and positioned
absolutely will do that. Normally it's a <div>.

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

Neredbojias

Well bust mah britches and call me cheeky, on Wed, 08 Aug 2007 22:10:56
GMT Yuri Shtil scribed:
Any container within a relatively-positioned outer container and
positioned absolutely will do that. Normally it's a <div>.

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 <head> section or a stylesheet, but for this
example...

<div style="position:relative;width:80%;margin:auto;">
<div style="position:absolute;top:1em;left:2em;">
Hello dere!
</div>
</div>

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

Yuri Shtil

Neredbojias said:
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 <div>.
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 <head> section or a stylesheet, but for this
example...

<div style="position:relative;width:80%;margin:auto;">
<div style="position:absolute;top:1em;left:2em;">
Hello dere!
</div>
</div>

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?
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Wed, 08 Aug 2007 22:58:42
GMT Yuri Shtil scribed:
This is great, but what if I have an another inner div I want
positioned to the right of the first inner div?

<div style="position:relative;width:80%;margin:auto;">
<div style="position:absolute;top:1em;left:2em;width:12em;">
Hello dere!
</div>
<div style="position:absolute;top:1em;left:14em;width:12em;">
Hoo dat?
</div>
</div>

You can also do floats.

<div style="width:80%;margin:auto;">
<div style="float:right;width:12em;">
Hoo dat?
</div>
<div style="width:12em;">
Hello dere!
</div>
</div>
 
Y

Yuri Shtil

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


<div style="position:relative;width:80%;margin:auto;">
<div style="position:absolute;top:1em;left:2em;width:12em;">
Hello dere!
</div>
<div style="position:absolute;top:1em;left:14em;width:12em;">
Hoo dat?
</div>
</div>

You can also do floats.

<div style="width:80%;margin:auto;">
<div style="float:right;width:12em;">
Hoo dat?
</div>
<div style="width:12em;">
Hello dere!
</div>
</div>
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.
 
J

Jonathan N. Little

Yuri said:
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top