Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Margarita Fakih
Margarita Fakih
Courses Plus Student 1,205 Points

Gallery

Hi,

I am trying to construct a gallery with basic html (no css). At the moment I have a side bar that has width of 366px. The main conatiner of the website is 960px. Next to the side bar menu (366px) I want to put a gallery that extends for 594px. I would like to put the 3 images on each row for a total of 3 rows and 9 images.. each image separated by 75px. how can i do this? everytime, I try all the images go under the side menu and then I dont know how to do the spacing to be exactly 75px between each image. can anyone help me?

Margarita Fakih
Margarita Fakih
Courses Plus Student 1,205 Points

each image is 100px by 100px

Margarita Fakih
Margarita Fakih
Courses Plus Student 1,205 Points

this is what i have at the moment: <!DOCTYPE html> <html> <head> <title>Margarita's Blog</title> </head> <body> <center> <!--Main Container Table--> <table width="960px" cellspacing="0" border="1px"> <tr> <th align="left"> <h1>MARGARITA'S BLOG</h1> </th> <th align="right"> <h1>M</h1> </th> </tr> <tr> <td> <!--Menu Container--> <table cellspacing="0" cellpadding='0px' width="960px"> <tr> <td width="366px" > <ul> <li>Menu</li> <ul> <li> <a href="index.html">Home</a></li> <li> <a href="gallery.html">Gallery</a></li> <li> <a href="contact.html">Contact</a></li> </ul> <li>Archive</li> </ul> </td> <!--Sidebar: archive image gallery--> <table width="594" border="0" cellpadding="75px"> <tr> <td align="center" valign="center"> <img src="images/image01.jpg" /> </td> <td align="center" valign="center"> <img src="images/image02.jpg" /> </td> <td align="center" valign="center"> <img src="images/image03.jpg" /> </td> </tr> <tr> <td align="center" valign="center"> <img src="images/image04.jpg" /> </td> <td align="center" valign="center"> <img src="images/image05.jpg" /> </td> <td align="center" valign="center"> <img src="images/image06.jpg" /> </td> </tr> <tr> <td align="center" valign="center"> <img src="images/image07.jpg" /> </td> <td align="center" valign="center"> <img src="images/image08.jpg" /> </td> <td align="center" valign="center"> <img src="images/image09.jpg" /> </td> </tr> </table>

                </table>
            </td>
        </tr>
        <tr>
            <td align="center">
                <h6>Copyright &copy; Margarita</h6>
            </td>
        </tr>

    </table>

</center>

</body> </html>

2 Answers

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

you are going to have to use css to set margins and padding for your images among other things. Have you done any of the CSS tutorials? I would recommend doing all the html and all the css before starting a project like this, because you will need to know basic css to accomplish it.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Yes, use CSS, don't use tables to set your layout. You WILL need CSS.

Look at something like this. http://codepen.io/kevink/pen/cImnK

Very simple html and css markup. Only the key players are there. You have some issues your image margin and gallery width; they don't add up. You can make it look better than what I did, but the proof of concept is there.