Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > page layout

Reply
Thread Tools

page layout

 
 
Yuri Shtil
Guest
Posts: n/a
 
      08-07-2007
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.
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      08-08-2007
In article <(E-Mail Removed)>,
Yuri Shtil <(E-Mail Removed)> wrote:

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

--
dorayme
 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      08-08-2007
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>.

--
Neredbojias
Half lies are worth twice as much as whole lies.
 
Reply With Quote
 
Yuri Shtil
Guest
Posts: n/a
 
      08-08-2007
Neredbojias wrote:
> 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>.
>


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).
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      08-08-2007
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.

--
Neredbojias
Half lies are worth twice as much as whole lies.
 
Reply With Quote
 
Yuri Shtil
Guest
Posts: n/a
 
      08-08-2007
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 <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?
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      08-09-2007
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;">
>> 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?


<div style="position:relative;width:80%;margin:auto;">
<div style="position:absolute;top:1em;left:2em;width:12 em;">
Hello dere!
</div>
<div style="position:absolute;top:1em;left:14em;width:1 2em;">
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>

--
Neredbojias
Half lies are worth twice as much as whole lies.
 
Reply With Quote
 
Yuri Shtil
Guest
Posts: n/a
 
      08-09-2007
Neredbojias wrote:
> 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;">
>>> 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?

>
> <div style="position:relative;width:80%;margin:auto;">
> <div style="position:absolute;top:1em;left:2em;width:12 em;">
> Hello dere!
> </div>
> <div style="position:absolute;top:1em;left:14em;width:1 2em;">
> 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.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      08-09-2007
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Oppinion regarding grid layout vs flow layout NWx ASP .Net 4 02-19-2004 08:56 PM
Converting from grid layout to flow layout. RobertH ASP .Net 1 11-04-2003 12:43 AM
DataList inside a Grid Layout Panel (<DIV>) item layout problem Rick Spiewak ASP .Net 3 08-26-2003 04:22 AM



Advertisments