jpw1984

That's brilliant. Slimbox 2 is working with Nivo. Even Galleria is now working. Thanks all

I will try slimbox 2 now and see what happens.

But on other page where I don't have lightbox and I have Galleria the Galleria does not work at all. Far as am aware the Lightbox that I am using needs Scriptilous, Prototype and others. May have to check that though.

I have a Nivo Slider in my web page header across by website, and that's working fine. I have just put that code in. However, by doing that it has prevented other scripts from working. I have Galleria on a couple of pages, and on a few different ones I have Lightbox2 by Lokesh Dhakar for certain things. These were working fine before I implemented Nivo slider. I have tried in Firefox, IE and Chrome - exactly same problem. Just look at Light box for now: When I click on an image I get taken to a new page with just that image and doesn't seem like the Light box is being loaded or anything. I have tried using Firebug, but in my limited knowledge I am stumped. Website: http://bit.ly/k0FfhR If anyone can point me to my mistake I will be most grateful. Code in Header <link href="/css/mainstyle.css" rel="stylesheet" type="text/css" /> <link href="/css/lightbox.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="/scripts/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="/scripts/lightbox.js"></script> <script type="text/javascript"src="/scripts/jquery.nivo.slider.pack.js"></script> Code at end of site <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect:'fade', // Specify sets like: 'fold,fade,sliceDown' slices:19, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed:500, // Slide transition speed pauseTime:3000, // How long each slide will show startSlide:0, // Set starting Slide (0 index) directionNav:true, // Next & Prev navigation directionNavHide:true, // Only show on hover controlNav:false, // 1,2,3... navigation controlNavThumbs:false, // Use thumbnails for Control Nav controlNavThumbsFromRel:false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav:true, // Use left & right arrows pauseOnHover:true, // Stop animation while hovering manualAdvance:false, // Force manual transitions captionOpacity:0.8, // Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </script>

I have made changes to the code, but got a few more problems. 1) It works in IE9 2) Does not work in Firefox - the buttons are skewed. The buttons should be stacked on top of each other. 3) Button graphic does not show in Chrome and placement is skewed. Revised code: Still not exactly sure where things are going wrong. XHTML and CSS seem to validate. #product {margin-left: 0px;} li.boxy { list-style:none; background-color: red; width: 383px; float:left; background-color: transparent; overflow: hidden; display: block; background-image: url(../images/products/product_box_h.png); background-repeat: no-repeat; height: 186px; padding: 0; } li.boxy h3 { margin-left: 10px; font-size: 13px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFCC00; padding-top: 5px; height: 23px; display: block; } li.boxy h4 { font-size: 12px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#009966; padding-top: 5px; float: right; display: block; width: 140px; } a.btn{ float: right; color: white; font-size: 11px; font-family:Arial, Helvetica, sans-serif; width: 116px; height: 22px; padding-left: 10px; list-style: none; background-color: transparent; background-image:url(../images/products/product_button.png); background-position: bottom left; background-repeat:no-repeat; display:block; margin-right: 15px; } a.btn:hover{ color: green; background-position: top left; } #product .land_prints_h { width: 180px; height: 80px; float:left; background-color: transparent; margin-left: 15px; display: block; border: none; margin-top: 12px; } #product li.boxy p.link_enlarge { color: #666666; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 9px; width: 170px; padding: 0; height: 12px; margin-left: 14px; } #product li.boxy p.first{ color:#666666; float: right; display: block; padding: 0; width: 140px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; margin-top: 12px; } .spanclear {clear:both} <ul id="product"> <li class="boxy"> <h3>Edale Valley</h3> <a href="/images/landscape/prints/page1/prl2.jpg" rel="lightbox" title="Edale Valley"><img src="/images/products/landscape/prints/test.png" class="land_prints_h" alt="" /></a> <p class="first">Ref: PRL3<br/>Size: 21 x 13<br />Orientation: Horizantal</p> <h4>Price: £65 inc p&p</h4> <a href="/buy" class="btn">Buy Now</a> <a href="/basket" class="btn">Add to Basket</a> <p class="link_enlarge">Click Above Image to Enlarge</p> <span class="spanclear"></span> </li> </ul>

Web page: http://bit.ly/k0FfhR I have various 'product boxes' on this page. I could easily do this all in divs and be fairly straight forward, but I've read it's better to do something like this in a UL and LI format for SEO reasons. Anyway, the boxes are positioned fine and where I want so that's not a problem. I have copied each box on the page as there is no point making each box unique in content till the layout code is finalized. The problem is I want to make sure what I have done is actually correct. I'm looking at the code and for some reason looks wrong to me, but yet appears to work. Colors and font to be worked on, but just want to be sure code is correct. I am not sure about the two buttons in each box. The links work but only if you click the text directly and rather than any part of the green button. I want anypart of the green button, when pressed, to active the rollover and go to the destination. #product {margin-left: 0px;} #product li {list-style:none;background-color: red;width: 383px;float:left;background-color: transparent;overflow: hidden;border-radius: 8px;display: block;background-image: url(../images/products/product_box_h.png);background-repeat: no-repeat;height: 186px;} #product p{float: right;display: block;position: relative;width: 140px;padding: 0;margin-right: 10px;} #product h3{margin-left: 10px;font-size: 13px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:#FFCC00;padding-top: 5px;} #product h4{font-size: 13px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:#FFCC00;padding-top: 5px;float: right;display: block;position: relative;width: 140px;margin-right: 10px;} #product ul.btn {background-image:none; float:right; width: 126px; margin-right: 10px} #product li.btn {background-image: none;width: 126px;height:30px;list-style: none;background-color: transparent;background-repeat:no-repeat;height: 22px;width: 126px;background-image:url(../images/products/product_button.png);background-position: bottom left; } #product li.btn:hover {background-position: top left;} #product .land_prints_h {width: 180px;height: 80px;float:left;background-color: transparent;margin-left: 15px;display: block;margin-top: 20px;} #product p.link_enlarge {color: blue;float: left;font-family: Arial, Helvetica, sans-serif;font-size: 10px;width: auto;display: block;position: relative;margin-left: 20px;} This is one box. No point copy and pasting the other boxes as same layout. I have six of them. The size of the actual boxes are fine. It's sorting out what is inside them. <li> <h3>Edale Valley</h3> <a href="/images/landscape/prints/page1/prl2.jpg" rel="lightbox" title="Edale Valley"><img src="/images/products/landscape/prints/test.png" class="land_prints_h" alt="" /></a> <p>Ref: PRL3<br/>Size: 21 x 13<br />Orientation: Horizantal</p> <h4>Price: £65 inc p&p</h4> <ul class="btn"> <li class="btn"><a href="/buy">Buy Now</a></li> <li class="btn"><a href="/basket">Add to Basket</a></li> </ul> <p class="link_enlarge">Click Above Image to Enlarge</p> </li> Many thanks.

Started doing my site again, and need to change fonts, but the layout is breaking. I have a sticky footer code and have gone with faux columns style layout. I have used a 1px horizontal graphic in a div to be the background content of the 'content wrapper inner'. The aim of this is to repeat straight down to the footer. However, there is a gap better above the footer. You can't see the footer (as I've not coded it fully - just the basic positioning), but it is there and appears to be sticking at the bottom. Also, in conjunction with this, the 'content' div is protruding out of the 'content wrapper inner div' as a result of adding a secondary class 'content box'.If I remove the second content box the site looks fine. Anyone tell me what I am doing wrong or have missed. Many thanks. Okay, I hav added overflow:hidden and height: auto to fix this, but that totally destroys the div in Dreamweaver. Is there anything in existing code that doesn't look right or out of place? Whilst Dreamweaver is not that important I don't see why the problem is arising. Okay, in dreamweaver 'content wrapper inner' is being very weird. If I have height: 900px, the layout is fine. However, that's not proper so I should use 'auto' instead? Seems now to work in sites I have tried this in with 'auto'. However, the div disapear totally in Dreamweaver if I have height: auto selected on this div. *edit* I've added a clear so I think I've now fixed this. Just need to check on previous version of IE and others.

I've been trawling though this site and Google looking for a solution to my photography website ( at moment it's under construction and all images are rough). Even though the site I have is a mock site and I will redesign it soon the principle of my site will remain the same. I have knowledge of HTML and CSS, but not so much PHP and nor have I built a database driven website. Closest thing I've done is implement contact code form from tectite or someone on to a contact page. My site (product example page): http://bit.ly/lNLkwF Website is hosted with TSOHost with Cpanel. I hope somebody on here can give me a few pointers in right direction. I have already learnt quite a bit reading posts on here and realized a few things that I had not taken into account earlier regarding E-commerce implementation. What ever solution I end up with I want to be able to create the 'skin' for it in the design I want as well as incorporating things like Galleria or Nivo slider etc. In the end I will perhaps have maximum of 100 products and that's being optimistic. I have looked at cube-cart, os-commerce and had a quick look at Pay Pal. Pay Pal would fit straight into my site, but I get the impression it looks tacky. Maybe someone can convince me otherwise. 1) E-Commerce solution must be able to generate invoice in PDF format or other format, and perhaps email it to customer. If not it can be printed and put in with the order. Notifications of order(s) of course need to be emailed to myself. 2) Most importantly it has to fit the style and look of my website. 3) I am not interested in fancy widgets or analysis tools. 4) I would like there to be something in the header that says 'Cart and number of products with a cart icon which is a short cut to the cart page'. 5) Not interested in product search system. 6) At the moment I have a 'buy now' button for each product, but I would perhaps like to have with that an 'add to cart' button and / or a drop down menu to select different sized prints. 7) Prefer the solution to be free. Finally, about receive payment. Obviously, I have no merchant account with anyone and I am not a registered business. I am just making a site should I go down that route. How does payment work with ecommerce software like open cart, magneto, zen cart as in do I enter my bank/merchant details into the software and any payments go direct to my bank / account? Or is it a bit like paypal setup where the user is taken to their actual site and servers and payment is taken that way and put into a registered account so to speak? Many thanks for time

I have my photography site: http://bit.ly/jZ2wqD At the moment it's a mock site if I had a photography business. I do photography as a hobby and I'd like to be a photographer. Images need fine tuning etc etc. However, I like the general idea of layout. I have done the 'home' page and 'landscape' page. The 'architecture' page will be a clone of the 'landscape' section once that is completed. I do need to work on the nav bar and a couple of more things too. The text is to be ignored as I've just wrote stuff to fill the pages, and maybe change the theme colour from red to something blur, green or something. Not to sure if red is 'right'. My main issue is the portfolio section on my website. At the moment I have a sidebar and some content with the portfolio at bottom in a galleria slideshow. The thumbnails are a bit small, but if I stay with that idea I will attempt to make the bigger. Every time I look at the page it feels and looks wrong to me. If I was to go with Galleria style I have the portfolio at the bottom of the page at the moment, but of course above the footer. Is it worth getting rid of the top two sections of content above that and just have a Gallieria style slideshow portfolio at the top of that page section, and put the content below the the galleria container, and also get rid totally of the sidebar - just have that for other subsections. I notice a lot of portfolio pages just have imagery and not much about the photographer wittering on about stuff. or If I don't go with Galleria Should I get rid of Galleria idea and have a sort of gallery like this where you have a list or block if images with a Light box script implemented?: http://bit.ly/mIHu3T It could be themed similar to my other sub-sites of 'cards' 'prints' etc in which I have images in banks of three going down the page a bit. I probably would not want to use pagination for a portfolio section. I would probably do it slightly different to my other sub pages and have. This way it keeps the style of the site somewhat flowing. Thoughts? Many thanks.

Confirmed. Working on one calendar - just need to do the rest. Absolutely brilliant and thanks for help

WOW thank you for the fast and helpful replies. I shall have my lunch and give all this a go and see what happens. Very useful if this works.

In another thread on here I've been looking to a solution for a design issue I have. I've been alerted to the fact, by a user on here, that a soloution is by using Lightbox. I already have Lightbox 2 implemented, but I need to go a little further with it, so thought it would be more relevant to ask the question in here. Here goes. I have 6 calendar products on my page. I want the user to be able to click on them and view all 12 months of that calendar. At the moment the Lightbox only brings up one image from each calendar and that's intentional at the moment. However, I want the user to browse through the calendar, but not have the other 11 months of each calendar on the main page. How is this possible in Lightbox 2? My Site I don't really want to change the layout of the page - I am happy with it, but I just want the user to click each calendar and then via Lightbox is able to browse other 11 months of selected calendar - but I do not want the 11 months on each calendar to be visible on the actual page - above link. Thanks for any help.

Okay, I have a website that I am making myself. A lot needs tweaking, text and image changing etc, but I am having ideas as I go along and improving as I go along. Basically my site is a mock photography site for myself should my hobby ever get off the ground, and I am at the minute thinking about the calendar section of the website in which calendar products are sold. I am happy with the direction it is taking. I am working on the landscape section at the moment. I have implemented Lightbox plugin which brings up a bigger (slightly) version of what is on the main calendar section if clicked. For now, that's fine. The sizing is not so much an issue at the moment of the 'larger' version. I'd still like the main calendar page to have the same format. 2 rows and 3 columns - then use pagination if needed like in the prints section. I am thinking that I'd like the user to be able to view all 12 months of a specific calendar, but I'd like to restrict the calendar page and all pages to have 6 product items per page.However, I need to know the best ways to introduce such a thing for 6 individual calendars on this page. I was thinking Nivo Slider, Galleria (that is in portfolio section of my site), but not sure. Of course the images would still be the same size as they are now. So they're not massive. But what if the user clicked on each calendar and brought up a pop up screen, say 500px x 500px for example? That had like a nivo / galleria style to it where the user has two arrows and some thumbnails to click and view all 12 screens of that calendar? Or is there another idea / solution etc. If I went that route I'd have to create a small pop XHTML page with a slider built in but maybe that's the best option. Create one XHTML page pop up per calendar? The light-box thing is fantastic, at the moment, and of course you can put images in a 'set' however seems you have to have those images ALL on the main calendar page for it to work - so I would have 6 calendars x 12 months per year = 72 smallish image, and I'd rather avoid that amount per page. - I don't think I'd want that and nor would it suit my layout unless they could be hidden or the script worked differently. I hope what I made some sense and appreciate a nudge in the right direction, thanks. So basically, I want to keep the general format of the page the same, but allow the user to view calendar a bit bigger and all months of the year too. My Site

Buy her some oven mits? Seriously, just go down to a shop and get some wine - problem sorted.

I can understand it if was along the lines of 'This website is best used with browsers above IE8, FF3.5, Opera 10'.

Looks clean to me and well laid out inviting the user to read. Like the suttle shadow under the images too.

I don't use it. I use my @live address or my own domain name for email. Infact I use @live / hotmail for most of my email, so no point with Facebook. Plus I'd trust Microsoft more than Facebook for some reason.

I've ripped up my forms. Both systems have pros and cons.

I voted Firefox. Used it for at least 5 years now as my main browser and like how it can be customized. Just can't stand Opera for some reason, and Chrome is nice visually, but something I don't like about it. IE is catching up, but sites look better in other browsers, in my view. Thankfully, gone are the days of websites not working with Firefox and sites looking horrid in IE6 ( they still do, but it's not the main browser of choice anymore). Generally all browsers mentioned are very good in terms of the latest versions and that can only be good for web design.

I would venture to a couple of stores and check some out visually at least too.

Thank you very much. Works a treat

I have a problem with setting background colour / size for some links. I have the below links in a container div, and everything nearly works. For example, normal state the background is a grey colour, at the moment, that extends to the container box horizantally. However, for 'hover' or 'selected' states the background colour only changes behind the text and doesn't expand like the normal state 'li' grey colour. How can I expand the background area to be filled in with background color? I've tied setting a height and width and that does not seem to work. <h2>Landscape Products</h2> <ul class="right_links"> <li><a href="/landscape/portfolio">Landscape Portfolio</a></li> <li><a href="/landscape/prints" >Print Sales</a></li> <li><a href="/landscape/cards"class="selected">Greeting Card Sales</a></li> <li><a href="/landscape/cards">Canvas Prints</a></li> <li><a href="/landscape/cards">Calendars</a></li> <li><a href="/landscape/cards">Jigsaws</a></li> <li><a href="/landscape/cards">Mousemats</a></li> </ul> <h2>Archictecture Products</h2> <ul class="right_links"> <li><a href="/landscape/portfolio">Landscape Portfolio</a></li> <li><a href="/landscape/prints">Print Sales</a></li> <li><a href="/landscape/cards">Print Sales</a></li> <li><a href="/landscape/cards">Greeting Card Sales</a></li> <li><a href="/landscape/cards">Canvas Prints</a></li> <li><a href="/landscape/cards">Calendars</a></li> <li><a href="/landscape/cards">Jigsaws</a></li> <li><a href="/landscape/cards">Mousemats</a></li> </ul> .right_links {margin-left: 0px;} .right_links li { list-style: none; padding-bottom: 5px; width: 170px; height: 24px; padding_top: 10px; background-color: grey; padding-left: 30px; } .right_links a{font-size: 12px; color: #970404; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-style:normal;width: 170px; height: 24px;} .right_links a:hover {color: black; background-color: red;width: 170px; height: 24px;} .right_links a:active {background-color:#00CC33; color: yellow;width: 170px; height: 24px;} .right_links a.selected { background-color:#FFFF00; color: #FF0000; width: 170px; height: 24px; font-weight: bold; }

I do have padding.

I have setup a pagination system for a few pages on my site using some tutorials on the net. I have changed the colours in the CSS and that's all working and it's pretty much working on each page. However, I can't position it where I want and it's stuck to the left side of the container divs. I try using margin-left to adjust the position and that's not moving it at all. .pagination ul{border:0; margin-left:500px; padding:0;} .pagination li{ border:0; margin:0; padding:0; font-size:12px; list-style:none; font-family:Arial, Helvetica, sans-serif; color:#99FF00; font-weight: bold; } .pagination a{ margin-right:2px; } .pagination .previous-off, .pagination .next-off { color: #999999; display:block; float:left; padding:3px 4px; } .pagination .next a, .pagination .previous a { color: #333333; } .pagination .active{ color:red; display:block; float:left; padding:4px 6px; } .pagination a:link, .pagination a:visited { color:#333333; display:block; float:left; padding:3px 6px; text-decoration:none; } .pagination a:hover{ background-color: white; border: solid 1px; border-color: #990000; } <ul class="pagination"> <li class="previous"><a href="/landscape/prints">«Previous</a></li> <li><a href="/landscape/prints">1</a></li> <li class="active">2</li> <li><a href="/landscape/prints_3">3</a></li> <li class="next"><a href="/landscape/prints_3">Next »</a></li> </ul>

Okay, I think I've fixed it. However, I need to separate the two class divs that are stacked without using 'margin-bottom: 15px' for example. Is this possible? It's advised, as far as I know, to not use margin top or bottom as that can cause problems with the css sticky footer. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home Page</title> <link href="/css/main.css" rel="stylesheet" type="text/css" /> <!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> <![endif]--> </head> <body> <div id="wrap"> <div id="header">Header</div> <div id="pri_nav">Pri Nav</div> <div id="sub_nav">Sub Nav</div> <div id="content_wrapper">Content <div id="content_central"> <div id="left_side_bar"> <div class="left_info"> <p>Left Info Upper</p> </div> <!-- End left_info class div --> <div class="left_info"> <p>Left Info lower</p> </div><!-- End left_info class div --> </div><!-- End Left side bar --> <div id="right_side_bar"> <p>Side bar</p> </div><!-- End of side-bar div --> <div class="clear"></div> </div><!-- end of content_central div --> </div><!-- End of content_wrapper div --> </div><!-- End of wrap div --> <div id="footer">Footer Here</div> </body> </html> [code] @charset "utf-8"; /* CSS Document */ * {margin:0;padding:0;} html, body {height: 100%;} .clear {clear:both} #wrap {min-height: 100%; width: 100%; background-color: #f8f8f8;} #header{width: 100%; background-color: red; height: 500px;} #pri_nav{width: 100%; background-color: blue; height: 100px;} #sub_nav {width100%; background-color: green; height: 50px;} #content_wrapper {overflow:auto; padding-bottom: 150px;} /* must be same height as the footer */ #content_central {width: 900px; margin: 0 auto; background-color: yellow; padding: 15px;} #left_side_bar {width: 600px; float:left; padding: 15px;} .left_info { width: 570px; float:left; height: 350px; padding: 15px; } #right_side_bar { width: 210px; float:right; height: 300px; padding: 15px; } #footer {position: relative; margin-top: -150px; /* negative value of footer height */height: 150px;clear:both;} /*Opera Fix*/ body:before {/* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/ } [/code]