...

View Full Version : How do I remove the black border around the thumbnails???



Halcyon1967
03-06-2012, 10:16 PM
Just wondering if someone could help me out. Galleria is really excellent but the thumbnails have a black border around each of them, and I can't get rid of them. Could someone tell me how?

Here is my code...


<html>
<head>
<meta content="text/html; charset=iso-8859-1"
http-equiv="Content-Type">
<title>Raspberries Cupcakes: Home</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.6.min.js"></script>
<style type="text/css">
body,td,th {
font-size: 12px;
color: #000;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
body {
background-color: #FFF;
}
.galleria-container{
background: #CC0066}​;
}
.white {
color: #FFF;
}
.copyright {
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
color: #000;
}
.main {
font-family: "Lucida Console", Monaco, monospace;
font-size: 18px;
color: #000;
}
.main {
font-family: Verdana, Geneva, sans-serif;
}
.main {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
</style>
</head>
<body
style="background-image: url(background.jpg); color: rgb(229, 52, 174); background-color: rgb(255, 255, 255);"
alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: center;">
<p><img src="raspberrieslogo.gif" height="63" width="387"><img
style="width: 151px; height: 151px; color: rgb(239, 76, 218);"
alt="HeartLogo" src="heartlogotiny.jpg"><img src="cupcakeslogo.gif"
alt="CupcakesLogo" height="64" width="302"></p>
<p><img src="menu.gif" alt="Menu" usemap="#Map" border="0" height="43"
width="895"> <map name="Map">
<area shape="rect" coords="17,7,79,29" href="index.html">
<area shape="rect" coords="106,12,211,29" href="contactus.html">
<area shape="rect" coords="223,11,251,30" href="contactus.html">
<area shape="rect" coords="299,12,357,28" href="menu.html">
<area shape="rect" coords="403,12,488,31" href="prices.html">
<area shape="rect" coords="521,11,640,34" href="delivery.html">
<area shape="rect" coords="678,9,749,30" href="order.html">
<area shape="rect" coords="782,11,884,35" href="gallery.html">
</map>
</p>
</div>
<table
style="width: 1127px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 200px;"><br>
&nbsp; </td>
<td width="810">
<div id="gallery"> <img src="cupcake.jpg"
alt=" Chocolate Cupcake"
title="Chocolate sponge with cream cheese frosting and sprinkles"
align="left"> <img src="211.jpg" align="left"><img src="img0192ob.jpg"
alt="Raspberry Cupcakes"
title="Chocolate sponge with cream cheese frosting with a raspberry on top"
align="left"><img src="209ea.jpg" align="left"> <img src="202.jpg"
alt="Cherry Cupcake"
title="Chocolate sponge with cream cheese frosting" align="left"> <img
src="208.jpg" alt="Cherry Cupcakes"
title="Chocolate sponge with cream cheese frosting" align="left"><img
src="img0190.jpg" alt="Chocolate Cupcake"
title="Chocolate sponge with cream cheese frosting" align="left"></div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({

autoplay: 5000, // will move forward every 5 seconds
pauseOnInteraction: false,
transition: 'fade',
width: 500,
height: 500,
outline: 0
});
</script></td>
<td width="117">
<p class="main"><span class="main"><strong><br>
</strong></span></p>
<p class="main"><span class="main"><strong><br>
</strong></span></p>
<p class="main"><span class="main"><strong>Any time is</strong></span>
<span class="main"><strong>CUPCAKE</strong></span><strong> time.</strong></p>
<p class="main" align="justify">Welcome to Raspberries Cupcakes,
we are an internet only cupcake company. We are based in Manchester,
UK. All our cupcakes are made to order just for you. So if you want to
treat yourself or show some love for any occasion say it with our
cupcakes. Contact us on either or or by e-mail
at </p>
<p class="main" align="justify"><a href="order.html">Order here</a></p>
<p><img src="spacer.gif" alt="spacer" height="56" width="200"></p>
<p><img src="facebookicon.gif" alt="facebook" height="74"
width="69"><img src="twitterlogo.gif" alt="twitter" height="78"
width="73"></p>
<p>&nbsp;</p>
<p class="main" align="justify">&nbsp;</p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td> <br>
</td>
</tr>
</tbody>
</table>
<p align="center"><span class="copyright"> Raspberries Cupcakes 2012.
This website was created by <span style="background-color: white;"></span>. Brushes by <a
href="http://creativesplash.deviantart.com/art/ps-floral-brushes-111118326">Daily
Flower</a>.</span></p>
</body>
</html>

Halcyon1967
03-06-2012, 10:35 PM
Sorry I forgot to say please.

I would really appreciate any help.

Thanks

Old Pedant
03-06-2012, 11:05 PM
Nothing to do with JavaScript.

Just use CSS to specify no border.

Old fashioned way:


<img ... border="0" /?


More modern way:


<img ... style="border: none;" />

And of course you could put it in a style sheet in such a way that it applies to all images in a <div> or other container:


<style type="text/css">
div#images img, img.noborder { border: none; }
</style>

...
<img ... /><!-- this one will have a brder -->

<div id="images">
<img ... /><!-- no border -->
<img ... /><!-- no border -->
<img ... /><!-- no border -->
<img ... /><!-- no border -->
</div>

<img class="noborder" ... /><!-- another with no border -->

...

webdev1958
03-07-2012, 12:02 AM
More modern way:


<img ... style="border: none;" />


Inline styles, as above, are largely frowned upon nowadays and so I wouldn't call it "Modern way" of styling elements.

Best practice nowadays is to keep content, styling and functionality as separate as possible and so css styling should be kept in separate stylesheets.

Halcyon1967
03-07-2012, 01:25 AM
Thank you so much for the reply, I've tried using your advice but the black borders aren't gone, not sure what to do.

Halcyon1967
03-07-2012, 04:06 AM
Its OK I've found the code to remove the black borders. Just in case anyone wants to know, you just add this...
.galleria-thumbnails .galleria-image { border:0px; } to the CSS.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum