The site is but the gallery isn't up yet. It's just a list of pictures which is pretty lame.
The complete CSS code is:
body {
font: .8em/1.8em verdana, arial, sans-serif;
background-color: #006FF0;
margin-left: 70px;
margin-right: 70px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0;
}
#content {
border: 0 1px 1px 1px solid #ffffff;
padding: 10px 5px 6px 5px;
background-color: #FFFFFF;
}
#content h1 {
font-size: 1.3em;
color: #85a0f6;
background-color: transparent;
}
#content h2 {
font: 1.2em bold;
color: #002FAF;
background-color: transparent;
}
#content p:first-letter {
font-size: 1.5em;
padding: 0.1em;
color: #000000;
vertical-align: middle;
}
#content p::first-child {
margin-left: 2em;
}
#content img {
border: none;
padding: 4px;
float: none;
}
#content img.floatRight {
position: relative;
float: right;
}
#content img.floatLeft {
position: relative;
float: left;
}
#banner
{
height: 120px;
background-color: #F9F8AC;
margin-bottom: -34px; /* Moves the navigation menu up into the banner */
background-image: url(../images/gael2.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#footer {
position: relative;
bottom: 0;
top: 0;
width: 100%;
border-top: 1px dotted #AAAAAA;
background-color: #CCCCCC;
color: #626262;
font-size: 70%;
text-align: center;
height: 20px;
}
#footer p {
margin: 0.5em 0 1em 2em;
}
ul#tabnav {
list-style-type: none;
margin: 0;
padding-left: 40px;
padding-bottom: 33px;
border-bottom: 1px solid #000000;
font: bold 11px verdana, arial, sans-serif;
}
ul#tabnav li {
float: left;
height: 29px;
background-color: #F9F8AC;
color: #000000;
margin: 2px 2px 0 2px;
border: 2px solid #000000;
border-bottom: none;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #000000;
background-color: transparent;
text-decoration: none;
padding: 4px;
padding-bottom: 12px; /* This enabled me to make the hover cover the full title box */
}
ul#tabnav a:hover {
background-color: #33CCFF; /*#006699; /*#F4869C;*/
color: #000000;
}
body#ind li.ind, body#bground li.bground, body#services li.services, body#radio li.radio, body#links li.links, body#contact li.contact, body#pictures li.pictures {
border-bottom: 1px solid #ffffff;
color: #ffffff;
background-color: #ffffff;
}
body#index li.ind a:link, body#ind li.ind a:visited,
body#bground li.bground a:link, body#bground li.bground a:visited,
body#services li.services a:link, body#services li.services a:visited,
body#radio li.radio a:link, body#radio li.radio a:visited,
body#links li.links a:link, body#links li.links a:visited,
body#contact li.contact a:link, body#contact li.contact a:visited,
body#pictures li.pictures a:link, body#pictures li.pictures a:visited
{
color: #000000;
background-color: #ffffff; /*#85A0F6*/;
}
#translate {
position:absolute;
top: 126px;
right: 75px;
border: 1px;
}
#translate a:link, #translate a:visited {
margin-right: 2px;
padding: 3px 10px 2px 10px;
color: #f9f8ac; /*#A62020;*/
background-color: #0C097D; /*#85a0f6; /*#FCE6EA;*/
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
#translate a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
/* START OF IMAGE VERTICAL SLIDESHOW */
#dhtmlgoodies_slideshow{
width:830px; /* Total width of slideshow */
margin-top: 20px; /* Added to move the picture div down a bit to make room for the translate div */
}
#previewPane{
border:1px solid #000;
margin-right:14px;
text-align:center;
vertical-align:middle;
padding-top:30px;
/* CSS HACK */
height: 452px; /* IE 5.x */
height/* */:/**/452px; /* Other browsers was 420 */
height: /*was 420*/452px;
width:680px;
float:left;
}
#waitMessage{
display:none;
position:absolute;
left:350px;
top:350px;
background-color:#FFF;
border:3px double #000;
padding:4px;
color:#555;
font-size:0.9em;
font-family:arial;
}
#galleryContainer{ /* Big Div surrounding up image, list of images and down image */
float:left; /* Floating */
/* CSS HACK */
height: 454px; /* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
height/* */:/**/438px; /* Other browsers */
height: /**/438px;
/* CSS HACK */
width: 124px; /* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
width/* */:/**/124px; /* Other browsers */
width: /**/124px;
border:1px solid #000; /* Black border */
padding:1px; /* A little space between the black border and the content inside */
}
#galleryContainer #arrow_down{ /* Arrow down image */
height:35px;
}
#galleryContainer #arrow_up{
height:35px; /* Arrow up image */
}
#theImages{ /* DIV where the images are located */
position:relative;
overflow:hidden;
height:448px; /* Height of boxes for the images */
}
#theImages div{
position:relative; /* Don't change this */
height:1500px; /* Higher than total height of thumbnails */
}
#theImages img{
border:0px; /* No border */
filter:alpha(opacity=50); /* Transparency - IE */
opacity:0.5; /* Transparency - Firefox */
padding-top:1px; /* Space between images */
}
#previewPane #largeImageCaption{ /* CSS styling of image caption below large image */
font-style:italic;
text-align:center;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
font-size:0.9em;
}
#theImages .imageCaption{
display:none;
}
********************************************************
********************************************************
The HTML code is:
<!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>
<title>Gael Taca Corcaigh - Pictiúirí</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/gaeltaca.css" />
<script type="text/javascript" src="js/image-slideshow-vertical.js">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
</script>
</head>
<body id="pictures">
<div id="banner"><a href="index.html"></a></div>
<ul id="tabnav">
<li class="ind"><a href="index.html">Baile</a></li>
<li class="bground"><a href="culra.html">Cúlra</a></li>
<li class="services"><a href="seirbhisi.html">Seirbhisi</a></li>
<li class="radio"><a href="raidio.html">Raidió</a></li>
<li class="links"><a href="nasc.html">Nascanna</a></li>
<li class="contact"><a href="teagmhail.html">Teagmháil</a></li>
<li class="pictures"><a href="pictiuiri.html">Pictiuiri</a></li>
</ul>
<div id="content">
<div id="translate"><a href="en/pictures.html">English</a></div>
<div id="dhtmlgoodies_slideshow">
<div id="previewPane">
<img src="images/image1_big.jpg" />
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>
</div>
<div id="galleryContainer">
<div id="arrow_up"><img src="images/arrow-up.gif" id="arrow_up_image" /></div>
<div id="theImages">
<div>
<a href="#" onclick="showPreview('images/DSCF0129.jpg','1');return false"><img src="images/DSCF0129_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0261.jpg','2');return false"><img src="images/DSCF0261_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0264.jpg','3');return false"><img src="images/DSCF0264_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0277.jpg','4');return false"><img src="images/DSCF0277_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0281.jpg','5');return false"><img src="images/DSCF0281_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0282.jpg','6');return false"><img src="images/DSCF0282_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0289.jpg','7');return false"><img src="images/DSCF0289_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0302.jpg','8');return false"><img src="images/DSCF0302_t.jpg" /></a>
<div class="imageCaption">This is the caption of image number 1</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>
<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
<div id="slideEnd"></div>
</div>
</div>
<div id="arrow_down"><img src="images/arrow-down.gif" id="arrow_down_image" /></div>
</div>
</div>
</div>
</body>
</html>
