73 users online (0 members and 73 guests)  

> > > > Caption under images

  Results 1 to 5 of 5

Related

  1. Placing an image and caption in middle of div    Forum: CSS Forum
    Replies: 0
  2. Newbie needs help on image caption    Forum: CSS Forum
    Replies: 3
  3. images images...    Forum: HTML Forum
    Replies: 1
  4. Help with images    Forum: HTML Forum
    Replies: 6
  5. Images    Forum: HTML Forum
    Replies: 1
  1. 04-26-2011, 01:24 PM #1
    Nick-S
    Nick-S is offline
    Nick-S's Avatar
    New User
    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    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>
    CSS:
    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.
    Reply With Quote Reply With Quote
  2. 04-26-2011, 03:40 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
    739

    Re: Caption under images

    Hi there Nick-S,

    check out the attachment for the modified files.
    &#160;
    Attached Files Attached Files
    Reply With Quote Reply With Quote
  3. 04-29-2011, 01:25 PM #3
    Nick-S
    Nick-S is offline
    Nick-S's Avatar
    New User
    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Re: Caption under images

    Thanks a lot coothead!
    That's exactly what I wanted.
    Reply With Quote Reply With Quote
  4. 04-29-2011, 01:30 PM #4
    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
    739

    Re: Caption under images

    No problem, you're welcome.
    Reply With Quote Reply With Quote
  5. 11-23-2014, 04:12 AM #5
    fucuco
    fucuco is offline
    fucuco's Avatar
    New User
    Status
    Offline
    Join Date
    Nov 2014
    Posts
    11

    Re: Caption under images

    It seems to work


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