Forum Moderators: not2easy
I need a small table/grid to display a series of linked images and text. Essentially it will have the look of 3 columns, 2 rows. Each "space" will contain an image 100px square with a textual link underneath it.
It needs to fit centered within a 500px wide space. (height is not an issue).
I had tried it using UL, similar to a standard menu bar, and I think I'm missing something. Has anyone done something like this?
This is the code I'm working with on the index page:
<div id="maingrid">
<ul>
<li>
<a href="#"><img src="img.jpg" alt="x" /></a><br/>
<a href="#">Category</a></div></li>
<li>
<a href="#"><img src="img.jpg" alt="x" /></a><br/>
<a href="#">Category</a></div></li>
<li>
<a href="#"><img src="img.jpg" alt="x" /></a><br/>
<a href="#">Category</a></div></li>
<li>
<a href="#"><img src="img.jpg" alt="x" /></a><br/>
<a href="#">Category</a></div></li><li>
<a href="#"><img src="img.jpg" alt="x" /></a><br/>
<a href="#">Category</a></div></li><li>
<a href="#"><img src="img.jpg" alt="x" /></a><br/>
<a href="#">Category</a></div></li>
</ul>
</div>
And the snippet from the style sheet:
#maingrid {
width: 500px;
background-color: fff;
}.maingrid li {
width: 160px;
float: left;
padding:3px;
}.maingrid ul {
text-align: left;
list-style-type: none;
}#maingrid ul li { display: inline; }
#maingrid ul li a {
padding: 0.1em 1em;
background-color: #B5AC82;
color: #5C0702;
text-decoration: none;
float: left;
}
I'm feeling like major idiot right now and can't figure it out. I know it's probably something simple, too. It usually is with me. :P How do I get this to properly display in the 3x2 format? Right now it's fitting within the 500ox, but not "lining up" correctly. Right now, in every browser I've tried, it resembles simething like this:
[]
...[]
.....[]
....[]
..[]
[]
Instead of this:
[] [] []
[] [] []
html:
<div id="box">
<div class="cell">
<img src="path/to/image1.gif" />
<p>Caption 1.</p>
</div>
<div class="cell">
<img src="path/to/image2.gif" />
<p>Caption 2.</p>
</div>
<div class="cell">
<img src="path/to/image3.gif" />
<p>Caption 3.</p>
</div>
<div class="cell">
<img src="path/to/image4.gif" />
<p>Caption 4.</p>
</div>
<div class="cell">
<img src="path/to/image5.gif" />
<p>Caption 5.</p>
</div>
<div class="cell">
<img src="path/to/image6.gif" />
<p>Caption 6.</p>
</div>
</div>css:
#box{
width:330px; /*(100px+ 5pxL/Rmargin) X 3*/
margin: 0 auto; /*centers in FF/Moz/etc */
text-align:center; /*centers in IE5.x*/
}
.cell{
float:left;
width:100px;
margin:5px;
}
As long as the TEXT in your captions runs no risk of wrapping to a new line, the above should work fine. If any of the captions wrap, though, that <div> will be taller than the others and will cause problems with the rows of floats. If this is a concern, you can wrap boxes 1 through 3 in a .row <div> that has a 330px width and a float:left. Do the same to boxes 4 through 6 and it should work very well.
Also note that if you want #box to have a background or a border to show through behind the images, you will have to either float it (#box) or add a clearing element [webmasterworld.com] at the bottom.
You also might notice that this uses about the same amount of code that it's tabular equivalent would. So I don't think you would be offending any design-gods if you stuck with a table for this. ;)
cEM
<li>
<a href="#"><img src="img.jpg" alt="x" /></a><br/>
<a href="#">Category</a></div></li>
that extra </div> in there is causing the first major layout problem I think, it's extraneous to the code.
otherwise cEM's post has some great points especially about longer text descriptions, which of course a table would enclose as the others have said.
Suzy
