Results 1 to 2 of 2
Related
-
Placing ads on users' sites Forum: Web Hosting Forum
Replies: 1 -
CSS and Captions Forum: CSS Forum
Replies: 6 -
Placing Flash Pictures/ Graphics Images inside of Text using CSS HTML Style-Filters Forum: CSS Forum
Replies: 4 -
Having trouble aligning images Forum: HTML Forum
Replies: 3
-
12-23-2011, 11:01 PM #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>
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!
-
12-24-2011, 12:10 PM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
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:-
- Why tables for layout is stupid: problems defined, solutions offered
- Ten ways to speed up the download time of your web pages
- Nested Tables: About the (ab)use of tables as layout tools in webpages.
- Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS
- Why go table free?
- Why avoiding tables (for layout) is important
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>
- HTML Dog
- Opera Web Standards Curriculum
- Google's HTML, CSS, and Javascript from the Ground Up
- SitePoint Reference
- The MDC (Mozilla's Doc Center)
I hope, very much, that this will help with your studies.
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum