I'm a CSS beginner just trying to get to grips with Dreamweaver CS4.

I used a Lynda.com video - "CSS for Designers - Creating Grids" to make a very neat grid of 6 small photos - the html is just the list and the CSS makes it into a grid. Very neat.

HTML EG:

<li id="two"><a href "#">Terrace</a></li>
<li id="three"><a href "#">Kitchen</a></li>
<li id="four"><a href "#">Bedroom 1</a></li>

 

CSS EG:

li#six {
background-repeat: no-repeat;
background-position: 50% 10px;
padding-top: 130px;
background-image: url(../images/flat1/thumbf1bath.jpg);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333;
}
li a {
display: block;
text-align: center;
}

 

But I didn't think ahead - now I need to find a way of click on the items go to a bigger image. When my webpage used tables I used Lightbox for this but now the small images are actually background images and I can't see a way to do it.

Can anyone help?

Also - minor problem but annoying - I styled li a as display:block which should have made the image clickable but it doesn't. Anyone know why - have a solution??

Many thanks for any help you can give.

Edited April 10, 201016 yr by Sam G
added [code] tags

You can use lightbox code would be something like

 

<li><a href="link to large image"><img src="link to small image" width="" height="" alt=""></a></li>

 

and remove your bg image from css li

Edited April 10, 201016 yr by Sam G
added [code] tags

Using the background element to display product images isn't a very good idea anyway as you're going to mess up accessibility and SEO.

Sorry but what's SEO?

I don't think it would mess up accessibility as the item has a text label ...

But I am beginning to think there's no way to link these css'd list items to a bigger version of the image. So does that mean it's back to a table? Seems wrong somehow.

Sorry but what's SEO?

I don't think it would mess up accessibility as the item has a text label ...

But I am beginning to think there's no way to link these css'd list items to a bigger version of the image. So does that mean it's back to a table? Seems wrong somehow.

Of course you can link the small images to the larger images, but use HTML for this not CSS - mteam showed you the code ^^ a few posts back.

 

In general CSS should be used to style your content, not to be your content. If you're using CSS to pull in product images, then I'd say you're misunderstanding its function.

 

Hope that helps

Of course you can link the small images to the larger images, but use HTML for this not CSS - mteam showed you the code ^^ a few posts back.

 

In general CSS should be used to style your content, not to be your content. If you're using CSS to pull in product images, then I'd say you're misunderstanding its function.

 

Hope that helps

 

Thanks for replying but it doesn't actually help!I have used Lightbox before with a table based site but I want if possible to avoid tables now. So the question is - is it necessary to use a table?

I followed a detailed tutorial from Lynda.com (by Andy Clarke who is a member of the Web Standards Project. http://www.stuffandnonsense.co.uk.) on making a grid with css styling of a list. It is elegant and looks fine. It avoids using a table to layout images which I thought was not approved of! But maybe it's not then possible to link to larger images.

The images on this page are done using a list,css and lightbox

The images on this page are done using a list,css and lightbox

 

Wow that's very interesting thank you.

Now I'll just have to work out how to do it ...