PDA

View Full Version : where do i insert this code?


minpot
10-11-2007, 09:28 PM
i want to add this code so i can edit and insert my own thumbnails and my own big photos.

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>
<br />
<br />
<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

and this is what i have:
blue: is the css from dynamic drive for the pop up image viewer
pink: my own code from building my site.

which is the correct order to insert the css and the html ? THANK YOU
pls. help me inserting in it with another color so i can see where exactly i need to insert it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd (http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd) ">
<html xmlns="http://www.w3.org/1999/xhtml (http://www.w3.org/1999/xhtml)">
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ (http://www.dynamicdrive.com/style/) */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #A79A6D;
margin-top: 0px;
}
.style4 {font-family: "Trebuchet MS", Arial, Tahoma}
.style6 {font-size: large}
-->
</style>
<link href="css_test_.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="1025" align="center">
<tr>
<td width="1017" height="21" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
</table>
</blockquote>
<table width="960" height="359" border="0" align="center" cellspacing="8" bgcolor="#E1DDCE" class="marco_foticos">
<tr>
<td height="343" valign="top"><blockquote>
<p><br />
<span class="style6">Ana Ceramista (logo) </span></p>
</blockquote> <table width="1002" height="274" align="center" cellpadding="5" cellspacing="5" bordercolor="#FFFFFF">
<tr>
<td width="178" height="32" valign="top" bgcolor="#797C65"><div align="right" class="style4">Home</div></td>
<td width="787" rowspan="6" valign="middle" bgcolor="#797C65" class="vertical_izq_naranja"><table width="620" align="center" bgcolor="#000000">
<tr>
<td width="132" height="148"><img src="thumbnail_test/1.jpg" width="130" height="97" class="marco_naranja" /></td>
<td width="99"><img src="thumbnail_test/3.jpg" width="97" height="130" class="marco_naranja" /></td>
<td width="132"><img src="thumbnail_test/4.jpg" width="130" height="106" class="marco_naranja" /></td>
<td width="99"><img src="thumbnail_test/5.jpg" width="97" height="130" class="marco_naranja" /></td>
<td width="134"><img src="thumbnail_test/6.jpg" width="130" height="113" class="marco_naranja" /></td>
</tr>
</table></td>
</tr>
<tr bgcolor="#797C65">
<td height="26" valign="top"><div align="right" class="style4">Studio / Classes </div></td>
</tr>
<tr bgcolor="#797C65">
<td height="26" valign="top"><div align="right"><span class="style4">Online Gallery</span></div></td>
</tr>
<tr bgcolor="#797C65">
<td height="26" valign="top"><div align="right" class="style4">Technical Notes </div></td>
</tr>
<tr bgcolor="#797C65">
<td height="24" valign="top"><div align="right" class="style4">Biography</div></td>
</tr>
<tr bgcolor="#797C65">
<td height="32" valign="top"><div align="right"><span class="style4">Contact info</span></div></td>
</tr>
<tr valign="top" bgcolor="#797C65">
<td height="40" colspan="2" valign="middle" bgcolor="#FFFFFF"><p>The wonder, the beauty and the mistery in pit firing, gets me deeper into keep trying . </p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

minpot
10-11-2007, 09:30 PM
and this is the actual image viewer i want to place in my site:
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P90/+

edbr
10-12-2007, 04:45 AM
your page should have a head section like so
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
your styles should be in that section or better still use a linked style sheet.
where you want to insert you code is in the body ( the visible section)section where ever you want it to appear