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?
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.
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.
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???
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
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 */
Charles Lindauer
(Reply)on Thursday December 18, 2008
I can’t see any video on this page… I have the latest QuickTime and Flash Player… Is it just me?
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.
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.
Hello;this is wrong information!!
When this site is seen on a different size screen,the layout will move to the right.
You may never use position:absolute.
Very bad!!
I have to agree with Chris and the others….I don’t mean to come across negative, but using the “Draw AP Div” tool is a really disruptive way of creating CSS layouts. Absolute positioning is something you want to use sparingly, not for every DIV. When you do apply AP to every DIV, you run into problems.
I appreciate the time this author took to create this layout, but I think there are better ways of handling this.
I prefer working solely in CODE view and forget doing CSS in Design view. You learn more in Code view!
[...] 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
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!!
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
Hello;this is wrong information!!
When this site is seen on a different size screen,the layout will move to the right.
You may never use position:absolute.
Very bad!!
I have to agree with Chris and the others….I don’t mean to come across negative, but using the “Draw AP Div” tool is a really disruptive way of creating CSS layouts. Absolute positioning is something you want to use sparingly, not for every DIV. When you do apply AP to every DIV, you run into problems.
I appreciate the time this author took to create this layout, but I think there are better ways of handling this.
I prefer working solely in CODE view and forget doing CSS in Design view. You learn more in Code view!
Thanks,
Rob
testing comments again
Interesting tutorial!
You can have a look as well at Flexi CSS Layouts – a Dreamweaver Extension that help you create Css layouts in Dreamweaver without coding.