Having trouble placing images next to each other with captions

**kawaiiarashi** · 12-23-2011, 11:01 PM

Please refer to this website:

http://shashin.anotakusparadise.host56.com/

And here's the code I used (pattern):

HTML Code:

<body>

<p><table class="http://i256.photobucket.com/album…
<caption align="bottom">1600x1200</caption>
<tr><td><A HREF="http://hidefwallpaper.org/wp-conte… style="text-decoration:none" target="_blank"><img style="border:1px dashed #6495ED;" src="http://i256.photobucket.com/albums/… width="260" height="195" style="padding-bottom:0.5em;"/></A></td>…
</table>

then I used the pattern code from <table> to </table> for the other images. And as you can see, there's no <br> but why is it that the next picture is placed BELOW the picture before it. How will I move the 2nd picture beside the 1st one?

Just HTML no javascript XD It's our project for school and we're only allowed to use HTML, no Javascript. If CSS then it's ok, just explain everything to me.

Thank you!

**coothead** · 12-24-2011, 12:10 PM

Hi there kawaiiarashi,

and a warm welcome to these forums.

Using the table element for page layout purposes is twentieth century methodology
and it should no be used today, for anything other than the display of tabular data.

Further reading:-

Here is your page, reworked with rather more modern methodology...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://i256.photobucket.com/albums/hh166/kawaiiarashi/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>loads of pictures aligned</title>

<style type="text/css">
body {
    margin:0;
    background-image:url(imagesbg.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
 }
#container {
    padding:20px 0;
 }
#wallpaper {
    display:block;
    width:300px;
    height:124px;
    padding:5px;
    border:1px solid #333;
    margin:auto;
    background-color:#fff;
    box-shadow:#333 4px 4px 8px;
 }
#navigation {
    width:816px;
    padding:10px 5px 5px;
    margin:20px auto;
    list-style-type:none; 
    background-color:rgba(255,255,255,0.7);
    overflow:hidden;
    box-shadow:#333 10px 10px 20px;
 }
#navigation li {
    float:left;
    padding-bottom:5px;
    text-align:center;
 }
#navigation img {
    display:block;
    width:260px;
    height:195px;
    border:1px dashed #6495ed;
    margin:0 5px 5px;
 }
#navigation a { 
    color:#000;
    text-decoration:none;
 }
h1 {
    font-size:48px;
    font-weight:normal;
    color:#00e;
    text-align:center;
    text-shadow:#000 1px 1px 1px,#006 1px 1px 4px;
 }  
#signature {
    display:block;
    width:200px;
    height:80px;
    margin:auto;
 }
</style>

</head>
<body>

<div id="container">

<img id="wallpaper" src="wallpaper.png" alt="">

<ul id="navigation">
 <li><a href="#"><img src="Sakura.jpg" alt="">1600x1200</a></li>
 <li><a href="#"><img src="CardCaptorSakura.jpg" alt="">1280x1024</a></li>
 <li><a href="#"><img src="RozenMaiden.jpg" alt="">1024x768</a></li>
 <li><a href="#"><img src="FairyTail.jpg" alt="">1280x800</a></li>
 <li><a href="#"><img src="DetectiveConan-1.jpg" alt="">1024x768</a></li>
 <li><a href="#"><img src="Amu.png" alt="">1024x768</a></li>
 <li><a href="#"><img src="Amu-1.jpg" alt="">1024x768</a></li>
 <li><a href="#"><img src="Amu2.jpg" alt="">1950x1560</a></li>
 <li><a href="#"><img src="Amu3.jpg" alt="">1024x768</a></li>
 <li><a href="#"><img src="ShugoChara.jpg" alt="">1502x1127</a></li>
 <li><a href="#"><img src="BtTtS.jpg" alt="">985x615</a></li>
 <li><a href="#"><img src="Minami.jpg" alt="">1900x1200</a></li>
 <li><a href="#"><img src="BtTtS2.jpg" alt="">1024x768</a></li>
 <li><a href="#"><img src="DRRR.jpg" alt="">1400x925</a></li>
 <li><a href="#"><img src="DRRR2.jpg" alt="">1920x1080</a></li>
 <li><a href="#"><img src="FairyTail2.jpg" alt="">1600x1200</a></li>
 <li><a href="#"><img src="Erza.png" alt="">1024x768</a></li>
</ul>

<h1>More to come~! Nyaaa~ </h1>

<img id="signature" src="signature-1.png" alt="">

</div><!--end #container -->

</body>
</html>

Further reading:-

I hope, very much, that this will help with your studies.

Thread: Having trouble placing images next to each other with captions

Thread Tools

Related

Placing ads on users' sites Forum: Web Hosting Forum

CSS and Captions Forum: CSS Forum

Placing Flash Pictures/ Graphics Images inside of Text using CSS HTML Style-Filters Forum: CSS Forum

Having trouble aligning images Forum: HTML Forum

Having trouble placing images next to each other with captions

Re: Having trouble placing images next to each other with captions

Cloudjiffy- PaaS for Developers