62 users online (0 members and 62 guests)  

> > > > Having trouble placing images next to each other with captions

  Results 1 to 2 of 2

Related

  1. Placing ads on users' sites    Forum: Web Hosting Forum
    Replies: 1
  2. CSS and Captions    Forum: CSS Forum
    Replies: 6
  3. Placing Flash Pictures/ Graphics Images inside of Text using CSS HTML Style-Filters    Forum: CSS Forum
    Replies: 4
  4. Having trouble aligning images    Forum: HTML Forum
    Replies: 3
  1. 12-23-2011, 11:01 PM #1
    kawaiiarashi
    kawaiiarashi is offline
    kawaiiarashi's Avatar
    New User
    Status
    Offline
    Join Date
    Dec 2011
    Posts
    1

    Having trouble placing images next to each other with captions

    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!
    Reply With Quote Reply With Quote
  2. 12-24-2011, 12:10 PM #2
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

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

    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.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »