Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with DIVs and CSS to render ROWS/COLS like grid

Status
Not open for further replies.
southbeach

southbeach

Programmer
Jan 22, 2008
879
US
I am trying to display a grid of rows and columns and get something like:
+-------------+ +-------------+ +-------------+ +-------------+ +-------------+
| | | | | | | | | |
| | | | | | | | | |
+-------------+ +-------------+ +-------------+ +-------------+ +-------------+

Each box is a menu key with text and optionally a background image. I got the grid to display five across and twelve rows down.

What I am having a problem with is display "text footnote" under each box without loosing the grid look. I have tried a number of DIV combination and I end up breaking the grid and instead of five across, I end up with one across and about who knows how many down ...

What am I doing wrong?

Code: 
<div onClick="document.getElementById(\'menuItemEditPane\').innerHTML=\'\'; control(\'POSEDITMENUITEM\',\''.$val.':'.$c.':'.$r.'\');" class="menuitems" id="item'.$c.$r.'">
<div class="menulistText" style="background-size:80px 43px; background-image: url(\'images/icons/'.$icon.'\');">
  <p>'
  .$text.
  '</p>
  </div>
</div>

.menuitems {
/* This layer is needed to show the individual menu items and have a perfectly or close to centered display within the buttons */
float: left;
width: 80px;
height: 43px;
border: 1px ridge white;
margin-top: 4px;
margin-left: 4px;
position: relative;
color: #FFFFFF;
}

.menulistText {
/* Needed to help center text within menu keys */
position: absolute;
left: 0px;
top: 0px;
display: table;
height: 40px;
width: 80px;
word-break: break-all;
}
.menulistText p { 
/* Needed to help center text within menu keys */
display: table-cell;
vertical-align: middle;
text-align: center;
color: #000000;
font-size: 80%;
}




--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Sort by date Sort by votes
Sounds like you need to use a TABLE. For tabular data the table is still the expected and standards compliant way to laying out information.

Doing this with DIVS, SPANS etc. will be a nightmare and you will either have to fall back to fixed widths and heights OR JS to get a look of uniformity. I would recommend you save yourself the hassle and use tables for what they were meant to be used for.

*DISCLAIMER: This is probably the only time I would advocate the use of tables :)

Darryn Cooke
| Marketing and Creative Services
 
Upvote 0 Downvote
I disagree. Doing it with a table will be a nightmare. Doing it with a list which is what semantically a menu is will be far easier. A Set of Divs would still work, pretty much the same way a list would, but I find it its easier to maintain as a list since it will all be wrapped in a <ul> tag. And you'll know where it ends far easier than having 60 divs and then another 60 divs inside, it can get a little to cumbersome to handle.

Here's what I would do, I only built up to 6 rows, but that should give you an idea of how it works.
Code: 
[COLOR=#990000]*[/color]
[COLOR=#FF0000]{[/color]
[tab][COLOR=#0000FF]margin:[/color][i][COLOR=#009900]0[/color][/i];
[tab][COLOR=#0000FF]padding:[/color][i][COLOR=#009900]0[/color][/i];
[COLOR=#FF0000]}[/color]
div[COLOR=#993399]#grid[/color]
[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]overflow:[/color][i][COLOR=#009900]hidden[/color][/i];
[COLOR=#FF0000]}[/color]

div[COLOR=#993399]#grid[/color] ul
[COLOR=#FF0000]{[/color]
[tab][COLOR=#0000FF]overflow:[/color][i][COLOR=#009900]hidden[/color][/i];
[tab][COLOR=#0000FF]list-style-type:[/color][i][COLOR=#009900]none[/color][/i];
[tab][COLOR=#FF0000]}[/color]

div[COLOR=#993399]#grid[/color] ul li
[COLOR=#FF0000]{[/color]
[tab][COLOR=#0000FF]float:[/color][i][COLOR=#009900]left[/color][/i];
[tab][COLOR=#0000FF]margin:[/color][i][COLOR=#009900]4px[/color][/i];
[tab]
[COLOR=#FF0000]}[/color]

div[COLOR=#993399]#grid[/color] ul li div
[COLOR=#FF0000]{[/color]
[tab][COLOR=#0000FF]width:[/color][i][COLOR=#009900]80px[/color][/i];
[tab][COLOR=#0000FF]height:[/color][i][COLOR=#009900]40px[/color][/i];
[tab][COLOR=#0000FF]margin-bottom:[/color][i][COLOR=#009900]2px[/color][/i];
[tab][COLOR=#0000FF]background-color:[/color][COLOR=#FF0000]#0033bb[/color];
[COLOR=#FF0000]}[/color]

div[COLOR=#993399]#grid[/color] ul li p
[COLOR=#FF0000]{[/color]
[tab][COLOR=#0000FF]text-align:[/color] [i][COLOR=#009900]center[/color][/i];
[COLOR=#FF0000]}[/color]


div[COLOR=#993399]#grid[/color] ul li[COLOR=#993399].drop[/color]
[COLOR=#FF0000]{[/color]
[tab][COLOR=#0000FF]clear:[/color][i][COLOR=#009900]both[/color][/i];
[COLOR=#FF0000]}[/color]

and HTML

HTML: 
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"grid"[/color][b][COLOR=#0000FF]>[/color][/b]
 [b][COLOR=#0000FF]<ul>[/color][/b]

  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]

  [b][COLOR=#0000FF]<li[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"drop"[/color][b][COLOR=#0000FF]><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]

  [b][COLOR=#0000FF]<li[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"drop"[/color][b][COLOR=#0000FF]><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]Footnote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]


  [b][COLOR=#0000FF]<li[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"drop"[/color][b][COLOR=#0000FF]><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]


  [b][COLOR=#0000FF]<li[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"drop"[/color][b][COLOR=#0000FF]><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]


  [b][COLOR=#0000FF]<li[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"drop"[/color][b][COLOR=#0000FF]><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]
  [b][COLOR=#0000FF]<li><div>[/color][/b][b][COLOR=#000080]&nbsp;[/color][/b][b][COLOR=#0000FF]</div><p>[/color][/b]FootNote[b][COLOR=#0000FF]</p></li>[/color][/b]


 [b][COLOR=#0000FF]</ul>[/color][/b]

[b][COLOR=#0000FF]</div>[/color][/b]

The Space between each div inside the <li> should be an &nbsp; as some browsers won't honor the dimensions of a div if its actually empty. So the &nbsp; enables those browsers to render the div in the correct size.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Ohh and, I'd avoid using absolute positioning unless.. well... "absolutely" [wink] necessary. It only makes things harder to maintain, and most of the time its really not necessary at all.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Thank you guys! I will give this a try and report back as soon as I can.

--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
338
pmonett
pmonett
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
319
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
398
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
349
bdwilcox
bdwilcox

Part and Inventory Search

Sponsor

Back
Top