How to make a photo gallery with out using tables?

Hello i was wondering is there a way to make a photo gallery with out using tables or with out putting your gallery in a div or if you have to put your gallery inside a div make the gallery with just the body of an html tag i have jsfiddle if anyone needs help for clarification

It certainly can (and should) be done without tables but why do you not want to use divs? I think we need a bit more detail about how you want your gallery to look.

Ok here is something i found from monster template. i heard there are codes you can use i just do not know the correct ones. But there is a website here http://www.templatemonster.com/demo/55042.html if you go to there service page i kind want to make a template gallery or maybe even close to professional looking like so if you would to navigate to there service page and click see how there layout is

The gallery there comprises an unordered list with each phot + captions being a list item. Within each list item there is a div containing a figure (which in turn contains an image) and another div containing the caption. As you can see there’s a lot to it.

Hi there TonyM,

here is a basic example…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background: #f0f0f0;
    font: 100%/150% verdana,arial,helvetica,sans-serif;
 }
 
#navigation {
    padding:0;
    margin: 0;
    border: 1px solid #999;
    list-style: none;
    overflow: hidden;
    background: #fff;
 }

#navigation li {
    float:left;
    width: 24.5%;
    margin: 0.25%;
    padding: 0.25em 0.25em 1.4em;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #fcfcff;
 }

#navigation a {
    display: block;
    font-size: 0.8em;
    color: #666;
    text-align: center;
    text-decoration: none;
 }

#navigation img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0.4em;
    border: 1px solid #666;
    box-sizing: border-box;
    
 }

@media screen and (max-width:50em) {
#navigation li {
    width: 32.8%;
  }
 }

@media screen and (max-width:40em) {
#navigation li  {
    width: 49.5%;
  }
 }

@media screen and (max-width:20em) {
#navigation li  {
    width: 99.5%;
  }
 }
</style>

</head>
<body> 
<ul id="navigation">
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
</ul>

</body>
</html>

…without a single div element in sight. :sunglasses:

coothead

2 Likes

How do you do that so i can show you my code i have why its not working

If this works try this link this the fiddle https://jsfiddle.net/#&togetherjs=U9IAtfSQkB

Hi there TonyM,

there does not appear to be any code
at that link which you provided. :mask:

coothead

how do i show you my code?

Hi there TonyM,

Well, I just used "BB code tags" to show you mine. :sunglasses:

But I believe that there may be other methods.

coothead

Can i send you an email attachtment of my work?

The easiest way is to place three back ticks ``` on a row above your code, and three on a row below. Unfortunately, some European keyboards don’t have a back tick key. Alternatively, you can highlight your code in the edit window and use the </> button in the editor to format it.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.