Thread: Caption under images
Results 1 to 5 of 5
Related
-
Placing an image and caption in middle of div Forum: CSS Forum
Replies: 0 -
Newbie needs help on image caption Forum: CSS Forum
Replies: 3 -
images images... Forum: HTML Forum
Replies: 1 -
Help with images Forum: HTML Forum
Replies: 6 -
Images Forum: HTML Forum
Replies: 1
-
04-26-2011, 01:24 PM #1
Caption under images
Greetings!
I want to have a title under an image, how can I accomplish that under CSS and HTML?
The title has to have the same link as the image.
Here is my code:
HTML:Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>linux</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="left"> <p>Distros:</p> <ul> <li><a href="distro.html">distro home</a></li> <li><a href="centos.html">centos</a></li> <li><a href="ubuntu.html">ubuntu</a></li> <li><a href="opensuse.html">opensuse</a></li> <li><a href="gentoo.html">gentoo</a></li> <li><a href="linux-mint.html">linux mint</a></li> <li><a href="fedora.html">fedora</a></li> <li><a href="red-hat.html">red hat</a></li> <li><a href="knopix.html">knopix</a></li> <li><a href="kubuntu.html">kubuntu</a></li> <li><a href="yellow-dog-linux.html">yellow dog linux</a></li> <li><a href="reactos.html">reactOS</a></li> <li><a href="mandriva.html">mandriva</a></li> <li><a href="jolicloud.html">jolicloud</a></li> <li><a href="debian.html">debian</a></li> <li><a href="arch-linux.html">arch linux</a></li> </ul> </div><!-- end #left --> <div id="right"> <img id="logo" src="linux.jpg" alt="linux" title="linux"> <h1>Welcome to the world of linux!</h1> <ul id="gallery"> <li><a href="ubuntu.html"><img src="image.jpg" alt="ubuntu" title="ubuntu"></a></li> <li><a href="fedora.html"><img src="image.jpg" alt="Fedora" title="fedora"></a></li><!--fedora.jpg--> <li><a href="debian.html"><img src="image.jpg" alt="debian" title="debian"></a></li> <li><a href="opensuse.html"><img src="image.jpg" alt="youtube" title="opensuse"></a></li> <li><a href= "jolicloud.html"><img src="image.jpg" alt="jolicloud" title="jolicloud"></a></li><!--jolicloud.png--> <li><a href="reactos.html"><img src="image.jpg" alt="reactos" title="reactos"></a></li><!--reactos.png--> <li><a href="kubuntu.html"><img src="image.jpg" alt="kubuntu" title="kubuntu"></a></li> <li><a href="mandriva.html"> <img src="image.jpg" alt="mandriva" title="mandriva"></a></li><!--mandriva.png--> <li><a href="arch-linux.html"><img src="image.jpg" alt="arch linux" title="arch linux"></a></li> </ul> <ul id="footer"> <li><a href= "about.html">About</a></li> <li><a href="home.html">Home</a></li> <li><a href="contact.html">Contact</a></li> <li><a href ="info.html">Information</a></li> </ul> </div><!-- end #right --> </body> </html>
Code:body { font-family:verdana,arial,helvetica,sans-serif; font-size:16px; color:#000; background-color:#fcfcfc; } a { color:#000; text-decoration:none; } #left { float:left; padding:15px 15px 42px; margin-top:202px; border:1px solid #300; background-color:#f00; } #left p { font-size:150%; font-weight:bold; color:#fff; text-align:center; } #left ul { width:270px; margin:0; padding:10px; border:1px solid #600; list-style-type:none; text-align:left; background-color:#ffc0cb; } #left a { font-size:90%; font-weight:bold; } #right { float:left; margin-left:76px; } h1 { font-size:125%; text-align:center; } #logo{ display:block; height:150px; width:180px; margin:auto; } #gallery { width:405px; padding:0; margin:0 0 20px; border:1px solid #ffb515; list-style-type:none; background-color:#ff0; overflow:hidden; } #gallery li { width:125px; margin:0 5px 10px 5px; float:left; } #gallery img { width:85px; height:85px; padding:20px; margin-top:10px; border:0; } #footer { width:405px; padding:0; margin:0; border:1px solid #c90016; list-style-type:none; text-align:center; background-color:#ffa500; } #footer li { display:inline; line-height:40px; } #footer a { margin:0 10px; font-size:90%; font-weight:bold; }
Last edited by Nick-S; 04-26-2011 at 01:30 PM.
-
04-26-2011, 03:40 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: Caption under images
Hi there Nick-S,
check out the attachment for the modified files.
 
-
04-29-2011, 01:25 PM #3
Re: Caption under images
Thanks a lot coothead!
That's exactly what I wanted.
-
04-29-2011, 01:30 PM #4bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: Caption under images
No problem, you're welcome.
-
11-23-2014, 04:12 AM #5
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum