Hey all,
I'm a bit of a novice when it comes to CSS, I'm manipulating a template for a friends site, and I'm adding a Visual lightbox gallery, I have all the relative files where they shoudl be...
I have used this gallery software many many times without issue,
I think there may be a CSS Style conflict between the embedded style in the template and the added code for the gallery:
Would someone mind looking at it and let me know any suggestions!
As I said, I'm fairly poor at CSS!
Thanks in advance!
I'm a bit of a novice when it comes to CSS, I'm manipulating a template for a friends site, and I'm adding a Visual lightbox gallery, I have all the relative files where they shoudl be...
I have used this gallery software many many times without issue,
I think there may be a CSS Style conflict between the embedded style in the template and the added code for the gallery:
Would someone mind looking at it and let me know any suggestions!
As I said, I'm fairly poor at CSS!
Thanks in advance!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Student Accomadation</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/IE6.css" media="screen" />
<![endif]-->
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.1.js"></script>
<script type="text/javascript" src="js/smooth.pack.js"></script>
<script type="text/javascript">
$(function() {
$('#sliding').cycle({
fx: 'scrollDown',
easing: 'bounceout',
delay: -2000
});
});
</script>
<script src="engine/js/prototype.js" type="text/javascript"></script>
<script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="engine/js/lightbox.js" type="text/javascript"></script>
<style>
.gallery {
zoom:1;
width:auto;
}
.gallery a {
display:block;
float:left;
margin:5px;
opacity:0.87;
text-align:center;
}
.gallery a:hover {
opacity:1;
}
.gallery a img {
border:none;
display:block;
}
.gallery a#vlightbox{display:none}
</style>
<style type="text/css">
<!--
.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
}
.style2 {font-size: 12px}
.style4 {font-size: 24px}
.style5 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; }
.style6 {font-family: Georgia, "Times New Roman", Times, serif}
-->
</style>
</head>
<body>
<!-- featured_bloc -->
<div id="featured_bloc">
<div class="content">
<div id="featured"><p><span class="inv">Featured</span></p></div>
<a name="top" id="top"></a>
</div>
</div>
<!-- /featured_bloc -->
<!-- top_nav -->
<div id="top_nav">
<div class="content">
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="facilities.html" title="Facilities">Facilities</a></li>
<li><a href="rooms.html" title="Rooms">Rooms</a></li>
<li><a href="form.html" title="Book Now" class="current">Book Now!</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
<li><a href="map.html" title="Map">Map</a></li>
</ul>
</div>
</div>
<!-- /top_nav -->
<!-- name_part -->
<div id="name_part">
<div class="content">
<h1 id="logo"><a href="#" title="Dark Company"><span class="inv">Dark Company</span></a></h1>
<div class="slogan">
<p><br />
Now taking bookings for the 2009-2010 Academic year </p>
</div>
</div>
</div>
<!-- /name_part -->
<!-- slider -->
<div id="slider">
<div class="content">
<!-- slider_content -->
<div id="sliding">
<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="840" height="260">
<param name="movie" value="flash%20banner.swf" />
<param name="quality" value="high" />
<embed src="flash%20banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="840" height="260"></embed>
</object>
</div>
<!-- /slider_content -->
</div>
</div>
<!-- /slider -->
<!-- main -->
<div id="main">
<div class="content">
<!-- contents of dynamic pages -->
<div id="pages">
<!-- Home -->
<div id="home">
<div>
<p class="style5"> Rooms Gallery</p>
<div class="gallery">
<a href="./data/images/ViewfromPenthouse.jpg" rel="lightbox[sample]" title="View from Penthouse"><img src="./data/thumbnails/ViewfromPenthouse.png" /></a>
<a href="./data/images/DSCF0174.jpg" rel="lightbox[sample]" title="DSCF0174"><img src="./data/thumbnails/DSCF0174.png" /></a>
<a href="./data/images/DSCF0182.jpg" rel="lightbox[sample]" title="DSCF0182"><img src="./data/thumbnails/DSCF0182.png" /></a>
<a href="./data/images/DSCF0183.jpg" rel="lightbox[sample]" title="DSCF0183"><img src="./data/thumbnails/DSCF0183.png" /></a>
<a href="./data/images/DSCF0185.jpg" rel="lightbox[sample]" title="DSCF0185"><img src="./data/thumbnails/DSCF0185.png" /></a>
<a href="./data/images/DSCF0186.jpg" rel="lightbox[sample]" title="DSCF0186"><img src="./data/thumbnails/DSCF0186.png" /></a>
<a href="./data/images/DSCF0187.jpg" rel="lightbox[sample]" title="DSCF0187"><img src="./data/thumbnails/DSCF0187.png" /></a>
<a href="./data/images/DSCF0188.jpg" rel="lightbox[sample]" title="DSCF0188"><img src="./data/thumbnails/DSCF0188.png" /></a>
<a href="./data/images/DSCF0191.jpg" rel="lightbox[sample]" title="DSCF0191"><img src="./data/thumbnails/DSCF0191.png" /></a>
<a href="./data/images/LaundryFacilities.jpg" rel="lightbox[sample]" title="Laundry Facilities"><img src="./data/thumbnails/LaundryFacilities.png" /></a>
<a href="./data/images/PenthouseBalcony.jpg" rel="lightbox[sample]" title="Penthouse Balcony"><img src="./data/thumbnails/PenthouseBalcony.png" /></a>
<a href="./data/images/ShortWalktoRCSI.jpg" rel="lightbox[sample]" title="Short Walk to RCSI"><img src="./data/thumbnails/ShortWalktoRCSI.png" /></a>
<a id="vlightbox" href="http://visuallightbox.com/">Online Photo Album Sharing by VisualLightbox.com</a>
</div>
<p> </p>
<p> </p>
<p><br />
</p>
<p> </p>
</div>
<div class="blue_line_big"></div>
<div id="tri_bloc">
<div class="tri_bloc_one">
<h4>Available Facilities...</h4>
<img src="images/tri_bloc_one.png" width="236" height="64" alt=" " />
<p>Aungier Street residence is an apartment style complex. There are four floors within the residence. Each floor can accommodate between three and six students. All the rooms are ensuite. Each floor has a separate state of the art kitchen/living/dining area with sun terrace. <br />
<a href="facilities.html">Click here for more</a> </p>
</div>
<div class="tri_bloc_two">
<h4>Book Now!</h4>
<img src="images/tri_bloc_two.png" width="236" height="64" alt=" " />
<p>We are currently taking bookings for the 2009 / 2010 academic year. The Aungier Street Student Residence is in high demaind, so book early to avoid dissapointment. You can call, email or book via our online form.<br />
<br />
<strong><a href="form.html">Click here for more </a> </strong> </p>
</div>
<div class="tri_bloc_tri">
<h4>Where Are We?</h4>
<img src="images/tri_bloc_tri.png" width="236" height="64" alt=" " />
<p>Our residence is only 5 minutes away from Dublins premier shopping district. (Grafton Street) For anyone [url=http://www.homestaypenang.net/]travel[/url]ling to Dublin it is the perfect location only minutes away from Dublin 's central shopping district. Everything offered by Dublin 's historical culture can also be reached with ease. <br />
<strong><a href="map.html">Click here for more</a></strong> </p>
</div>
<br class="clear" />
</div>
</div>
<!-- /Home -->
</div>
<!-- /contents of dynamic pages -->
<div id="go_top">
<a href="#top" title="Go to the top"><span>Go to the top</span></a>
</div>
</div>
</div>
<!-- /main -->
<!-- footer -->
<div id="footer">
<div class="content">
<div class="copyright">
<p><br />
</p>
</div>
<div class="footer_slogan">
<h1 class="style4"><br />
<em>The perfect place for the city student...</em> </h1>
</div>
<br class="clear" />
</div>
</div>
<!-- /footer -->
</body>
</html>