css text under pics

quinnd6 · 09-08-2007 3:51pm #1

Im trying to get the hang of using css for to put up thumbnails on a page with text underneath each pic.
I created a page and included the photos from windows xp in it.

The problems with the page are in IE the text comes up as a link.

Id prefer it if the text underneath each picture wasnt a link but don't know how to fix it so it isn't.
Also some of the pics have a little dot under them.

How do I get rid of the dots and get the text under the pics to just be plain text and not a link?

Heres the code for the page.

<html>
<head>
<title>Practice thumbnail Web Page</title>

<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {margin:0px; padding:0px;}

img.photo
{
	margin-right:20;
	height:100;
	width:130;
	border:0;
}

img.photoGroup2
{
	
	position:relative;
	
	height:15%;
	width:130;
	border:0;
	left:10%;

}
#caption
{
	
	position:relative;
	left:10%;
	
}
#caption2
{
	
	position:relative;
	left:+30.2%;
	bottom:2.2%;

}
#caption3
{
	
	position:relative;
	left:+49%;
	bottom:4.2%;
	padding:0;

}


#centre
{
	background:#faa;
	float:left;
	width:60%;
	height:900px;
	
	
	

}

#leftbox
{
	
	margin:0;
	float:left;
	height:900px;
	width:20%;
	background-image:url('Winter.jpg');
	
	
}

#rightbox
{
	
	margin:0;
	float:right;
	height:900px;
	width:20%;
	background-image:url('Winter.jpg');
	
	
}
#heading
{
	position:relative;
	left:0%;
    padding:0;
	margin:0;
	font-size:30px;
	text-indent:130px;

}

</style>


</head>
<body>



<div id="leftbox"></div>
<div id="rightbox"></div>

<div id = "centre">

	<div id="heading"><b>Picture Gallery</b></div><br>
<a href="Blue hills.jpg"target="_blank"><img class="photoGroup2"   src="Blue Hills.jpg" href="Blue hills.jpg" </a>
	
<a href="Sunset.jpg"target="_blank"><img  class="photoGroup2"   src="Sunset.jpg"  href="Sunset.jpg"  </a>
<a href="Water lilies.jpg"target="_blank"><img  class="photoGroup2"   src="Water lilies.jpg"  href="Water lilies.jpg"  </a>
<br>
<br>
<div id = "caption">Blue Hills</div>							
<div id = "caption2">Sunset</div>		
<div id = "caption3">Water Lilies</div>		


<a href="Winter.jpg"target="_blank"><img class="photoGroup2" border="0"  src="Winter.jpg"  href="Winter.jpg"  </a>
<a href="Blue hills.jpg"target="_blank"><img class="photoGroup2" border="0"  src="Blue hills.jpg"  href="Blue hills.jpg"  </a>
<a href="Blue hills.jpg"target="_blank"><img class="photoGroup2" border="0"  src="Blue hills.jpg"  href="Blue hills.jpg"  </a>




</div>
<div id = "caption">Winter</div>							
<div id = "caption2">Blue Hills</div>							
<div id = "caption3">Blue Hills</div>						
</body>
</html>

nuada · 09-08-2007 3:57pm

you are not closing the img tags which is why everything after the image is a link. Few other errors in the html too

<a href="Sunset.jpg"target="_blank"><img  class="photoGroup2"   src="Sunset.jpg"  href="Sunset.jpg"  </a>

should be

<a href="Sunset.jpg" target="_blank"><img class="photoGroup2"   src="Sunset.jpg"  /> </a>

megrisoft · 11-08-2007 10:03am

yeah! thats the reason!

css text under pics

Comments