42 users online (1 members and 41 guests)  


  Results 1 to 5 of 5

Related

  1. 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. #1
    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.

  2. #2
    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: Caption under images

    Hi there Nick-S,

    check out the attachment for the modified files.
    &#160;
    Attached Files Attached Files

  3. #3
    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.

  4. #4
    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: Caption under images

    No problem, you're welcome.

  5. #5
    fucuco's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2014
    Posts
    11

    Re: Caption under images

    It seems to work