j05hr

I meant how nicely done that site was. It will make you want to implement parts of it too.

Just to make your life even more difficult, have a look at this site http://www.nyxlstory.com/

I think Fuzzy is being harsh on lynda.com. Loads of tutorials online fail to show you non destructive editing and quite the opposite, without using lynda I wouldn't know about using smart filters. There is also tutorials on lighting too. I feel maybe you expect to get more than you do because you've paid for it rather than it being free but there are some great tutorials on there from some of the worlds best authors writing for them. People like Deke McClelland who writes tutorials for adobe.com.

It's called Parallax scrolling Here's a tutorial on how to do it http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/

More to the point is there not a submit button missing to send the thing?

Thanks for the replies, Niller I've been trying your solution and it was working in a standard HTML+ CSS version now trying to put it in the Wordpress version and can't seem to get it to work, any ideas what I'm doing wrong? http://pukkainvites.bulletproofwebdesign.co.uk/product-category/anniversary-invites/?orderby=price-desc Thanks Edit: I seemed to have fixed it by taking display: table out of the class container .bestSellerContainer but it's still having kittens on the homepage but maybe I'm using the wrong HTML for it I'll have a look and try to fix it. Also it seems to be adding a huge height to my heading tag when you inspect it with firebug. <h2 style="height: 1122px;">Some of Our Best Sellers!</h2> But when if I take out your JS it goes away so not sure what's causing that as it doesn't happen in your example, 2nd edit: fixed it all, thanks for the help guys.

Thanks, I've never seen that before, it looks really useful even if I can't use it on this project. It will still need display: table-cell; to align the images center so not sure if it will work or not but I'll give it a go.

I'm doing an eCommerce site for a client that sells personalised invitations. Some are vertical and some horizontal. Just to get an idea... They want the borders to be the size whether they're horizontal or vertical images. So I decided to use table-cell to display the image in the center of the border. The problem comes when the description has text on more than one line and it pushes the product underneath it down. I was going to use faux columns to make the length of every box the same no matter what but I'm struggling to figure out how that would work with table cell. If anyone has any solutions how you could put four images on the same row with a border around it and center the image that would be great cheers. Here's how my code currently looks. HTML <div class="bestSellerContainer"> <div class="bestSellerImg"><img src="images/product1.jpg"></div> <div class="description"> Minnie Mouse Birthday Invite<br/> <span class="red">Buy Now<br/>From only ??p</span> </div> </div> <div class="bestSellerContainer"> <div class="bestSellerImg"><img src="images/product2.jpg"></div> <div class="description"> Minnie Mouse Birthday Invite<br/> <span class="red">Buy Now<br/>From only ??p</span> </div> </div> <div class="bestSellerContainer"> <div class="bestSellerImg"><img src="images/product3.jpg"></div> <div class="description"> Minnie Mouse Birthday Invite<br/> <span class="red">Buy Now<br/>From only ??p</span> </div> </div> <div class="bestSellerContainer"> <div class="bestSellerImg"><img src="images/product4.jpg"></div> <div class="description"> Minnie Mouse Birthday Invite<br/> <span class="red">Buy Now<br/>From only ??p</span> </div> </div> CSS .bestSellerContainer { float: left; margin: 10px; text-align: center; font-size: 90%; display: table; } .bestSellerImg { display: table-cell; text-align: center; vertical-align: middle; width: 195px; height: 205px; border: 1px solid #bfbfbf; } .description { padding-top: 10px; width: 195px; } Thanks

The amount of orange is fine and I like the design. The only thing I would suggest is make the button in the bottom left and logo the same colour as the active nav and slider background. Not sure if it's just me but everything else matches and it looks odd having different shades of orange like that. I really like the icons around the site, did you do them yourself or get them from somewhere?

Cheers for that dap, appreciate it. I decided the best idea would be to give all the logos to them and let them decide for themselves what they like. I'll include yours and let you know what they like best.

That's exactly what I thought and said to a colleague when I saw it. I thought the eye one reminded me a bit too much of big brother. Any of these ones any better? It's difficult because they are family friends and invited me to their Christmas lunch as I do all their web work and I thought it would be nice to give them something back for inviting me. Is there any examples around online that's similar that you know of as i can't quite picture it? Here's a logo I attempted with a blur but I'm not a graphics designer. It came out looking a bit too much like Chrome

I guess you didn't have a contract stating who owned what at the end? You got paid for it though yeah? There's not a lot you can really except for chalking it down to experience and having a contract stating that you have a credit written in the footer. I do a lot of work for freelance graphic designers who don't know how to make websites so the clients are through them and they design the site so they put designed by graphic designer in the footer even though I did the code, I still put the websites in my portfolio stating what I did. You could do the same although you might not want to if they've made horrible edits.

Most likely because the text always align image to the bottom unless you specify with CSS This will probably work for you. .footer img { vertical-align:middle; }

Hi guys, I had some logos designed for a client of mine. Just wondering what your opinions are. They recruit respondents for market researches.

Verulam, did you go to Townsend?

Cool, I'm in Radlett and went to school in St Albans.

Quick question in relation to this, if I have a reference to a link in the WYSIWYG editor like an image. The links never get updated and I have to go around doing it manually. Am I doing it all wrong or is there just not a way to do that?

I agree with you both that most of the time these sites are a waste of time but you can find some decent work. I like to compare it to TK Maxx, if you look hard enough you can find something you really like for much cheaper than going to the main stores. I found someone on there who wanted a website converted from a PSD into Wordpress (he's a graphic designer) and instead of offering to pay I asked if he wanted to do some graphic design work in return for the website. Now whenever he gets a client for a website, he comes to me to convert it into a website. All you have to do is sign up and get subscribed and they send you emails of all the jobs in your niche, find a job/contact that suits your needs and make an offer that sticks out to them. Find a few freelancers who will provide you with repeat work and your sorted. It doesn't all have to be for peanuts.

Hi I'm using the Nivo slider for a website and what I want to do is move the navigation below the border. http://www.bulletproofwebdesign.co.uk/slider/ Here's the HTML for it <div id="pageBanner"> <div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div> <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </div><!-- end .pageBanner --> The problem I'm having is the CSS that controls the navigation called .nivo-controlNav isn't referenced in the HTML. It's controlled in the JS file here I think. // Add Control nav if(settings.controlNav){ vars.controlNavEl = $('<div class="nivo-controlNav"></div>'); slider.after(vars.controlNavEl); for(var i = 0; i < kids.length; i++){ if(settings.controlNavThumbs){ vars.controlNavEl.addClass('nivo-thumbs-enabled'); var child = kids.eq(i); if(!child.is('img')){ child = child.find('img:first'); } if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>'); } else { vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>'); } } //Set initial active link $('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active'); $('a', vars.controlNavEl).bind('click', function(){ if(vars.running) return false; if($(this).hasClass('active')) return false; clearInterval(timer); timer = ''; sliderImg.attr('src', vars.currentImage.attr('src')); vars.currentSlide = $(this).attr('rel') - 1; nivoRun(slider, kids, settings, 'control'); }); } Is there anyway anyone knows of how I can get nivo-controlNav to sit underneath <div id="pageBanner">? Thanks Josh

Ah cheers that's perfect, lines up perfectly.

Just put it live for you at http://www.bulletproofwebdesign.co.uk/menu/ and the images are here Really appreciate the help

Cheers for the replies, I think it has to be as images as you can't create that exact effect with CSS borders so it's not really my place to change the design. When I was doing your first solution the hover background image wasn't positioning right. <div id="nav"> <ul> <li class="nav"><a href="index.html">HOME</a></li> </ul> </div><!-- end #nav --> #nav { height:auto; width:auto; float:left; padding-top: 50px; } #nav li a { text-decoration:none; color:#000; } #nav li { display:block; width:150px; float:left; border-left: 1px solid #fff; padding-top: 20px; background: url(../images/navBorder.png) no-repeat; margin-left: 35px; } #nav li:first-child { margin-left: 0; } #nav li.nav a:hover { color: red; background: url(../images/navBorderActive.png) no-repeat; } #nav li.active a { display:block; width:150px; float:left; border-left: 1px solid #fff; padding-top: 20px; background: url(../images/navBorderActive.png) no-repeat; margin-left: 35px; } It's the a that's causing the problem #nav li.nav a:hover { color: red; background: url(../images/navBorderActive.png) no-repeat; } If I take the a out the border image hovers perfectly but then the text doesn't change colour.

I've got this website from a graphic designer to do for a clients of his. It's got this border on top of it with the active one having a slight different colour to the rest. I wouldn't mind coding it as images but it's going to be a Wordpress site so I want it done in CSS/HTML so it can be edited if needed. At the moment I have It's close but it only highlights the span at the moment, I need it to hover both the border and text together. Anyone got any ideas? Thanks Josh

These people always contact me too. "Your windows subscription has expired you need to buy a new one." "Oh, really? I don't have Windows I use Macs" Line goes dead I quite like playing on with them for ages right up until they try to ask you for your card details and then tell them you work in IT support. The scarey thing is how many people are vulnerable to these sorts of things where they think their computer will break if they don't listen to them and just do whatever they say.

I like it too. Out of interest, how comes they have you doing this with all the services they offer?