Creating a grid with <DIV> tags

[Todd Cary]

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

Many thanks...

 

[Jukka K. Korpela]

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?

 

[Beauregard T. Shagnasty]

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.

 

[Sherm Pendley]

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

Looks like tabular data to me... Why not just use a table?

sherm--

 

[cwdjrxyz]

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.

 

[Todd Cary]

Scripsit Todd Cary:


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


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


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]

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]

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]

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]

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

 

[Nik Coughlin]

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