SitePoint.com

jodmcc · Apr 8, 2004, 13:53

Hello,

I am trying to add a caption under the image in my left column (cheesecake.jpg) and I am confused on how to do this. I am still in the infancy of learning CSS and would like to do it the right way with the least amount of headaches. Any help would be greatly appreciated.

Thanks,

John

Here is the CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<title>Welcome to Yummy Desserts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>

Here is the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<title>Welcome to Yummy Desserts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="container">
<div id="banner"><img src="yummydessertshead.jpg" alt="yummy desserts logo banner" width="600" height="128"></div>
<div id="nav">
<ul>
<li><a href="index.html">Cheesecakes</a></li>
<li><a href="poundcake.html">Pound Cakes</a></li>
<li><a href="southernspecial.html">Southern Specialties</a></li>
<li><a href="holiday.html">Holiday Extras</a></li>
</ul>
<ul>
<li><a href="valentine.html">Valentines Specials</a></li>
<li><a href="noahsark.html">Noah's Ark Cakes</a></li>
<li><a href="personchef.html">Personal Dessert Chef</a></li>
</ul>
</div>
<h2>Cheesecakes</h2>
<div id="content">
<div id="col1cheese">
<img src="cheesecake.jpg" alt="cheesecake" width="160" height="160" class="cheesecake">
<dl><dt class="cakelisttitle">Pumpkin Cheesecake</dt>
<dd class="cakelistdescription">Ginger Snap Crust</dd>
<dt class="cakelisttitle">Chocolate Cheesecake</dt>
<dd class="cakelistdescription">Chocolate Crust</dd>
<dt class="cakelisttitle">Pina Colada Cheesecake</dt>
<dd class="cakelistdescription">Macaroon Crust(large only)</dd>
<dt class="cakelisttitle">Apricot Swirl Cheesecake</dt>
<dd class="cakelistdescription">Graham Cracker Crust</dd>
<dt class="cakelisttitle">Chocolate Orange Cheesecake</dt>
<dd class="cakelistdescription">Chocolate Crust</dd>
<dt class="cakelisttitle">Plain Yummy Cheesecake</dt>
<dd class="cakelistdescription">Graham Cracker Crust</dd>
</dl>
</div>
<div id="col2cheese">
<table id="pricemenucheese">
<thead></thead>
<tbody>
<tr>
<td>Large</td>
<td>$25</td>
</tr>
<tr>
<td>Not-so-Large</td>
<td>$20</td>
</tr>
<tr>
<td>Lower Fat, Large</td>
<td>$30</td>
</tr>
<tr>
<td>Lower Fat, Not-so-Large</td>
<td>$25</td>
</tr>
<tr>
<td>With Artfully Arranged Fresh Fruit</td>
<td>$10 extra</td>
</tr>
</tbody>
</table>
</div>
<div class="clearboth"></div>
</div>
<div class="clearboth"></div>
<div id="details">
<div id="detailparagraphs"><p>Please order 24-48 hours in advance. Desserts can be baked in your own pans and custom packaging is available for weddings, birthdays, showers, etc. We welcome large or corporate orders.</p>
<p>All desserts are made from scratch using only the finest ingredients. Special requests are cheerfully accomodated if possibly.</p>
<p class="phoneline">Place your order by calling Laura at 832-721-6635</p>
<p class="blessing">“May God bless you and keep you today and every day, and may you enjoy your desserts!”</p>
</div>
</div>
</div>
</body>
</html>

tconley79 · Apr 8, 2004, 17:57

Quote:

Originally Posted by jodmcc

Hello,

I am trying to add a caption under the image in my left column (cheesecake.jpg) and I am confused on how to do this. I am still in the infancy of learning CSS and would like to do it the right way with the least amount of headaches. Any help would be greatly appreciated.

Thanks,

John

Try this link...lots of good stuff on this site....

http://www.maxdesign.com.au/presenta...ge-gallery.htm

Apr 8, 2004, 13:53	#1
jodmcc SitePoint Addict Join Date: Dec 2003 Location: Houston, Texas Posts: 216	Adding a caption to a picture Hello, I am trying to add a caption under the image in my left column (cheesecake.jpg) and I am confused on how to do this. I am still in the infancy of learning CSS and would like to do it the right way with the least amount of headaches. Any help would be greatly appreciated. Thanks, John Here is the CSS: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd"> <html> <head> <title>Welcome to Yummy Desserts</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { background-image: url(yummybkgrd.gif); background-repeat: repeat-y; background-position: center top; } #container { margin: auto; text-align: center; } #banner { width: 720px; height: 128px; margin: auto; clear: both; } #nav { padding: 5px; text-align: center; clear: both; } #nav ul { margin: 0px; padding: 0px; list-style-type: none; } #nav ul li { font-family: "Times New Roman", Times, serif; font-size: 12px; font-style: italic; font-weight: bold; color: #000000; display: inline; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } #nav ul li a { text-decoration: none; padding-top: .2em; padding-right: 1em; color: #4169E1; } #nav ul li a:hover { color: #763736; text-decoration: underline; } #col1cheese { width: 390px; padding: 0px; margin-left: 8px; float: left; text-align: left; } #col2cheese { width: 300px; margin-left: 10px; float: left; text-align: left; } #content { text-align: center; width: 720px; margin: auto; } img.cheesecake { float: left; margin-top: 0px; margin-right: 10px; margin-bottom: 80px; margin-left: 0px; } .cakelisttitle { font-family: "Times New Roman", Times, serif; font-size: 16px; color: #E1B941; font-weight: bold; font-variant: normal; } .cakelistdescription { font-family: "Times New Roman", Times, serif; font-size: 12px; color: #000000; margin-bottom: 8px; } dl { margin: 0px; } table#pricemenucheese { font-family: "Times New Roman", Times, serif; font-size: 14px; margin: 0px; padding: 0px; width: 300px; vertical-align: top; } .clearboth { clear: both; } td { padding-bottom: 20px; } h2 { font-family: "Times New Roman", Times, serif; font-size: 30px; font-style: italic; color: #ABBDF2; margin: 10px 0px; padding: 0px; } #details { width: 720px; text-align: center; margin: auto; } p { font-family: "Times New Roman", Times, serif; font-size: 14px; text-align: left; line-height: 15px; margin-bottom: 8px; margin-top: 0px; margin-right: 0px; margin-left: 0px; } #detailparagraphs { width: 500px; margin: 20px 110px 0px; } .phoneline { font-size: 18px; font-style: italic; color: #E141B9; text-align: center; } .blessing { font-size: 12px; font-style: italic; color: #E1B941; text-align: center; } --> </style> Here is the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd"> <html> <head> <title>Welcome to Yummy Desserts</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="container"> <div id="banner"><img src="yummydessertshead.jpg" alt="yummy desserts logo banner" width="600" height="128"></div> <div id="nav"> <ul> <li><a href="index.html">Cheesecakes</a></li> <li><a href="poundcake.html">Pound Cakes</a></li> <li><a href="southernspecial.html">Southern Specialties</a></li> <li><a href="holiday.html">Holiday Extras</a></li> </ul> <ul> <li><a href="valentine.html">Valentines Specials</a></li> <li><a href="noahsark.html">Noah's Ark Cakes</a></li> <li><a href="personchef.html">Personal Dessert Chef</a></li> </ul> </div> <h2>Cheesecakes</h2> <div id="content"> <div id="col1cheese"> <img src="cheesecake.jpg" alt="cheesecake" width="160" height="160" class="cheesecake"> <dl><dt class="cakelisttitle">Pumpkin Cheesecake</dt> <dd class="cakelistdescription">Ginger Snap Crust</dd> <dt class="cakelisttitle">Chocolate Cheesecake</dt> <dd class="cakelistdescription">Chocolate Crust</dd> <dt class="cakelisttitle">Pina Colada Cheesecake</dt> <dd class="cakelistdescription">Macaroon Crust(large only)</dd> <dt class="cakelisttitle">Apricot Swirl Cheesecake</dt> <dd class="cakelistdescription">Graham Cracker Crust</dd> <dt class="cakelisttitle">Chocolate Orange Cheesecake</dt> <dd class="cakelistdescription">Chocolate Crust</dd> <dt class="cakelisttitle">Plain Yummy Cheesecake</dt> <dd class="cakelistdescription">Graham Cracker Crust</dd> </dl> </div> <div id="col2cheese"> <table id="pricemenucheese"> <thead></thead> <tbody> <tr> <td>Large</td> <td>$25</td> </tr> <tr> <td>Not-so-Large</td> <td>$20</td> </tr> <tr> <td>Lower Fat, Large</td> <td>$30</td> </tr> <tr> <td>Lower Fat, Not-so-Large</td> <td>$25</td> </tr> <tr> <td>With Artfully Arranged Fresh Fruit</td> <td>$10 extra</td> </tr> </tbody> </table> </div> <div class="clearboth"></div> </div> <div class="clearboth"></div> <div id="details"> <div id="detailparagraphs"><p>Please order 24-48 hours in advance. Desserts can be baked in your own pans and custom packaging is available for weddings, birthdays, showers, etc. We welcome large or corporate orders.</p> <p>All desserts are made from scratch using only the finest ingredients. Special requests are cheerfully accomodated if possibly.</p> <p class="phoneline">Place your order by calling Laura at 832-721-6635</p> <p class="blessing">“May God bless you and keep you today and every day, and may you enjoy your desserts!”</p> </div> </div> </div> </body> </html>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode