page layout

Discussion in 'HTML' started by Yuri Shtil, Aug 8, 2007.

  1. Yuri Shtil

    Yuri Shtil Guest

    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.
     
    Yuri Shtil, Aug 8, 2007
    #1
    1. Advertising

  2. Yuri Shtil

    dorayme Guest

    In article <>,
    Yuri Shtil <> 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
     
    dorayme, Aug 8, 2007
    #2
    1. Advertising

  3. Yuri Shtil

    Neredbojias Guest

    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.
     
    Neredbojias, Aug 8, 2007
    #3
  4. Yuri Shtil

    Yuri Shtil Guest

    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).
     
    Yuri Shtil, Aug 8, 2007
    #4
  5. Yuri Shtil

    Neredbojias Guest

    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.
     
    Neredbojias, Aug 8, 2007
    #5
  6. Yuri Shtil

    Yuri Shtil Guest

    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?
     
    Yuri Shtil, Aug 8, 2007
    #6
  7. Yuri Shtil

    Neredbojias Guest

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

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
     
    Neredbojias, Aug 9, 2007
    #7
  8. Yuri Shtil

    Yuri Shtil Guest

    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: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.
     
    Yuri Shtil, Aug 9, 2007
    #8
  9. 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
     
    Jonathan N. Little, Aug 9, 2007
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rick Spiewak
    Replies:
    3
    Views:
    3,178
    Rick Spiewak
    Aug 26, 2003
  2. RobertH
    Replies:
    1
    Views:
    738
    Steve C. Orr [MVP, MCSD]
    Nov 4, 2003
  3. NWx
    Replies:
    4
    Views:
    2,983
    Kevin Spencer
    Feb 19, 2004
  4. Eric
    Replies:
    4
    Views:
    749
    clintonG
    Dec 24, 2004
  5. Replies:
    1
    Views:
    604
    John Timney \(MVP\)
    Jun 19, 2006
Loading...

Share This Page