Using CSS for layout

[Craigj1303]

Hi there,

I am about to layout the homepage for a watercolour art website for my dad. When using CSS & Div's instead of tables for layout, can I put all my images, paragraphs navbars' etc on the page and then use CSS to structure the layout once it's all down on the page or is it adviseable to structure as you go?

[Lchad]

I would structure as you go. I'd start with the background, then the header, then the content areas, which might include a nav bar. Then finish with the footer or whatever design style you have in mind. When the layout is finished then my personal preference is to add in all the content.

That is how I'd do !

[Ryan Fait]

Moojoo has some excellent CSS sample layouts. If you're totally lost, these will make things a lot easier for you:

http://www.newguyinennis.com/samples/layouts/

[Craigj1303]

Thanks Guys,

Just a question on those sample layouts. If I wanted to use one of them how do I know what the rules are that make the structure look this way on the associated CSS file?

[Ryan Fait]

CSS is CSS. Review the properties and their values on http://w3schools.com/css/ and tinker with it. It's not a difficult language to understand, but using your ingenuity to get the design you want x-browser is the hard part.

[Lchad]

Right click on the layout and right click "view page info" look for the stylesheet link and copy and paste it into the url address line. If you have firefox get the Web Developer Tool and it's a snap to see anyones css.

[ScottR]

IMO, start with pencil and paper. Sketch out your page or the common areas your website will have before you dig in and start coding. I'm sure other designers/developers on here will echo the novice mistake of spending a few hours writing code only to realize that it's not what you want or like and possibly have to start over. Erasing areas on paper is much. much easier than deleting the code you've spent hours writing.

Not to mention you should then have a good idea of what divs or classes you will need to achieve the look and feel your after.

Good Luck,
Scott

[Ryan Fait]

Or use a graphic program to design the layout you want. I only use pencil and paper for smaller things like logos. I know Photoshop like the back of my hand, though, so it goes quick for me.

[Lchad]

I design like Ryan.. paper for logos, graphics program for website.

[pa007]

I use fireworks for mockups/layouts but photoshop elements is ok for that too. Saves me messing around in photoshop. I save my photoshop work for later.

Pete.

[bruno89]

i personaly use fireworks to make a quik design then improve on that design in photoshop ( i find fireworks easyer to use for that ) THEN! i sort out my code.. i used to just do it as i was going along but you can ask anyone.. those sites wernt very good ( understatment of the millenium )....enguin:

[Ryan Fait]

I've heard a lot of good things about Fireworks. I'm just comfortable in Photoshop and I don't really want to buy another expensive program.

[pa007]

That's the problem with all of these programs, the price. But once you've got them the upgrade isn't too bad, well, not compared to the full price anyway. I'm looking forward to getting CS3, I might go crazy and get the master suite.

Pete.

[Ryan Fait]

I can't wait either. I'm buying a new Mac, though, so I probably won't be able to afford it for a while

I accept donations! $50.00 minimum please

[karinne]

Same here ... I use PS to design all my sites. Rarely do I start with pen and paper.

Originally Posted by pa007

That's the problem with all of these programs, the price.

err ... yeah ... the price

[Ryan Fait]

Are you from India, Karinne? Sure sounds like it. :roll2:

[karinne]

Huh?! What do you mean?

[ScottR]

I think he was commenting on...

Originally Posted by karinne

I use PS to design all my site.

[karinne]

Hmmm ... and what's wrong with that!?

PS = Photoshop

[pa007]

What's going on? Did I miss something?

Pete.