Building CSS-Based Layout in Dreamweaver

[...] Geoff Blake – CSS Layouts in Dreamweaver [...]

Very nice…

great tutorial and a big help! one final question, how do you center it so the layout falls in the center of the webpage and not to the side in firefox and internet explorer?

Please, a 3 column layout.
Merry Christmas – Happy Hannukah!
Rox

Sorry. I forgot to thank you. I love your tutorials!!! I have read CSS books and still couldn’t get the positioning right, but with your tutorial I finally understood it.

However, I still have troubles positioning the nested divs, so could you please finish your tutorial?

You missed the positioning of the nav, etc., the nested divs inside the header.

Again, thank you sooo much for your tutorials!

Big mistake showing an absolute positioned layout to beginners. AP layouts are fine if you know your content is never going to grow past the 440 fixed height of the content div, but if it does then you have to reposition everything below it. You make it sound so easy to layout a basic site, but with AP you know this can get messy very fast. You should have explained this at the beginning of your tutorial in my opinion.

do you have to use CS4 to do this

new2css,
body{margin:0;padding:0;}

You can do it in cs3 just slight differences, josh.

Again, this is just one method to start getting peoples heads around how you can create a layout, its not meant for every situation, but again thats not the scope of the tutorial. Thanks for sharing.

I agree with Chris…AP is a bad place to start. The output is bound to generate frustration and there’s no quick fix once the layout is filled with content. Or is there???

To Josh – I followed along perfectly with CS3

Are there more tutorials by Mr. Blake available?

When using ap divs on any computer screen no matter the size they are the same number of pixles from the left side causing some issues can you help me to understand better the point of using css im kinda a newbie at this i usually use flash to make my websites

Wow what a help this was, thank you.

very, very good…(muy bueno, me sirvio mucho para iniciarme en dreamweaver)

Ian: centering the divs is actually quite easy, just skip the absolutely positioned stuff. and add the following CSS to each div:
clear: both; /* Keeps the elements vertical */
margin: 5px auto; /* The 5px is top and bottom, the auto centers horizontal */

I can’t see any video on this page… I have the latest QuickTime and Flash Player… Is it just me?

were is it

Nice and simple.
1260 is your page width.
990 is your Header Footer Etc.
1260 – 990 = 135
change to L (0px)on the Header Footer Etc to 135px
Great tutorial.

JB

[...] Link : View the video tutorial [...]

Thank you for this tutorial! I’m learning Dreamweaver on my own and this was an excellent explanation on how to create a layout.

you are good! Thank you.

Simple and to the point. This tutorial helped me get over my dreamweaver block a bit by just doing it. Thanks bunches!

Just got dreamweaver with the cs4 design suite, i had always been a skeptic of wysiwyg’s, but decided since i bought it i better learn to use it. First tutorial, and excellent. Very descriptive and easy to follow even without watching the screen.

This was a wonderful tutorial. Just tremendous. Could you please complete it with all the added fill-ins.

Thanks so much for what you have shown so far.

Thanks!!!

Very usefull!!!

Very useful for biginners!

I was able to follow with CS3 very easily as well! This is a great tutorial for helping the brain move in the CSS direction! Thank you thank you!

Thanks great tutorial!!!!!!!!!!
Thanks GREAT

This is an excellent tutorial for those unfamiliar with css. Great job!

Tried this with CS4 but there is no “Advanced Selector Type” so I used “ID (Applies to only one HTML element).”

My content (an swf) centers horizontally, but NOT VERTICALLY, does anyone else have this problem and is there a solution?

Thanks,
Emily

Thanks great tutorial!!!!!!!!!!

thanks! very clear and helpful.

Thanks!! I knew most of it, but it’s all what i’ve taught myself, this and another of your videos helped out A LOT!! now I can get building!!

[...] http://www.layersmagazine.com/building-css-based-layout-in-dreamweaver.html (easy Dreamweaver page in CSS) [...]

Is there any way of centering the whole page? I have done my divs separately as you did.
Thanks

So VERY VERY EASY!!!
Thanks

wow! fantastic!
hats off …………………… Geoff!

Thanks

[...] Free Adobe Dreamweaver Tutorial | CSS Tutorial for Creating Layouts in Dreamweaver | Layers Magazine – This tutorial covers the process of building a CSS-based layout from scratch using Dreamweaver. Great beginner tutorial. [...]