"Thanks for the tutorials on CSS and Dreamweaver! They are by far the easiest tutorials to follow and understand! What's more, I didn't nod off like I do with other company's videos! Thanks for a fun learning session!" -Nick [ read more... ]
Ten Ton Online

Creatin’ CSS Layout in Dreamweaver, Part Three!

Havin’ a tough time with CSS layouts in Dreamweaver? Check out this Ten Ton video series by Geoff Blake, which tackles the issue of centering a CSS layout. In this tutorial, on how to create layouts in Dreamweaver that make use of absoute positioning and CSS. Enjoy the training!

Help spread the tell the world!
Take a tour of Ten Ton Online!Get a free trial account!Subscribe now!
  • Ateeq

    Hey thanks for the training really i impressed :) Thanks Alot 

  • Bacongirl27

    Seriously you are a life saver!!! I love how you explain things. I love the fact that you are playing background music for us ADD-ers. I have completed so may tutorials and yours is the one that makes sense to me. Thanks for posting this for free! I hope you reap what you have sowed!! 

    Thanks!

    Lisa

  • Bacongirl?! My kinda girl! :) Thanks so much for swinging on by and leaving a comment, Lisa! Great to hear you enjoyed! -Geoff

  • Jared

    Hey Geoff,

    Thanks so much for these videos... I think I've learned more in the last hour than I have in the previous... well... EVER! The tutorials are so easy to follow, and, coming "back" to Web Design after specializing in print for such a long time, your references to print design have been incredibly helpful...

    Thanks again!

    Jared

  • Thanks Jared! Awesome to hear you're learning and enjoying so much. I remember many moons ago making that leap from print to web, and I needed those references myself..."A ___ in this world is called a ___ in that world." Same thing, just different language. Anyway, thanks for stopping by! -Geoff

  • CMWHYCKay

    The tutorial was a great help. You explain very well and sound conversational instead of dry. Smart and talented. Thanks.

  • Glad you enjoyed the tutorial, thanks for the comment! ~Geoff

  • Jimfilippi

    Thanks for the great tutorial...everything works great except the 2 pixel gap at the top...I've tested in safari and firefox...any help out there?

  • Jimfilippi

    I know others have had this problem...the gap also shows up in the tutorial...the answer was to put a -pixel amount in the top margin rather than 0...in my case -2 pixels.

  • You got it, Jim! Glad you got it figured out. I should mention here Jim and for others that these "absolute" CSS layouts are an older way to lay out pages. A much easier and more modern approach is to use floats instead. You can find out more about this here: http://www.tentonbooks.com/ten...

    Hope this helps!

    Geoff

  • Jimfilippi

    Since I posted the -pixel reply I discovered a way to remove the gap a "purist" might like better, and that is to put Opx for the body tag in the css

    body {
    margin: 0px;
    }

    Thanks for the tutorial Geoff it got me started relatively painlessly. I have since discovered floats as the preferable way to go.

    Jim

  • Hey Jim, Nicely done! Yeah, floats are a much better way to go. In fact, lately I've been doing a lot of quick "mock ups" all hand coding floats from scratch...no Photoshop, Illustrator, or Dreamweaver! Just straight code and browser previewing...Fast clean 'n simple! Cheers! -Geoff

  • Andrew

    Probably the only video tutorial I've actually watched 'til the end for a couple years. Extremely helpful, thanks for uploading it!

  • Lau1304

    The most enjoyable tutorial by far! Thank you very much! Laura.

  • Thanks for the kind words, Laura! Hope you learned lots!

  • gwhiz

    i noticed that the entire page shrinks from it's original size after i did this . is it possible to still center the website without shrinking all the images and text?

  • Thanks for your comment. You can control the width of the content area by adjusting the widths set on the CSS Rules that control the div containers. Does that make sense? ~Geoff

  • Mmoranwilson

    Hey there Geoff,
    I really find your tutorials so easy to follow, I have just started into web design and found it all quite daunting but after following a couple of your tutorials I feel much more confident.
    Thanks a mill
    Marianne (Ireland)

  • Hi Marianne,

    My family's from Ireland! We must be kindred spirits! :) Great to hear you enjoyed the tutorials, and I'm glad I could help make it all less daunting...it is a bit freaky when starting out. I remember looking at web design and thinking, "I should really do something else...like become a farmer or something!" Thanks for your comment!

    Geoff

  • Richardweb

    brilliant vids very helpfull i come back time and time again for reference,just wondering when i create my master t leaves about a 2 pixel gap at the top,not sure if i've done something wrong any help please

  • Thanks for the kind words, Richard. Regarding your 2px gap, I'd have to see your page to see if it's something you've done, or if it's your browser causing that. Have you tested the page in other browsers?

    Cheers,

    Geoff

  • Omar Ali Khan

    Hi Nice Tutorial. I wanna know is using AP Div Tags bad in web designing because i rarely see anyone css templates with ap div tags. One more thing the content region is given a fixed height and width which does not expand accordingly which makes it really tough to manage. how can i come over that?

  • Thanks for the comment. I wouldn't necessarily say it's "bad" to use AP divs, but it is an older method (these tutorials are getting a bit dusty!) More and more designers are switching over to floats -- something I've been meaning to create a few tutorials on. Floats are much simpler and easier to handle, and you don't run into the fixed-height issue.

    Geoff

  • Gerald

    Boy! I really REALLY wanted this to work... but it still justifies everything FLUSHED RIGHT! I followed every step (I have CS4) so there was one step where you say tick "advanced" but it says "Compound" but it appears to be the same, just reworded (thanks Dreamweaver). What am I doing wrong! Really need your help. I'm building the site completely using DIV's and they won't stay centered. Looks fine on my high res monitor but when I open in small laptop, it stays flushed Right with no scrolling. HELP!!

  • Okay Gerald, we'll get this happening for you. So, how do you mean "flushed right?" As in, the div's are all flush right, or the content in the div's is right aligned? Email me what you have if you like and I'll take a looky (geoff "at" tentonbooks.com)

    Hang in there, help is on the way!!!

    Geoff

  • tonyclarkson

    Just watched all three CSS layout in Dreamweaver tutorials. Excellent, found them easy to follow and very informative. CSS layout doesn't seem anywhere near as daunting as it did and hour ago.
    Looking out for the next one.

  • Hey Tony!

    Very awesome comment, thanks! Awesome to hear that CSS layout seems less daunting now. Admittedly, these tutorials are a bit dusty, so stay tuned for some updated tutorials soon!

    Cheers,

    Geoff

blog comments powered by Disqus