www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] fixed width gallery/table/grid for image based directory

  1. #1
    Join Date
    Jun 2014
    Posts
    6

    resolved [RESOLVED] fixed width gallery/table/grid for image based directory

    I am attempting to create a fixed width gallery/table with multiple columns and rows including centered captions beneath that would read left to right without borders to serve as an alphabetical image based directory. here is an example of the grid format I would like to create. any assistance, be it to a link to a tutorial or direct help would be appreciated. thanks.below is what I have so far though I have found that most are tending to steer away from tables in html in favor of ul...

    <!DOCTYPE html>
    <html>
    <body>
    <article class="content">
    <h1>Title of gallery</h1>
    <section>
    <div class="rows">
    <img src="images/pic2.jpg" width="200" height="150" alt="pic2">
    <img src="images/pic2.jpg" width="200" height="150" alt="pic2">
    <img src="images/pic2.jpg" width="200" height="150" alt="pic2">
    <img src="images/pic2.jpg" width="200" height="150" alt="pic2"><br>
    </div>
    <div class="rows"></div>
    <table width="800" height="" border="0" cellpadding="18" cellspacing="1" bgcolor="#FFFFFF" rules="none">
    <tr>
    <td width="146">pic1</td>
    <td width="146">pic2</td>
    <td width="146">pic3</td>
    <td width="149">pic4</td></table><br>



    </body>
    </html>

  2. #2
    Join Date
    May 2014
    Posts
    1,017
    Generally yes people are shying away from tables, but that's so they can have a non-fixed layout.

    Generally I don't think I'm seeing enough of your actual data and it's relationships to say what the 'proper' markup would be, but right now it would probably help if you closed your TR, lost the line-break for nothing after the table... and I have to ask what makes this 'tabular data' and if there's a relationship between the images and the text inside the table, why isn't ALL your data inside the table? Likewise if that's the title of the gallery and the gallery is in the table, why use a H1 to do CAPTION's job?

    I suspect (guessing a bit here) that what you have should be something more like this:
    Code:
    <div class="gallery">
    	<h1>Title of Gallery</h1>
    	<div>
    		<img src="images/pic1.jpg" width="200" height="150" alt="pic1" />
    		<span>Pic1</span>
    	</div><div>
    		<img src="images/pic2.jpg" width="200" height="150" alt="pic2" />
    		<span>Pic2</span>
    	</div><div>
    		<img src="images/pic3.jpg" width="200" height="150" alt="pic3" />
    		<span>Pic3</span>
    	</div><div>
    		<img src="images/pic4.jpg" width="200" height="150" alt="pic4" />
    		<span>Pic4</span>
    	</div>
    <!-- .gallery --></div>
    Since that's really not tabular data, that would most likely be the appropriate markup. Set the outer div to float wrapping, float the inner DIV, set the span to display:block and the text alignment you want. If you had more than 4 on the page, just keep dumping them in and they'll wrap predictably if all your images are the same height.

    If they'll be varying heights, that might take a wee bit more planning.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Jun 2014
    Posts
    6

    what i ended up with for now...thanks

    thanks for the help. for now, i ended up with this. ultimately i would like something more fluid that is less work to update as I will be adding categories but for now it will do. can always upgrade as i learn more.
    Code:
    <section>
    <h2>Sayulita List</h2>
    <TABLE id="tblsayulitalist">
    	<TR> 
    		<TD><img src='catimages/pic1.jpg' alt='missing' /></TD> 
    		<TD><img src='catimages/pic2.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic3.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic4.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic5.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic6.jpg' alt='missing' /></TD>
    	</TR> 
    	<TR class="categorylist"> 
    		<TD>Appliance Repair / Install</TD> 
    		<TD>Auto Repair</TD> 
    		<TD>Bicycle Repair</TD> 
    		<TD>Carpentry / Woodwork</TD> 
    		<TD>Childcare</TD>
    		<TD>Cleaning</TD>
    	</TR> 
    	<TR> 
    		<TD><img src='catimages/pic7.jpg' alt='missing' /></TD> 
    		<TD><img src='catimages/pic8.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic9.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic10.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic11.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic12.jpg' alt='missing' /></TD>
    	</TR> 
    	<TR class="categorylist">  
    		<TD>Computer Services</TD> 
    		<TD>Cooking / Catering</TD> 
    		<TD>Electrical Work</TD> 
    		<TD>Fumigation / Pest Control</TD>
    		<TD>Gardening</TD> 
    		<TD>Locksmith</TD>	
    	</TR> 
    	<TR> 
    		<TD><img src='catimages/pic13.jpg' alt='missing' /></TD> 
    		<TD><img src='catimages/pic14.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic15.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic16.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic17.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic18.jpg' alt='missing' /></TD>
    	</TR> 
    	<TR class="categorylist">
    		<TD>Painting</TD> 
    		<TD>Pet Services</TD> 
    		<TD>Plumbing</TD>
    		<TD>Pool Services</TD> 
    		<TD>Roofing / Palapas</TD> 
    		<TD>Sewing</TD>
    	</TR> 
    	<TR>
    		<TD><img src='catimages/pic19.jpg' alt='missing' /></TD> 
    		<TD><img src='catimages/pic20.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic21.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic22.jpg' alt='missing' /></TD>
    		<TD><img src='catimages/pic23.jpg' alt='missing' /></TD>
    	</TR> 
    	<TR class="categorylist">
    		<TD>Stone / Tile Work</TD> 
    		<TD>Surfboard Repair / Building</TD>
    		<TD>Waste Management</TD> 
    		<TD>Welding</TD> 
    		<TD>Windows / Glass</TD>
    	</TR> 
    </TABLE>
    Last edited by jedaisoul; 06-25-2014 at 04:06 PM. Reason: tidy up

  4. #4
    Join Date
    Jun 2014
    Posts
    6
    eh, that code post sucks. sorry

  5. #5
    Join Date
    May 2014
    Posts
    1,017
    IF you're going to use a table like that, use CAPTION instead of H2, though the name AND the image should be in the SAME TD -- your putting it into a separate TD doesn't make any sense and has no "semantic" relationship between the text and the images. You also have a perfectly good table, if you used CAPTION inside the table instead of the h2, you don't need section... NOT that you should use section if you're going to have a numbered heading since numbered headings mean the start of a section of the page -- but that's why HTML 5's nonsense <section> serves no legitimate purpose -- just like 90% or so of the rest of the "specification".

    OR at least use TH for the titles and have the TD use the HEADER attribute to point at the TH... though that would get very heavy on code VERY fast... still if you're going to use tables, there are OTHER tags that go in there other than TR and TD.

    Also, this isn't 1997, it's generally frowned upon to be using uppercase tags in your markup.

    I'd put the image AND the text inside div and float the DIV as I said before -- you wouldn't need extra dividers or anything just either float 'em, or inline-block 'em and let them land where they may.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles