scaz182

Centred text -- what? is this a poem, a menu!?

Try display:inline-block; -- best of both worlds! and float the ul not the list elements. Oh and if you need to support IE6 and 7 then you'll need to add: li { display:inline; zoom:1; } as they don't support 'inline-block' on elements with a natural display of block.

You'd just set the height to auto.

Thanks mteam, that works a treat, in fact it doesn't even require overflow:hidden; as the margin is obviously transparent so doesn't need to be clipped. Cheers

Just wanted to bump this up to see if anyone knows of the best way to do this?

a lot

If you have the checkboxes on multiple pages it'd prob be best to write something server side for that: Maybe: if ($_POST['material'] == 'Acrylic') { echo 'check box based on arcylic'; } elseif ($_POST['material'] == 'Block Mounted') { echo 'check box based on block mounted'; } etc. etc.

Also I just noticed a mistake: the word-spacing property would need to be 11px -- presumably it adds on those pixels to the default spacing?

Hi all, I haven't been around here for a while! I wonder if there's any CSS experts out there that would be able to help me with the following: I've got a bunch of images which, semantically, should be marked up as a list: <ul> <li><a href=""><img src="image-1.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-2.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-3.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-4.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-5.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-6.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-7.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-8.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-9.gif" width="100" height="100"/></a></li> </ul> They are to be displayed within a column with a width of 330px: <div id="main-content" style="width:330px;"> <ul> <li><a href=""><img src="image-1.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-2.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-3.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-4.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-5.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-6.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-7.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-8.gif" width="100" height="100"/></a></li> <li><a href=""><img src="image-9.gif" width="100" height="100"/></a></li> </ul> </div> I want to display these images in a 3x3 grid with 15px spacing between each image but flush to each side of the containing div. I initially went with the following: #main-content li { float:left; margin:0 15px 15px 0; } This of course gives every list element a right margin of 15px which means the items do not fit within the containing div -- totalImageWidths (100*3) + totalMarginWidths (15*3) == 345px which is too wide, so basically I don't want the right margin on every third element. As these are being dynamically generated and I don't want to litter my markup with classes I can't remove the margin from every third element. I then tried the following: #main-content li { display:inline; word-spacing:15px; } #main-content img { margin:0 0 15px; } This works nicely in Firefox but fundamentally Webkit doesn't appear to support word-spacing on elements other than text! It would be good to hear how you guys would achieve this? Cheers Rich

Thanks for your response, I in fact want the slide effect, it is the 'bob' that occurs when you switch from section to section that is the issue; the entire height of the #accordian div slightly expands then contracts which I don't want to occur. The reason I've made my own accordion script is just because I'm currently learning jQuery so I'm trying out various ideas regardless of plugins for now. Also thanks for the tip about linking to jQuery through google APIs, I never thought about that, it's a good idea!

It's nice but not exactly original... GameSpot?

Anyone?

Yeah that's what I mean; being a Photoshop user means I haven't been able to use PNG-8 semi transparent images. Has anyone got a live site that uses Fireworks semi-transparent PNG-8 images as I wouldn't mind checking out the quality in a modern browser and IE6, I don't own Fireworks so can't test it out for myself?

Being a longtime user of Photoshop I've still never got round to using PNG-8 semi-transparent images, how do they compare with PNG-24, you still get ugly edges in IE6 don't you?

I've come accross this problem before, I ended up switching the PNGs out for GIFs but I'd be intertested if there was a fix for this as well.

mmm I don't quite understand what you're trying to acheive, this might help you fade items in and out though: $(document).ready(function() { $('a#hide').click(function() { $('div#textBox').fadeOut(); }); $('a#show').click(function() { $('div#textBox').fadeIn(); }); }); <div id="textBox"> Some text to be hidden </div> <a href="#" id="hide">Hide</a> <a href="#" id="show">Show</a>

Hi people, I've only very recently started working with jQuery and wonder whether anyone knows of a way to stop the bobbing effect that occurs on my accordion. It can be seen here: http://www.richardscarrott.co.uk/accordian/ When you click from one title to another the entire height increases as the new div expands and the old one contracts causing it to bob up and down. This is my code: $(document).ready(function() { $('#accordian div').hide(); $('#accordian div:eq(0)').show().prev('h1').addClass('sel'); $('#accordian').click(function(event) { var $header = $(event.target); if ($header.is('h1') && !$header.hasClass('sel')) { $header.next('div').slideToggle('fast').siblings('div').slideUp('fast'); $header.siblings('h1').removeClass('sel'); $header.addClass('sel'); } }); }); I wonder if anyone can help? Cheers Rich

I was just eyeing that book up actually, I think I might check it out tomorrow.

This book is very good, gives good examples that can easily be used and adapted in real web projects.

Can anyone recommend a good book on JQuery for someone with limited experience of JavaScript? I have used the quick start guides in the past so was thinking of going with this one but thought I'd ask here in case someone knows of a better book?

Yeah I've already signed up to that! I think premium members are able to send a certain number of invites to non-members which I'd hoped somone would have spare! I think it was around the time they released their iPhone and Android apps which I think have increased usage which they currently can't cope with!

Yeah you could until very recently where unfortunately you must have an invite from a premium account holder, so I'm scouring the internet for a code which hasn’t been used!

Hi all, I'm a bit of late comer to the whole spotify music service and have missed the opportunity to sign up for free, or at least without an invite. I wondered if anyone has an invite code they could offer me? Cheers Rich.

It looks although you have some resolution issues with your graphics, it looks although you used raster images which obviously don't scale well and spoil an otherwise fun creative design. Your HTML version looks more professional in my opinion! But the lack of job interviews might also be related to the old recession malarky! Also writing in first person as oppose to third might make your site more personal, just my opinion though.

Cheers for your comments, I'm still thinking about how I can spice it up a little, trouble is I don't want to destroy the simplicity of the design by adding arbitrary graphics, but as you say some texture might be appropriate. I've included a project slideshow on the homepage and wonder if it helps the site or not?