Creatin' CSS Layouts In Dreamweaver, Part 3

[WhiteMotionOfficial]

Very useful, thanks!

[TheRealWazair]

Thanks for a great job on these tutorials!

[MasterPatch]

I have been wanting to know how to do exactly this for ages. I could never get the simple help I needed.

Thanks to you, I now totally get it. Great tutorial, very easy to listen to, a true pleasure.

[wayneroxify]

@wayneroxify: Excellent work Geoff, good narrative and presentation, great delivery and good pointers that were easy to follow. You've been a great help in tackling the mystery of CSS and Divs.

[TenTonBooks]

@wayneroxify Thanks for the kind words, wayner! I just try to keep it light, fun, and informative. Be sure to check out tentonbooks(dot)com -- there's lots of great stuff there too! -Geoff

[bzvaneli1]

You created The best tutorials. Thank You

David



[TenTonBooks]

@bzvaneli1 Thanks man! Glad you enjoyed. Lots more over at tentonbooks(dot)com -Geoff

[TenTonBooks]

@bzvaneli1 Thanks man! Glad you enjoyed. Lots more over at tentonbooks(dot)com -Geoff

[graemejmuir]

Great video, you made it so easy to do a basic layout in less than thirty minutes!!!

[gwhizness]

thank you!!! got it!!!!!

[chaopao07]

Thank you very much for your kind and professional help. Awesome how you guide through that unknown field (css) for me, to see it now they way I wanted to understand it a long time ago You're a great teacher! Have a good time

[TenTonBooks]

@chaopao07: Thanks for the comment! Great to hear you enjoyed! -Geoff

[WebKingsTutorials]

lol this is just for beginners,and i can make a beeettttter one,if i want in 1!!!!!PART!!!!

[TenTonBooks]

@WebKingsTutorials: That's a lot of talking for someone who has yet to upload a single tut to YouTube. When you find the time, make sure to post a video response...I might even hire you to do a full-length DVD if you don't suck.

[franksr727]

Thanks Geoff for the excellent tutorials. By the way, the Advanced Selector is now the ID selection in CS4. Thanks for emailing back right away with that update. Since most web authories are now suggesting not to use tables, this was very helpful. Thanks Again.

[TenTonBooks]

@franksr727 Hey Frank! Great to hear it worked out for you. And yes, for anyone else running CS4, when you go to create your new CSS rules, it's now called ID, not Advanced. Thanks for the comment! Cheers, -Geoff

[dibiguous]

Thanx bro. big help

[patji]

Geoff, you are a sweet darling...thank you so much for this great tutorial. It was a huge help. Have been avoiding this box positioning forever. Am using CS3 so this was really really great to learn. Thanks so much for taking your time and creativity to explain..Kudo to you dear one.

[TenTonBooks]

@Patji Thanks a lot for your kind comment! It's my pleasure and I hope you're able to use this a lot in your work! Best ~Geoff

[atimic]

Great tutorial. My question is, I still have a small space between the top of the #master div and the browser. How do I butt the #master to the top of the browser page? Thanks for the help!

[TenTonBooks]

Hey atimic, I'm going from memory, but try setting "margin-top" on #master to "0" That should do the trick

[Hanzitooler]

This is THE BEST tutorial on CSS layouts I've seen! Waow!!

[TenTonBooks]

@Hanz: Wow, thanks for the killer comment!! I'm actually working on another series on CSS layout, which I'll be uploading soon...so stay tuned!!

Geoff

[danpat]

dude, you are awesome, I have a challenge of what I wanted to add to my site as I'm currently building it, and this has been a blessing. You are alright with me.

[TenTonBooks]

@DanPat: Thanks for the kind words! Great to hear you enjoyed! More soon!

[anco250]

GRAZIE!!!!!!

[TenTonBooks]

Italian? Hey my pleasure my friend!

Geoff

[jw5235]

Finally someone who understands real tutorials!!! This was so helpful and the way you spoke through it made it extremely easy to follow!! Keep up the GREAT work!

[TenTonBooks]

@jw5235 @jw5235 Hahaha! Thanks for the awesome comment. That's what it's all about: Makin' it casual and easy to follow. Be sure to check out the free content on the Ten Ton Books website too! Cheers! ~Geoff

[sifrra]

Finally something useful! Tnx man!

[TenTonBooks]

@sifrra Awesome, cheers bro! ~Geoff

[IndieManc]

Great tutorial , all makes sense, looks great.Keep it up :)

[TenTonBooks]

@IndieManc Awesome, thanks for commenting! ~Geoff

[ivandolovic]

thx you help me a lot great videos best one

Great thx from AUSTRIA

[TenTonBooks]

@ivandolovic Cheers! Great to hear you enjoyed so much! Cheers from Canada ~Geoff

[ivandolovic]

It help me a lot and give me some good basics

[TenTonBooks]

Wonderful to hear, Ivan. Lots more coming soon. And, there's lots more on the Ten Ton Books website, too. Warm regards -Geoff

[jonasnet1]

This is massively useful and practical. For begginers, and even those who consider themselves advanced!! ;) Really Cool

[rocketregios]

totally awesome thanks fr this tutorial! :D

[TenTonBooks]

Thanks man! My pleasure! -Geoff

[peterflightsim]

GREAT

[TenTonBooks]

Awesome! -Geoff

[peterflightsim]

Hey I need help with a thing here :) I want to make a div that gets bigger if I write more, you get my point ?

[dungamong]

this is exactly what i needed

[kittybaby08]

wow! that's excellent!

[oscarrow]

Brilliant dude!

[blightytater]

This one was driving me nuts. Thanks for the vital info. You saved me a few grey hairs.

[nothairywoman]

Thanks heaps!!! Very good tutorial.

[SriLankanAirlines]

Yes Sir, I voted! you are the best

[theiceviper]

This guy explains things in the simplest terms I have ever heard. Thank you very much. You are a god amongst men.

[firestormxvii]

left me wanting to learn more! especially with the NBC "Heroes" style font (i don't know what that's called but I like it). Thanks for the lesson.

[LegomanBM]

Very very helpful, thank you!

[joshlawler7]

Yeah, these videos kick ass!

Nice job man, thanks alot!

[uhdragon2]

im getting a gap at the top per the 'master' div. there is now a white gap space from the top header, the margins are 0 from top i dont get it. Explorer shows the gap too but the gap is a bit taller in FF. gap is about 10px tall in IE and like 20px tall in FF. help?

[mysetris7]

Thank you big time!!! So much easier seeing it done. Nicely done and clearly explained. You're a good instructor.

[urnaiboy]

excellent 3 movies. it would be nice if you followed up like you mentioned in the first movie and added some buttons and maybe proper content as well. Thanks for all your help.

[mattydavid12]

man your a godess!

You have made my day! Brilliant mate!

WOO HOO!!!

[otoduran]

hey man i did this just as you said and it worked perfect... then i did it on another page by myself and it worked but when i click on the background everything disappears.. and i have to look around to try and find the other div i created.. when i click them then everything shows up. kind of annoying .. any way of fixing that ? :)

[uhdragon2]

not really, it is annoying but its just because dreamweaver brings it to the forefront when u select it. If you have issues with divs showing up on top of divs when you preview in your browser, u need to change the number of the Z level on the given div

[Deceased444]

By the way, how do you get rid the top margin space after adding the div before the closing body tag? In tutorial 2, the header was positioned at absolute top margin=0 but after adding the div, the top header had shifted with a small space on the top. Any solutions? Thanks.

[Deceased444]

good stuff

[CAFEYHUMO]

Yeap!, good stuff! thanks!!

[Koolkeithmathew]

you have good shit man

[IsThatMyAdobo]

This is awesome. great detail

[lialia73]

Thank you so much, the 3 videos are very helpfull.

If you can do others videos by focusing on the powerfull CSS. It'll be so great!

[OnlineMaven]

Thanks for the whole (3-part) tutorial. I really learned something. I will defiantly be reading/watching more of your site.

I really appreciate it.

[msuamataia]

Hey man, this is an awesome tutorial. I will post some websites i made using your techniques here if you would like when i get done.

[jamulero]

Thankyou so much for your CORRECT answer as to how to centre a Dreamweaver page. As far as i'm aware, you are the only person on the internet who knows how to do this! I OWE YOU! If u lived anywhere near me i'd buy you a beer (or 12). THANKS!!!

[Klaasdahaas4ever]

Fantastic stuff!

[DANZAAT]

thanks mate, just getting into dreamweaver, and this part of your tutorial was really useful.

[soniku88]

thank you very much dude i enjoyed that and actuly learned somthing thanks again

[SurfCracker]

Seriously good. Clear concise. Very usefull

Thanks !

[greenRiverThriller]

You are a champion of a speaker. SO nice and easy to follow!

[kheppera]

Thanks Mate, excellent videos. simple and easy to understand.

Cheers

Michael

[serufus]

so many people have said that this was imposable and you knocked it out of the park with ease. I feel like such a dork for being so excited about this but honestly this is going to make me a lot of money as a freelance designer. Your awesome.

[bomtronathon]

Can someone tell me why my divs won't expand downward as more content is added? I've been trying to figure this one out for a few days now.

[uhdragon2]

in dreamweaver you just manually change the div dimensions to accommodate the content in the properties panel.

[ericmanche]

Hey Jeff, really appreciate this... VERY intrumental, very helpful! More helpful than a semester in a RISD graphic design class did me. Keep it up! I hope someone is paying you because if not, I would!

[DarkRage4]

thx man ;)

[UNIVERSALRESOLUTION]

Dude this is what I've been looking for for ages! It was so easy when you explained it! Well, I've been fiddling with my css for a while now with no luck...now I know. Thank you very much for posting this! You rock

[wattsy012]

Excellent..Just what I was looking for. Thanks!!!!

[davo3d]

Geoff, is there a way so that the footer pushes down when too much content is added in the content area?

thanks heaps, Davo

[CiNikkiCon]

Thank you so much, Geoff!!

This has helped me out a lot!!!

Cant wait for your next video series, so i have suscribed.

once again thank you!

[summi80]

thank u very much geoff thts gna help me a lot.

[japan2themax]

Thankyou Geoff!

You've single-handedly saved me from copping out yet again and using those dreaded tables for rebuilding our company site. Cheers!

[Deeno888]

You Made a new CSS Rule near the beginning with just the Text Align Centre. What was that for? It seems to make no difference to the latter part.

In fact if I delete the rule it doesn't change the finished result, so why did you take this step?

Deeno

[TenTonBooks]

@Deeno: Ahh, an excellent question. It's needed so that the layout will render properly in IE5. However, is IE5 such a big issue these days? According to W3C, about 1% of surfers use it. You'll have to decide for yourself if it's worth it. My opinion: I like to build as bullet-proof as possible. Thanks for the great question ~Geoff

[Deeno888]

Thanks Geoff

Great videos and good point about bullet proofing.

Best wishes 5 Stars

Deeno

[OHS181]

absolutly awesome!!!

how about a tutourial for slicing up a photoshop page and importing it into css?

[TenTonBooks]

@OHS181: Thanks man! Regarding image slicing, you read my freakin' mind! Guess what's on it's way? It'll be a 3-part series, and I'll be posting part 1 in the next few days. Stay tuned! ~Geoff

[obxsurfer42]

Awesome series! Are you making more? There is so much in Dreamweaver that many of us have to learn!

[SteveMoonUK]

Hey Geoff,

Just have to mirror the great commments below - until now i hadn't found a tut that explained CSS properly - yours are fantastic !

Thank you !!!

Cheers, Steve (Wales, UK)

[TenTonBooks]

@Steve: Thanks Steve! Stay tuned for more tutorials coming your way! ~Geoff

[TenTonBooks]

@ifuss: Ahh, the hash key. Glad everything worked out for you though. Thanks for the kind words! ~Geoff

[byrondeslandes]

Fantastic ! Great tone in delivery ! Makes absorption of information effortless !! Good work ! Thanks

[TenTonBooks]

@byrondeslandes: Thanks for the kind words! ~Geoff

[davo3d]

Champagne tutorial! After Trawling the web looking for many answers your 3 part series has answered them all and more! thanks heaps for this knowledge as it's saved so much time. Nothing else to say, it's simply THE best tutorial on the matter.

cheers

davo

[TenTonBooks]

@Davo: Wow, thanks a lot, Davo! Awesome to hear that I was able to help out! Cheers! ~Geoff

[freebiemadguy123]

Dude, YOU RULE!

Thanks! You've explained it in a way that anyone could understand, and before now I haven't been able to get my head around it. Thankyoooooooou! :-D

[TenTonBooks]

@freebiemadguy123: Thanks man! Glad to hear I was able to help. You know, so many "teachers" make this stuff out to be rocket science...but bro, it just doesn't have to be that complicated! Lots more on the way! Thanks again~Geoff

[VivaZweiFan]

one more thing though, could you do a tutorial on how to create an ajax website with multiple layers which would appear and disappear? what i have in mind is making a website which wouldn't reload, but would give the impression of browsing through multiple pages but in reality all subpages would be just appearing and disappearing layers. my main problem is making the buttons co-relate with eachother, so that one thing appears and another disappears. any thoughts?

[TenTonBooks]

@VivaZweliFan: First off, thanks for the compliments, glad you enjoyed the vids. Regarding the "multiple layers/single page site" idea, pretty creative thinking, but even if the other layers (div's) are hidden, their content would still have to load, making the load time for that single page monstrous! Email me and we'll chat more about it: geoff [at] tentonbooks [dot] com. Thanks again! ~Geoff

[VivaZweiFan]

this is awesome! i was thinking of making a website based completely on overlaid ap divs with ajax functions, but the problem was centering them. now i have the answer, thanks again!

[idro2k]

Awesome Teaching!