[Atomicus]

Hi all. I'm a bit of a newb when it comes to web design. Done lots of design stuff, but when it comes to the coding side, i'm a bit out of my depth (although I can make sense of some of it). Having said that, I'm trying to help a friend with her website... the main site is fine, but she needs a front page and wants something similar to the example below;

http://bsphoto.squarespace.com/

I figure it can't be THAT complicated... can it? A handful of images in a grid layout, simple logo, and a hover over text effect when you go over each image. But i'm not sure where to start, or the best way to get it working properly. As i say, the rest of the site is already there, so it's just this front page I need to do, with the images linking to existing sections. I have Dreamweaver (part of CS4), but not really had the nerve (or need) to use it much before. Any advice would be VERY much appreciated... thanks in advance!

[Paul Millar]

Put the images in a container then let them float to the left...
Similar to like what you see on my website....

So:

#container{width:900px;}
#container img{width:290px; float:left; margin-right:10px; margin-bottom:10px;}

<div id="container">

<img src="imagelocation" />
<img src="imagelocation" />
<img src="imagelocation" />

</div>

Hope that was of some help.

[Atomicus]

Many thanks. Forgive my ignorance, but if I'm using Dreamweaver, do I simply start a blank project and and create something with the code you've provided there? If I wanted to have a space for a central logo and small navigation bar at the top, how tricky is that? And what about a simple text rollover option on the images? Sorry for all the questions!

Paul Millar, on 03 July 2009 - 05:35 AM, said:

Put the images in a container then let them float to the left...
Similar to like what you see on my website....

So:

#container{width:900px;}
#container img{width:290px; float:left; margin-right:10px; margin-bottom:10px;}

<div id="container">

<img src="imagelocation" />
<img src="imagelocation" />
<img src="imagelocation" />

</div>

Hope that was of some help.

[stickymediagroup]

Atomicus, on 03 July 2009 - 10:04 AM, said:

Many thanks. Forgive my ignorance, but if I'm using Dreamweaver, do I simply start a blank project and and create something with the code you've provided there? If I wanted to have a space for a central logo and small navigation bar at the top, how tricky is that? And what about a simple text rollover option on the images? Sorry for all the questions!

That particular site looks like its built using javascript.

I'm not sure on your levels of experience though it should all be pretty acheivable using CSS.

Dreamweaver would indeed be the best if using Dreamweaver, go to Insert, Image Objects, Rollover Image, and get all your pages sorted so you know exactly where you want to link to. Coffee colours will give you that sort of cosmopolitan feel to the site (in my opinion).

If your on Twitter then drop me a line if you need any further advice, I usually keep an eye on that most of the day! http://www.twitter.com/sticky_media

Cheers

[Atomicus]

Thanks for response. I've kind of got it working now... almost! Having some trouble with a specific thing though...

I have six images across the centre of the page, and the logo centred above that, but I am trying to have the menu options (2 of them, and which are both images) on top of each other, aligned with the last picture on the left. But I can't see how to do this? The only options are to centre or left justify. I want these menu items to always align above the edge of the left picture. Is there a way to do this?

stickymediagroup, on 03 July 2009 - 03:20 PM, said:

That particular site looks like its built using javascript.

I'm not sure on your levels of experience though it should all be pretty acheivable using CSS.

Dreamweaver would indeed be the best if using Dreamweaver, go to Insert, Image Objects, Rollover Image, and get all your pages sorted so you know exactly where you want to link to. Coffee colours will give you that sort of cosmopolitan feel to the site (in my opinion).

If your on Twitter then drop me a line if you need any further advice, I usually keep an eye on that most of the day! http://www.twitter.com/sticky_media

Cheers