INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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

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

(OP)
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
http://www.fpgroups.com
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

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

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
www.darryncooke.com | Marketing and Creative Services

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

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

*
{
    margin:0;
    padding:0;
}
div#grid
{
overflow:hidden;
}

div#grid ul
{
    overflow:hidden;
    list-style-type:none;
    }

div#grid ul li
{
    float:left;
    margin:4px;
    
}

div#grid ul li div
{
    width:80px;
    height:40px;
    margin-bottom:2px;
    background-color:#0033bb;
}

div#grid ul li p
{
    text-align: center;
}


div#grid ul li.drop
{
    clear:both;
} 


and HTML

CODE --> HTML

<div id="grid">
 <ul>

  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>

  <li class="drop"><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>

  <li class="drop"><div> </div><p>Footnote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>


  <li class="drop"><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>


  <li class="drop"><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>


  <li class="drop"><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>
  <li><div> </div><p>FootNote</p></li>


 </ul>

</div> 


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

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

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

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

(OP)
Thank you guys! I will give this a try and report back as soon as I can.

--
SouthBeach
http://www.fpgroups.com
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close