CSS - I just don't "see" it yet

HTML & CSS
1

First about me, I’m a designer with 10 years of experience in print and I’ve built lightweight, simple and static websites using Ps slices into Dw then applying very basic CSS rules for centering and text elements.

That totally bores me now. (and yes I always worked in spilt-view and wasn’t afraid to get my hands dirty with code tweaking)

Now I understand the simplicity and beauty of CSS and it’s time to put on my “big-girl” pants. :lol:

ok, so I’ve been through the Dw CS3 CSS tutorials on lynda and understand the box model and all the intermediate basics. I also have very good grasp of things due to Style Master and the tutorials that are provided online - again, I just don’t get positioning.

I see the layout I want in my minds eye - I just wish I could drag and drop elements - yes and I know coding by hand (or with a little help - like Style Master) is preferred to Dw.

Is there any tutorial that helps visually “illustrate” this? Absolute positioning, this many pixels from the top and left etc… I just don’t get it.

I really do get the benefits of CSS and understand it sans how to get my layout elements to sit where I want.

thanks to you all - and if I can assist with Ps Ai or Id, let me know it’s my speciality!
:smiley:

2

Hi Anna,

I would advise against trying to use the position property for laying out your page; for the time being, at least. It may seem the more intuitive process, much like a print publication’s use of the paste up board. But, the web is not print, and what works as expected in one medium does not necessarilly translate well to another. Print is static and non-interactive. HTML, by its very nature, is dynamic and interactive. You have no control over the final view. Once you are more accomplished in document markup and presentation, you will be more able to deal with positioned elements’ big-toothed gotchas.

For now, read and experiment with the following:

An introductory article with good instruction

Change the specifications, and compare the css output
http://csscreator.com/version2/pagelayout.php

Work through the tutorials in the order given
http://htmldog.com/

And, of course, Sitepoint its own self for articles and discussion. Use the search function liberally.

cheers,

gary

3

Work through the tutorials in the order given

on it - thanks!

4

If you were / are a print designer, the following may be useful:

It explains some CSS principles in how you would probably approach them. :slight_smile:

5

Check out Doug Bowman on CSS layouts (youtube). It’s 1 1/4 hours long but well worth watching how he creates styling for a “typical” site, with an emphasis on positioning with floats.

6

Thank you both VERY much!

XO :slight_smile:

7

This tutorial is short but it visualizes each different option.
It’s short but it will let you “see” it :smiley: