a slight problem/question on CSS

Question

JerieLsky 0 Junior Poster in Training

15 Years Ago

Hi, guys.. I've got this problem on CSS. What i wanted to do is like an image gallery. Luckily i found a tutorial in with this link http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

In the tutorial as you hover into the thumbnail, a pop-up image shows up exactly at the thumbnail pointed to. So that's exactly what i want to happen in my webpage.

So i tried to copy and paste each code of the .css file and .html file, and unluckily I came out with an output that once I point my mouse on the thumbnail, the image actually pop-ups up at the upper left side of my webpage, not at the thumbnail itself.

How's that? What revisions can I make to come with the exact output like what has been shown in the link?

Help me out please. And I'm just quite new in CSS, I don't now much on this yet.

Thanks in advance and have a nice day.

html-css web-design

4 Contributors
11 Replies
117 Views
2 Weeks Discussion Span
Latest Post 15 Years Ago Latest Post by almostbob

Thirusha 20 Posting Whiz

15 Years Ago

I tested the code provided, and mine works correctly.
Could you provide your code, maybe something is missing.

Thirusha 20 Posting Whiz

15 Years Ago

It seems like the css somehow doesnt like to be read from a separate file, I put the stylesheet in the html file and it worked.

ko ko 97 Practically a Master Poster

15 Years Ago

You must validate your HTML. Use the strict mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

JerieLsky 0 Junior Poster in Training · Answer 1 · 2009-10-07T12:13:51+00:00

Here is the code in the .html file

<html>
<head>
<title>Eufrosina Heights - An Eso-Nice Community</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Eufrosina Heights, San Fernando, La Union, economic housing, PAG-IBIG fund, Rang-ay Bank, Eso Nice Realty Development, Inc., Region I">
<style type="text/css">
body {
	background-color: #005100;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#hi
{
	background-image:url('images/backimage.jpg');
}
</style>
<link href="Image.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="menu.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu ******** -->

<!-- ImageReady Slices (final_index.psd) -->
<table width="760" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center">
	<tr>
		<td><img src="images/EufrosinaHeights.jpg" height="50"></td>
	</tr>
</table>
<table width="760" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" id="awmAnchor-menu" align="center">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td height="30"> &nbsp;</td>
	</tr>
	<tr>
		<td height="146" colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="146">
          <param name="movie" value="Movie1.swf">
          <param name="quality" value="high">
          <param name="trapallkeys" value="true">
          <param name="showmenu" value="false">
          <param name="fullscreen" value="false">
          <param name="allowscale" value="false">
		  <param name="wmode" value="transparent">
          <embed src="Movie1.swf" id="hi" width="760" height="146" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" trapallkeys="true" showmenu="false" fullscreen="false" allowscale="false" wmode="transparent"></embed>
        </object></td>
	</tr>
	<tr>
		
    <td width="247" valign="top" bgcolor="#F7F7F7" height="600">
<table width="247" height="373" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td valign="bottom">
			<table width="247" height="300" border="0" cellpadding="0" cellspacing="0">
              <tr>
				<td width="247" height="50"><img src="images/index_01.jpg" width="247" height="60" alt=""></td>
			  </tr>			
              <tr>
                <td height="130" align="center"><img src="images/question2.jpg" width="171" height="113"></td>
              </tr>
              <tr>
                <td align="center"><img src="images/question3.jpg" width="171" height="113"></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
		
    <td width="500" valign="top" bgcolor="#FFFFFF" height="600">
	<table width="500" height="600" border="0" cellpadding="0" cellspacing="0">
          <tr>
			<td height="37" colspan="2"><img src="images/ImageGalleryTitle.jpg" width="513" height="37"></td>			  
		  </tr>
		  <tr>
			<td height="10">&nbsp;</td>
		  </tr>
		  <tr>
			<td height="10" colspan="2">&nbsp;&nbsp;&nbsp; <!-- here is the table that is linked to the .css file -->
				<a class="thumbnail" href="#thumb"><img src="Eufrosina/File0002.jpg" width="100px" height="66px" border="0" /><span> 
				<img src="Eufrosina/File0002.jpg" /><br />Simply beautiful.</span></a>
			</td>
		  </tr>
		  <tr>
			<td width="20">&nbsp;</td>
			<td valign="top">

			</td>
          </tr>
		  <!--Form Question Box-->
	</table></td>
	</tr>
	<tr>
		<td height="31">
			<img src="images/index_07.jpg" width="247" height="31" alt=""></td>
		<td height="31" background="images/bottom_bg.jpg">			<img src="images/bot_email.jpg" width="87" height="31" border="0" align="right" usemap="#Map">
		  <map name="Map">
            <area shape="rect" coords="25,7,37,19" href="E-index.html">
            <area shape="rect" coords="46,9,61,20" href="mailto:inquiry@eufrosinaheights.com">
      </map></td>
	</tr>
</table>
<!-- End ImageReady Slices -->

</body>
</html>

and here is the .css file:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: 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>

JerieLsky 0 Junior Poster in Training · Answer 2 · 2009-10-17T15:11:39+00:00

The .html file did not recognize/read the .css file?

Thirusha 20 Posting Whiz · Answer 3 · 2009-10-20T17:51:54+00:00

The .html file did not recognize/read the .css file?

Thats very strange, could u place the code that u are using with the style inside the same file please, and i can take a look as to why it isnt reading it.

almostbob 866 Retired: passive income ROCKS · Answer 4 · 2009-10-20T20:22:31+00:00

external css files do not have <style></style>
they need only contain definitions, do not require comments whitespace or formatting

.thumbnail{ position: relative; z-index: 0; }
.thumbnail:hover{ background-color: transparent; z-index: 50; }
.thumbnail span{ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; }
.thumbnail span img{ border-width: 0; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 60px; }

likewise html does not require comments whitespace and formatting, it makes it very much easier to debug in development
very much larger to download in use, 25% of the html file in the op is whitespace.
Not going to say anything about tables, {tables bad, css good}

this part of the css .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0;left: 60px; /*position where enlarged image should offset horizontally */} sets the position to 0 60
this .thumbnail:hover span{ visibility: visible; } may be what you need, (unchecked)

JerieLsky 0 Junior Poster in Training · Answer 5 · 2009-10-21T10:45:50+00:00

You must validate your HTML. Use the strict mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

What does the strict mode do? And what kind of validating does it do?

JerieLsky 0 Junior Poster in Training · Answer 6 · 2009-10-21T10:46:15+00:00

You must validate your HTML. Use the strict mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

What does the strict mode do? And what kind of validating does it do? And where do i place that piece of code?

JerieLsky 0 Junior Poster in Training · Answer 7 · 2009-10-21T10:50:06+00:00

external css files do not have <style></style>
they need only contain definitions, do not require comments whitespace or formatting
.thumbnail{ position: relative; z-index: 0; }
.thumbnail:hover{ background-color: transparent; z-index: 50; }
.thumbnail span{ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; }
.thumbnail span img{ border-width: 0; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 60px; }
likewise html does not require comments whitespace and formatting, it makes it very much easier to debug in development
very much larger to download in use, 25% of the html file in the op is whitespace.
Not going to say anything about tables, {tables bad, css good}
this part of the css .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0;left: 60px; /*position where enlarged image should offset horizontally */} sets the position to 0 60
this .thumbnail:hover span{ visibility: visible; } may be what you need, (unchecked)

I think that solved my problem, thanks almostbob.. The problem was only in the .css file.. i just removed the .html tags <style></style> which was not considered as a .css file.. whew.. I am actually still new in web development that's why i still use tables "as basics" if you can suggest some tutorials in css maybe you can share some of your resources there. this actually is my first project, creating a website for a certain client. ^_^

almostbob 866 Retired: passive income ROCKS · Answer 8 · 2009-10-21T12:09:22+00:00

the doctype declaration is the first line of the html file
it tells the browser what html is following
html 1
to html 4
or xhtml 1 strict or not(forgot the correct term there)
merely adding a doctype is insufficient, the doctype has to match the code
the code given is NOT xhtml, adding an xhtml doctype will cause further problems

validating the html is ensuring the code used matches the doctype, is syntactically correct, the W3C has an online validator at http://validator.w3.org/
the code given is closest to html 4.01
there are a bunch of tutorials on W3c.org