...

View Full Version : Help with Galleria & CSS issue, 2 css files, conflict



angeal
05-08-2010, 05:50 AM
I'm hoping someone can please help me. :confused: I've been working on this file for several hours.. I am trying to install Galleria, and have everything working on my test page.. problem is when I install it into a page that I already have (existing, which has a css file already linked to it), this css file is styling my header / footer, etc. When I delete this css original file, the Galleria works perfectly. I have tried analyzing this to death but it is beyond my grasp. Can someone please help me.. I would be so grateful! Thanks.. here is the code..

Gallerific-2.css:

div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
float: right;
width: 745px;
top: -300px;
}
div.content a, div.navigation a {
text-decoration: none;
color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
text-decoration: underline;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container {
position: relative;
clear: both;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
background-image: url(loader.gif);
background-repeat: no-repeat;
background-position: center;
width: 550px;
height: 350px /* This should be set to be at least the height of the largest image in the slideshow */
}

#loading { background-color: #fff; background-image: url(loader.gif); height: 500px; left: -90px; top: -500px; visibility: visible; z-index: 15000}
#layer1 { background-color: #fff; height: 502px; position: absolute; top: -500px; left: 400px; right: 10px; width: 500px; visibility: visible; z-index: 5000 }
#caption { background-color: #fff; height: 75px; position: relative; width: 500px; visibility: visible; }


div.slideshow {
clear: both;
}

div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshow a.advance-link {
display: block;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
vertical-align: middle;
border: 1px solid #ccc;
}
div.download {
float: right;
}
div.caption-container {
position: relative;
clear: left;
height: 75px;
}
span.image-caption {
display: block;
position: absolute;
width: 500px;
top: 0;
left: 0;
}
div.caption {
padding: 12px;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #000;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #ccc;
}
div.pagination a:hover {
background-color: #eee;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}

Style.css:


body{
padding:15;
margin:0;
font:normal 12px/20px Georgia, "Times New Roman", Times, serif;
background-color: #FFFFFF;
}
*{
margin:0;
padding:0;
}
div, p, h1, h2, h3, h4, h5, h6, form, input, select, label, li{
padding:0;
margin:0;
background-color: #FFFFFF;
background-repeat: repeat-x;
}
img{
padding:0;
margin:0;
display:block;
border:none;
line-height:0;
font-size:0;
}
ul{
padding:0;
margin:0;
list-style-type:none;
line-height:0;
font-size:0;
background-color: #030303;
}
a{
text-decoration:none;
outline:none;
}
.spacer{
clear:both;
line-height:0;
font-size:0;
}
/* main */
#main{
width:1003px;
margin:0 auto 0 auto;
}
/* Navigation */
#nav{
background-color:#030303;
color:inherit;
height:84px;
background-repeat: repeat-x;
}
.contact{
width:auto;
font:normal 11px/14px Arial, Helvetica, sans-serif;
color:#CCCCCC;
background-color:#12110D;
float:left;
margin-top: 58px;
margin-right: 46px;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 245px;
}
.contact a{
color:#9F9F9F;
background-color:inherit;
}
.contact a:hover{
text-decoration:underline;
}
p{
font:normal 12px/21px Georgia, "Times New Roman", Times, serif;
margin:10px 0 0 0;
}
#nav ul{
padding:49px 0 0 23px;
width:auto;
background-color: #030303;
}
#nav ul li{
float:left;
margin:0 1px 0 0;
width:auto;
}
#nav ul li a{
float:left;
width:auto;
background-color: #030303;

}
#nav ul li a span.left{
float:left;
width:auto;
}
#nav ul li a span.left span.right{
padding:0 13px;
font:bold 13px/35px Arial, Helvetica, sans-serif;
color:#fff;
float:left;
cursor:pointer;
width:auto;
background-color:inherit;
}
#nav ul li a:hover{
float:left;
width:auto;
background-image: url(images/nav_bg.gif);
background-repeat: repeat-x;
background-position: 0 0;
}
#nav ul li a:hover span.left{
float:left;
width:auto;
background-image: url(images/nav_left.gif);
background-repeat: no-repeat;
background-position: left top;
}
#nav ul li a:hover span.left span.right{
padding:0 13px;
color:#000000;
display:block;
float:left;
cursor:pointer;
width:auto;
background-image: url(images/nav_right.gif);
background-repeat: no-repeat;
background-position: right top;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 35px;
font-weight: bold;
}
#nav ul li a.active{
background:url(images/nav_bg.gif) repeat-x 0 0;
float:left;
width:auto;
}
#nav ul li a.active span.left{
background:url(images/nav_left.gif) no-repeat left top;
float:left;
width:auto;
}
#nav ul li a.active span.left span.right{
padding:0 13px;
font:bold 13px/35px Arial, Helvetica, sans-serif;
color:#222222;
background-color:inherit;
display:block;
float:left;
cursor:pointer;
width:auto;
background-image: url(images/nav_right.gif);
background-repeat: no-repeat;
background-position: right top;
}
#line-top{
background:#003366;
background-repeat: repeat-x;
width:auto;
}

/* Leftpanel */
#leftpanel{
width:345px;
float:left;
}
.logo{
margin:26px 0 0 54px;
display:inline;
}
#leftpanel h3{
color:#754200;
background-color:inherit;
margin:0 0 0 70px;
width:auto;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
font-style: normal;
line-height: 25px;
font-weight: normal;
font-variant: normal;
}
#leftpanel h2{
font:normal 20px/22px Georgia, "Times New Roman", Times, serif;
color:#1F1F1F;
background-color:inherit;
background-position: center;
text-align: center;
text-indent: 0px;
}
#leftpanel .dashed{
margin:16px 0 0 0;
}
#leftpanel #news{
width:260px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 56px;
background-position: center;
}
#leftpanel .newscontent{
padding-top: 14px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
margin-left: 20px;
}
#leftpanel .newscontent2{
margin-left: 20px;
padding-top: 12px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#leftpanel h6{
color:#4D917B;
background-color:inherit;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: normal;
line-height: 22px;
font-weight: normal;
font-variant: normal;
}
h1{
color:#754200;
background-color:inherit;
margin:18px 0 0 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
}
h1.left{
color:#754200;
background-color:inherit;
margin:10px 0 0 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
}
.readmore{
font:bold 12px/35px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#CC0003;
background-color:inherit;
}
.readmore2{
font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#CC0003;
background-color:inherit;
text-decoration:underline;
}
.readmore:hover{
color:#660405;
background-color:inherit;
}
#leftpanel .search_container{
width:247px;
height:45px;
background-color:#F7F7F7;
color:inherit;
border:1px solid #D8D8D9;
padding:12px 0 0 11px;
margin:10px 0 0 0;
}
#leftpanel .search_container .input{
width:192px;
height:25px;
border:1px solid #E2E2E2;
font:normal 11px/22px Arial, Helvetica, sans-serif;
padding:2px 0 0 7px;
float:left;
margin:0 7px 0 0;
}
.search_bttn{
background:url(images/search_bttn.gif) no-repeat 0 0;
width:32px;
height:35px;
border:none;
float:left;
cursor:pointer;
}
/* rightpanel */
#rightpanel{
width:607px;
float:left;
background-color:#fff;
color:inherit;
padding-top: 0;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
}
#header{
height:361px;
background-image: none;
background-repeat: no-repeat;
background-position: 7px 0;
}
.container{
margin:28px 0 0 0;
background-color: #FFFFFF;
height: 700px;
width: 900px;
}
#rightpanel .body{
width:536px;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 31px;
}
#rightpanel h4{
font:normal 30px/32px Georgia, "Times New Roman", Times, serif;
color:#000;
background-color:#FFFFFF;
}
.dashed{
font:bold 12px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#CCCCCC;
background-color:inherit;
}
#rightpanel h5{
font:normal 25px/32px Georgia, "Times New Roman", Times, serif;
color:#000;
background-color:inherit;
margin:20px 0 0 0;
}
#rightpanel .service_img{
margin:24px 22px 0 0;
float:left;
width:auto;
}
#rightpanel .portfolio_img{
margin:0 27px 0 0;
float:left;
width:auto;
}
#rightpanel .services_con{
width:370px;
float:left;
margin:8px 0 0 0;
background-color: #FFFFFF;
}
#rightpanel ul{
margin:4px 0 0 0;
background-color: #FFFFFF;
}
#rightpanel ul li{
background-color: #FFFFFF;
background-image: url(images/bulet.gif);
background-repeat: no-repeat;
background-position: 0 center;
}
#rightpanel ul li a{
font:normal 13px/25px Georgia, "Times New Roman", Times, serif;
color:#B37200;
background-color:#FFFFFF;
padding:0 0 0 17px;
text-decoration:underline;
}
#rightpanel ul li a:hover{
text-decoration:none;
}
#rightpanel p{
font:normal 12px/23px Georgia, "Times New Roman", Times, serif;
margin:10px 0 0 0;
background-color: #FFFFFF;
}
/* Success Story */
#sucess_story{
height:30px;
width:100%;
background-image: url(images/profile_bg.gif);
background-repeat: repeat-x;
background-position: 0 0;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
z-index: 50;
}
#sucess_story .story{
width:896px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 20px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}


/*Footer */
#footer{
height:103px;
background-color:#1F1F1F;
color:inherit;
}
#footer .link{
width:600px;
padding:30px 0 0 47px;
background-color: #1F1F1F;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#footer ul{
width:550px;
}
#footer ul li{
float:left;
width:auto;
background:url(images/footer_divi.gif) no-repeat 0 7px;
}
#footer ul li a{
font:normal 11px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#CCCCCC;
background-color:inherit;
padding:0 12px;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer ul li.noimg{
background-image:none;
}
#footer .copyright{
font:normal 11px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#7A7A7A;
background-color:inherit;
width:450px;
padding:0 0 0 60px;
}

#footer .copyright a{
color:#669999;
background-color:inherit;
width:450px;
padding:0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 25px;
font-weight: normal;
font-variant: normal;
}

html:

[CODE]
<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="example-2/basic.css" type="text/css" />
<link rel="stylesheet" href="example-2/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="example-2/jquery-1.3.2.js"></script>
<script type="text/javascript" src="example-2/jquery.galleriffic.js"></script>
<script type="text/javascript" src="example-2/jquery.opacityrollover.js"></script>
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
</head>

<body>
<div id="page">
<div id="container">
<h2>Thumbnail rollover effects and slideshow crossfades</h2>

<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
<img src="example-2/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #0</div>
<div class="image-desc">Description</div>
</div>
</li>


</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');

// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});

// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '&lsaquo; Previous Photo',
nextLinkText: 'Next Photo &rsaquo;',
nextPageLinkText: 'Next &rsaquo;',
prevPageLinkText: '&lsaquo; Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
</body>
<!-- Rightpanel container Ends -->
<br class="spacer"/>
<!-- Sucess story container start -->
<div id="sucess_story"></div>
<!-- Sucess story container Ends -->
<!-- Footer container start -->
<div id="footer">
<div class="link">
<ul>
<li class="noimg"><a href="index.html" title="Home">Home</a></li>
<li><a href="about.html" title="About Me">About Me</a></li>
<li><a href="invitations.html" title="Wedding Invitations">Wedding Invitations</a></li>
<li><a href="specialoccasions.html" title="Special Occasions">Special Occasions</a></li>
<li><a href="process.html" title="Process">Process</a></li>
<li><a href="contact.html" title="Contact Me">Contact Me</a></li>
</ul>
</div>
<br class="spacer" />
</div>

<!-- Footer container Ends -->
</div>
<!-- Main container Ends -->
</body>
</html>

abduraooft
05-08-2010, 09:59 AM
Can we have a link to your page?

PS: please edit your post and add
][/COLOR] tags around the code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum