Creating a grid with <DIV> tags

Discussion in 'HTML' started by Todd Cary, Jul 9, 2007.

  1. Todd Cary

    Todd Cary Guest

    Todd Cary, Jul 9, 2007
    #1
    1. Advertising

  2. Scripsit Todd Cary:

    > Is there a reference on creating a "grid" with <DIV> tags


    None that I know of. It's not rocket science, though.

    > (no <TABLE>)?


    Why not? Is the grid not tabular? So why would you create a grid?

    > Example:
    > http://www.toddcary.com/friends/070707_amber_michael/


    I guess you're referring to the table-like (or grid-like) presentation of
    images. You seem to have used div elements for that. So what's the problem?
    You _could_ probably simplify the markup and styling, but what do you really
    see as the problem here?

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Jul 9, 2007
    #2
    1. Advertising

  3. Todd Cary wrote:

    > Is there a reference on creating a "grid" with <DIV> tags (no
    > <TABLE>)? Example:
    > http://www.toddcary.com/friends/070707_amber_michael/


    Why not make the "grid" resize when browser window is larger?

    Instead of all those divs, how about something similar to this, using a
    fairly simple list:
    http://fingerlakesbmw.org/visual/flmgshow.php

    Oh, and that huge 2,746px × 2,746px "shadow" image makes the page take
    forever to paint. You could use a CSS-defined dark grey color instead.
    The soft edges of the graphic don't fit in my browser window.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Jul 9, 2007
    #3
  4. Sherm Pendley, Jul 9, 2007
    #4
  5. Todd Cary

    cwdjrxyz Guest

    On Jul 9, 11:24 am, Todd Cary <> wrote:
    > Is there a reference on creating a "grid" with <DIV> tags (no
    > <TABLE>)? Example:http://www.toddcary.com/friends/070707_amber_michael/
    >
    > Many thanks...


    Yes you can create a grid with only css division tags, but I am not
    for sure you will want to do it except in special cases. My perpetual
    calendar at http://www.cwdjr.net/calendar2/perpetual_calendar.php is a
    grid of a whole year of dates and months and has to be figured out for
    each year. You first enter the year of interest. When the server
    receives this, the year calendar is calculated using php scripts, and
    this includes calculation of the css for positioning in a calendar
    grid. Also US legal holidays are calculated and red is used for these
    dates. This is a 4 dimensional problem, with a nest of 4 loops used
    in the main calculations. For anything of much complication, I think
    you will agree that you would not want to write all of the divisions
    by hand, even for a single year, if you look at all of the divisions
    downloaded to the page after the calendar is calculated.
    cwdjrxyz, Jul 9, 2007
    #5
  6. Todd Cary

    Todd Cary Guest

    Jukka K. Korpela wrote:
    > Scripsit Todd Cary:
    >
    >> Is there a reference on creating a "grid" with <DIV> tags

    >
    > None that I know of. It's not rocket science, though.
    >
    >> (no <TABLE>)?

    >
    > Why not? Is the grid not tabular? So why would you create a grid?
    >
    >> Example:
    >> http://www.toddcary.com/friends/070707_amber_michael/

    >
    > I guess you're referring to the table-like (or grid-like) presentation
    > of images. You seem to have used div elements for that. So what's the
    > problem? You _could_ probably simplify the markup and styling, but what
    > do you really see as the problem here?
    >


    That display of the images was created by Adobe's Lightroom. I
    like the way the grayed margins are placed around the images. My
    current display done using a Borland Delphi program I wrote is
    Plain Jane (www.toddcary.com/rotary/).
    Todd Cary, Jul 9, 2007
    #6
  7. Todd Cary

    Todd Cary Guest

    cwdjrxyz wrote:
    > On Jul 9, 11:24 am, Todd Cary <> wrote:
    >> Is there a reference on creating a "grid" with <DIV> tags (no
    >> <TABLE>)? Example:http://www.toddcary.com/friends/070707_amber_michael/
    >>
    >> Many thanks...

    >
    > Yes you can create a grid with only css division tags, but I am not
    > for sure you will want to do it except in special cases. My perpetual
    > calendar at http://www.cwdjr.net/calendar2/perpetual_calendar.php is a
    > grid of a whole year of dates and months and has to be figured out for
    > each year. You first enter the year of interest. When the server
    > receives this, the year calendar is calculated using php scripts, and
    > this includes calculation of the css for positioning in a calendar
    > grid. Also US legal holidays are calculated and red is used for these
    > dates. This is a 4 dimensional problem, with a nest of 4 loops used
    > in the main calculations. For anything of much complication, I think
    > you will agree that you would not want to write all of the divisions
    > by hand, even for a single year, if you look at all of the divisions
    > downloaded to the page after the calendar is calculated.
    >


    That display of the images was created by Adobe's Lightroom. I
    like the way the grayed margins are placed around the images. My
    current display done using a Borland Delphi program I wrote is
    Plain Jane (www.toddcary.com/rotary/). In this case I used
    tables, however when I saw what Adobe accomplished with
    divisions, it got me curious about using them that way. Using
    divisions, I got this far:
    http://www.toddcary.com/test/div_grid/lession_07.html

    With this page, can the background color of the "blank" image
    have a color? http://www.toddcary.com/test/div_grid/lession_08.html

    Thanks...
    Todd Cary, Jul 9, 2007
    #7
  8. Todd Cary

    Todd Cary Guest

    cwdjrxyz wrote:
    > On Jul 9, 11:24 am, Todd Cary <> wrote:
    >> Is there a reference on creating a "grid" with <DIV> tags (no
    >> <TABLE>)? Example:http://www.toddcary.com/friends/070707_amber_michael/
    >>
    >> Many thanks...

    >
    > Yes you can create a grid with only css division tags, but I am not
    > for sure you will want to do it except in special cases. My perpetual
    > calendar at http://www.cwdjr.net/calendar2/perpetual_calendar.php is a
    > grid of a whole year of dates and months and has to be figured out for
    > each year. You first enter the year of interest. When the server
    > receives this, the year calendar is calculated using php scripts, and
    > this includes calculation of the css for positioning in a calendar
    > grid. Also US legal holidays are calculated and red is used for these
    > dates. This is a 4 dimensional problem, with a nest of 4 loops used
    > in the main calculations. For anything of much complication, I think
    > you will agree that you would not want to write all of the divisions
    > by hand, even for a single year, if you look at all of the divisions
    > downloaded to the page after the calendar is calculated.
    >


    I got this far: http://www.toddcary.com/test/div_grid/lession_08.html

    Now to put a division around the "cell".
    Todd Cary, Jul 9, 2007
    #8
  9. Todd Cary

    Todd Cary Guest

    cwdjrxyz wrote:
    > On Jul 9, 11:24 am, Todd Cary <> wrote:
    >> Is there a reference on creating a "grid" with <DIV> tags (no
    >> <TABLE>)? Example:http://www.toddcary.com/friends/070707_amber_michael/
    >>
    >> Many thanks...

    >
    > Yes you can create a grid with only css division tags, but I am not
    > for sure you will want to do it except in special cases. My perpetual
    > calendar at http://www.cwdjr.net/calendar2/perpetual_calendar.php is a
    > grid of a whole year of dates and months and has to be figured out for
    > each year. You first enter the year of interest. When the server
    > receives this, the year calendar is calculated using php scripts, and
    > this includes calculation of the css for positioning in a calendar
    > grid. Also US legal holidays are calculated and red is used for these
    > dates. This is a 4 dimensional problem, with a nest of 4 loops used
    > in the main calculations. For anything of much complication, I think
    > you will agree that you would not want to write all of the divisions
    > by hand, even for a single year, if you look at all of the divisions
    > downloaded to the page after the calendar is calculated.
    >


    And this is getting very close since the drop shadow is done
    within the Delphi image processing:
    http://www.toddcary.com/test/div_grid/lession_09.html
    Todd Cary, Jul 9, 2007
    #9
  10. Todd Cary

    Todd Cary Guest

    cwdjrxyz wrote:
    > On Jul 9, 11:24 am, Todd Cary <> wrote:
    >> Is there a reference on creating a "grid" with <DIV> tags (no
    >> <TABLE>)? Example:http://www.toddcary.com/friends/070707_amber_michael/
    >>
    >> Many thanks...

    >
    > Yes you can create a grid with only css division tags, but I am not
    > for sure you will want to do it except in special cases. My perpetual
    > calendar at http://www.cwdjr.net/calendar2/perpetual_calendar.php is a
    > grid of a whole year of dates and months and has to be figured out for
    > each year. You first enter the year of interest. When the server
    > receives this, the year calendar is calculated using php scripts, and
    > this includes calculation of the css for positioning in a calendar
    > grid. Also US legal holidays are calculated and red is used for these
    > dates. This is a 4 dimensional problem, with a nest of 4 loops used
    > in the main calculations. For anything of much complication, I think
    > you will agree that you would not want to write all of the divisions
    > by hand, even for a single year, if you look at all of the divisions
    > downloaded to the page after the calendar is calculated.
    >


    Though some of the margins will be dynamically created in the
    Delphi application, my challenge is to figure out how to put some
    text in the outer gray area without changing everything:

    http://www.toddcary.com/test/div_grid/lession_10.html
    Todd Cary, Jul 9, 2007
    #10
  11. Todd Cary

    Nik Coughlin Guest

    Beauregard T. Shagnasty wrote:
    > Todd Cary wrote:
    >
    >> Is there a reference on creating a "grid" with <DIV> tags (no
    >> <TABLE>)? Example:
    >> http://www.toddcary.com/friends/070707_amber_michael/

    >
    > Why not make the "grid" resize when browser window is larger?
    >
    > Instead of all those divs, how about something similar to this, using
    > a fairly simple list:
    > http://fingerlakesbmw.org/visual/flmgshow.php
    >
    > Oh, and that huge 2,746px × 2,746px "shadow" image makes the page take
    > forever to paint. You could use a CSS-defined dark grey color instead.
    > The soft edges of the graphic don't fit in my browser window.


    Or the shadow could have been done as a handful of repeating css background
    images, weighing in at a few hundred bytes each
    Nik Coughlin, Jul 10, 2007
    #11
    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. Chris

    table-tags within div-tags

    Chris, Feb 9, 2004, in forum: HTML
    Replies:
    5
    Views:
    13,240
    Chris
    Feb 10, 2004
  2. Jimmy
    Replies:
    7
    Views:
    4,880
    Chaddy2222
    Nov 21, 2008
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    718
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    173
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    294
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page