Help with Positioning

[Mickael-3]

Hello,

I am hoping that someone can point me in the right direction.  I am
trying to create an entry page for a site that is in essence a 3 by 3
grid.  What my client is looking for is a light coloured container that
is approx 600 pixels wide with three squares on each each of the three
rows that are each 160px x 160px with a one pixel divider between the
images.  The desired effect is life an image that has the show gridlines
on in photoshop.

I am trying to do this with divs entirely but am having some issues.  I
can easily calculate the placement of each box something like this.

..MainContainer {
width:500px;
background-color:#FFCC33;
}

..LeftTop {
position:absolute;
top:10px;
width:160px;
height:160px;
}


..Middle {
position:absolute;
top:10px;
left:162px;
width:160px;
height:160px;

}

..RightTop {
position:absolute;
top:10px;
left:324px;
width:160px;
height:160px;
}

..MiddleLeft {
position:absolute;
top:172px;
width:160px;
height:160px;

}

etc etc for the rest of the Divs and here is my HTML.

  <div class="MainContainer">

    <div class="TopLeft">
    some content    
    </div>
    <div class="TopMiddle">
    Some Content
    </div>
    <div class="TopRight">
    Some Content
    </div>
  <!--End Top Row -->
     <div class="MiddleLeft">
    some content    </div>
    <div class="Center">
    Some Content
    </div>
    <div class="MiddleRight">
    Some Content
    </div>
    <!--End Middle Row -->
    <div class="BottomLeft">
    some content    
    </div>
    <div class="BottomMiddle">
    Some Content
    </div>
    <div class="BottomRight">
    Some Content
    </div>
   
 
  </div>

It works but it does not seem very elegant to me and would not really
grow or expand properly if there content of the divs were to change.  
Also the nested divs appear to be on top of the maincontainer and not
really inside them as an html table would extend its containing table
should the content increase.  Is what am I am trying to do possible in a
more elegant fashion that would allow for more flexibilty for content
changes, while still keeping the uniform grid look of 3 x 3 boxes?

Thanks

Mike



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2582
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

[Sandra Clark]

Hi Mikael,

A few quick thing, before I have to go.

Absolute positioning can only work in direct relation to a parent that is
also positioned non statically, otherwise everything is positioned in an
absolute manner in relation to the html tag.  Try to add a position:relative
to .MainContainer.  That way everything will be positioned in relation to
the MainContainer.

In order to have items change as your screen widens or shortens, you will
need to use ems or % as your unit rather than pixels.  IE treats pixels as
if they were absolute values rather than relative values.  So you could do
something similar to: (this is off the top of my head and is not tested)
(Also note that I changed your classes to ID's.  Classes should be used for
something that might be repeated on a page.  ID's should be used when the
item is or must be unique on a page.

div#MainContainer width: {
        width: 486px;
        position:relative;
        height: 486px;
}

div#LeftTop, div#RightTop, div#LeftBottom,div#RightBottom{
        position: absolute;
        height: 32%; /* You'll have to play with the height and width to get
that
                        1px effect you are looking for. I would suggest a
border rather than relying on the background, but its up to you */
        width:32%;
}
div#LeftTop{
        top:0;
        left:0;
}
div#RightTop{
        top:0;
        right:0;
}

div#LeftBottom{
        bottom:0;
        left:0;
}
div#RightBottom{
        bottom:0;
        right:0;
}


Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-----Original Message-----
From: Mickael [mailto:mike@...]
Sent: Wednesday, May 24, 2006 10:47 PM
To: CSS
Subject: Help with Positioning

Hello,

I am hoping that someone can point me in the right direction.  I am trying
to create an entry page for a site that is in essence a 3 by 3 grid.  What
my client is looking for is a light coloured container that is approx 600
pixels wide with three squares on each each of the three rows that are each
160px x 160px with a one pixel divider between the images.  The desired
effect is life an image that has the show gridlines on in photoshop.

I am trying to do this with divs entirely but am having some issues.  I can
easily calculate the placement of each box something like this.

...MainContainer {
width:500px;
background-color:#FFCC33;
}

...LeftTop {
position:absolute;
top:10px;
width:160px;
height:160px;
}


...Middle {
position:absolute;
top:10px;
left:162px;
width:160px;
height:160px;

}

...RightTop {
position:absolute;
top:10px;
left:324px;
width:160px;
height:160px;
}

...MiddleLeft {
position:absolute;
top:172px;
width:160px;
height:160px;

}

etc etc for the rest of the Divs and here is my HTML.

  <div class="MainContainer">

    <div class="TopLeft">
    some content    
    </div>
    <div class="TopMiddle">
    Some Content
    </div>
    <div class="TopRight">
    Some Content
    </div>
  <!--End Top Row -->
     <div class="MiddleLeft">
    some content    </div>
    <div class="Center">
    Some Content
    </div>
    <div class="MiddleRight">
    Some Content
    </div>
    <!--End Middle Row -->
    <div class="BottomLeft">
    some content    
    </div>
    <div class="BottomMiddle">
    Some Content
    </div>
    <div class="BottomRight">
    Some Content
    </div>
   
 
  </div>

It works but it does not seem very elegant to me and would not really grow
or expand properly if there content of the divs were to change.  
Also the nested divs appear to be on top of the maincontainer and not really
inside them as an html table would extend its containing table should the
content increase.  Is what am I am trying to do possible in a more elegant
fashion that would allow for more flexibilty for content changes, while
still keeping the uniform grid look of 3 x 3 boxes?

Thanks

Mike





~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2592
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

[Mickael-3]

                Hi Sandra,

Thank you for your note and clarification of ID and Classes.  Just one thing I am trying to get three boxes in a row on each row.  Your example shows two on top and two on the bottom.  How would you handle three divs in one top row?

Mike

----------------------------------------

                                From: "Sandra Clark" <sllists@...>
Sent: Thursday, May 25, 2006 3:23 AM
To: CSS <css@...>
Subject: RE: Help with Positioning

Hi Mikael,

A few quick thing, before I have to go.

Absolute positioning can only work in direct relation to a parent that is
also positioned non statically, otherwise everything is positioned in an
absolute manner in relation to the html tag.  Try to add a position:relative
to .MainContainer.  That way everything will be positioned in relation to
the MainContainer.

In order to have items change as your screen widens or shortens, you will
need to use ems or % as your unit rather than pixels.  IE treats pixels as
if they were absolute values rather than relative values.  So you could do
something similar to: (this is off the top of my head and is not tested)
(Also note that I changed your classes to ID's.  Classes should be used for
something that might be repeated on a page.  ID's should be used when the
item is or must be unique on a page.

div#MainContainer width: {
        width: 486px;
        position:relative;
        height: 486px;
}

div#LeftTop, div#RightTop, div#LeftBottom,div#RightBottom{
        position: absolute;
        height: 32%; /* You'll have to play with the height and width to get
that
                        1px effect you are looking for. I would suggest a
border rather than relying on the background, but its up to you */
        width:32%;
}
div#LeftTop{
        top:0;
        left:0;
}
div#RightTop{
        top:0;
        right:0;
}

div#LeftBottom{
        bottom:0;
        left:0;
}
div#RightBottom{
        bottom:0;
        right:0;
}

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-----Original Message-----
From: Mickael [mailto:mike@...]
Sent: Wednesday, May 24, 2006 10:47 PM
To: CSS
Subject: Help with Positioning

Hello,

I am hoping that someone can point me in the right direction.  I am trying
to create an entry page for a site that is in essence a 3 by 3 grid.  What
my client is looking for is a light coloured container that is approx 600
pixels wide with three squares on each each of the three rows that are each
160px x 160px with a one pixel divider between the images.  The desired
effect is life an image that has the show gridlines on in photoshop.

I am trying to do this with divs entirely but am having some issues.  I can
easily calculate the placement of each box something like this.

....MainContainer {
width:500px;
background-color:#FFCC33;
}

....LeftTop {
position:absolute;
top:10px;
width:160px;
height:160px;
}

....Middle {
position:absolute;
top:10px;
left:162px;
width:160px;
height:160px;

}

....RightTop {
position:absolute;
top:10px;
left:324px;
width:160px;
height:160px;
}

....MiddleLeft {
position:absolute;
top:172px;
width:160px;
height:160px;

}

etc etc for the rest of the Divs and here is my HTML.

    some content    

    Some Content

    Some Content

    some content    

    Some Content

    Some Content

    some content    

    Some Content

    Some Content

It works but it does not seem very elegant to me and would not really grow
or expand properly if there content of the divs were to change.  
Also the nested divs appear to be on top of the maincontainer and not really
inside them as an html table would extend its containing table should the
content increase.  Is what am I am trying to do possible in a more elegant
fashion that would allow for more flexibilty for content changes, while
still keeping the uniform grid look of 3 x 3 boxes?

Thanks

Mike



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2593
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

[Mickael-3]

Hi Sandra,

Thank you for your note and clarification of ID and Classes.  Just one thing I am trying to get three boxes in a row on each row.  Your example shows two on top and two on the bottom.  How would you handle three divs in one top row?

Mike




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2594
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54

[Sandra Clark]

div#middleTop{
        left: 32%;
        top:0;
}

Again, you'll have to play with the percentages.

Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-----Original Message-----
From: Mickael [mailto:mike@...]
Sent: Thursday, May 25, 2006 7:41 AM
To: CSS
Subject: Re: Help with Positioning

Hi Sandra,

Thank you for your note and clarification of ID and Classes.  Just one thing
I am trying to get three boxes in a row on each row.  Your example shows two
on top and two on the bottom.  How would you handle three divs in one top
row?

Mike






~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:41:2595
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/41
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54