Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

css text under pics

  • 09-08-2007 03:51PM
    #1
    quinnd6
    Registered Users, Registered Users 2 Posts: 1,559 ✭✭✭


    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>


Comments

  • #2
    nuada
    Closed Accounts Posts: 68 ✭✭nuada


    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>


  • #3
    megrisoft
    Closed Accounts Posts: 3 ✭megrisoft


    yeah! thats the reason!


Advertisement