bwd
Members
-
Joined
-
Last visited
-
This is the way I do it - I set up ids for each body element, for each page: First page could be: <body id="home"> Second page could be: <body id="news"> Then I can target any element within any page, like this, using descendant selectors: #news #content {background: url(images/contentback.gif) no-repeat 0 0;} I would use an id, not a class, because an id has a higher specificity, so will override any other potential styles that could be causing problems (well, it depends on how many ids and classes you use in the selector, you'd have to google it, "CSS specificity".) So in your case, if your page was called 'news.htm' or whatever, you could put <body id="news"> (it doesn't have to be called "news", that's just because it's easier to use the same name as the name of the page) and in the CSS, have #news #content{background-image: url(images/catalogue%20notepad%20bg.png) no-repeat 0 0;} etc. If you do this, you would have to give all the other pages' body elements an id too, to override the previous one, like #home #content{background-image: url(images/otherimage.png) no-repeat 0 0;} I recommend you use Notepad++, not Dreamweaver, and read the book 'CSS: the missing manual', which is how I learnt CSS. Also, I had a quick look at your HTML, and it's full of 'inline styles' (google it), you should never use these, you can and should define all the styles in the CSS file(s), so where you have <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> you should have <body id="home"> (for example, if it's the home page), and then this CSS: #home {margin:0;} The whole purpose of CSS is to avoid having to use styles in the HTML, so that you can change every page on a website just by changing the CSS file, not by changing every page! How would you change the margin to 3px if you had 50 pages, and they all had the margin defined in the HTML like Dreamweaver has done it? (I'm presuming Dreamweaver did this.) I don't agree with kree8or's method above either, you shouldn't use class names which describe the style itself, i.e. don't use 'backgroundimage' for a class name, use the name of the page or part of the page you're styling. Use the name of the page for the body ids, it means you can 'get at' any part of each page to style them differently than other pages. I use this on every single site I make, to style the nav bar, so that the current page is highlighted. Look at page 243 onwards in 'CSS the missing manual', "Adding rollovers and creating "You are here" links". I use the body id to style loads of other parts of each page, by using descendant selectors.
-
Hi Leon, thanks for your quick reply! You can view Galleriffic here: http://www.twospy.com/galleriffic/example-2.html When I load all the example files on my PC, they work fine, I'm sure it's my website's CSS that's conflicting with Galleriffic, I can't think why anything else would do it. Also, the caption for each photo appears in the top left hand corner of the page! (I have only just noticed it up there, I thought it just wasn't displaying at all). These are the settings I am using for Galleriffic - I copied them from one of the examples that came with it: <script type="text/javascript"> jQuery(document).ready(function($) { // We only want these styles applied when javascript is enabled $('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, div.navigation a.pageLink').opacityrollover({ mouseOutOpacity: onmouseoutOpacity, mouseOverOpacity: 1.0, fadeSpeed: 'fast', exemptionselector: '.selected' }); // Initialize Advanced Galleriffic Gallery var gallery = $('#thumbs').galleriffic({ delay: 2500, numThumbs: 3, preloadAhead: 2, enableTopPager: false, enableBottomPager: false, imageContainerSel: '#slideshow', controlsContainerSel: '#controls', captionContainerSel: '#caption', loadingContainerSel: '#loading', renderSSControls: true, renderNavControls: true, playLinkText: 'Play Slideshow', pauseLinkText: 'Pause Slideshow', prevLinkText: '‹ Previous Photo', nextLinkText: 'Next Photo ›', nextPageLinkText: 'Next ›', prevPageLinkText: '‹ Prev', enableHistory: true, autoStart: true, syncTransitions: true, defaultTransitionDuration: 500, 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); // Update the photo index display this.$captionContainer.find('div.photo-index') .html('Photo '+ (nextIndex+1) +' of '+ this.data.length); }, onPageTransitionOut: function(callback) { this.fadeTo('fast', 0.0, callback); }, onPageTransitionIn: function() { var prevPageLink = this.find('a.prev').css('visibility', 'hidden'); var nextPageLink = this.find('a.next').css('visibility', 'hidden'); // Show appropriate next / prev page links if (this.displayedPage > 0) prevPageLink.css('visibility', 'visible'); var lastPage = this.getNumPages() - 1; if (this.displayedPage < lastPage) nextPageLink.css('visibility', 'visible'); this.fadeTo('fast', 1.0); } }); /**************** Event handlers for custom next / prev page links **********************/ gallery.find('a.prev').click(function(e) { gallery.previousPage(); e.preventDefault(); }); gallery.find('a.next').click(function(e) { gallery.nextPage(); e.preventDefault(); }); }); </script> Thanks for any help you can give.
-
Hi, I'm trying to set up a website for a friend, and have been trying to set up a slideshow using Galleriffic. I'm au fait with HTML and CSS, but I haven't learnt Javascript yet, so I'm not really sure what's going wrong, but when the slideshow changes pictures, the new picture appears below the current picture, before moving up to take its place, and it shouldn't do this. This is where I've got so far: http://www.bondwebdesign.com/mynwood/ Can anybody help? Can you also advise me on how to best go about learning the basics of Javascript, so I'll understand how the Galleriffic slideshow works? I suspect it might be some of the CSS styles that apply to the rest of the site, which are affecting the Galleriffic CSS? I use Firebug and have worked out how to stop the script from running, so I can target the 'dropped' image, when everything moves downwards during transitions, but I still can't see what's causing the problem.