CSS Tutorial Pt 4 - Creating Boxes

[TheEmoSushi]

did u memorize all the color code?o.0

[chessada83]

Hi, great tutorial helpful

[namwarn98]

Thanks alot nice Tutorial

[alexfontecha]

Hello, i don't good speak english, but you tutorial is very clear and explaining too.

Thanks so much

[osakaben10]

can you make likes in the Leftnav and rightnav the same way as in the header,or the Horizlinks?..i think so. but, every once in a while i get confused with this. I'm planning a big 3 day weekend so i can finally fix my page using your lessons. thanks in advance,

Scott.

[arthurxlwang]

Thanks a lot. These tutorials are very helpful. I just want kiss you.

[vinz111490]

tnk you sooooooo mucccchhhhhhhhhh!!!!!!!!

[Inventor3006]

Guess my first post didn't work,

Hey My Lady,

We need version 5 "How to Make that box into a Table Type form"

(Columns/Rows/with and without borders/etc.)

[ucannotmakeitup]

I think the #body needs margins clarification such as top right bottom left

margin: 80px 760px 480px 140px

top margin: 80px is top after header.Right margin= 760px is 620px for width + 140px; bottom margin = 480px is 80 from top + 400 for the nav columns and left margin 140px from left. Otherwise, this is the body goes somewhere else.

Nevertheless, very good for those who have laboured studying HTML. Don't expect to understand it straight away. Well done, Lisa!!!!!!

[SuicidalXlove1]

hi, this is a great tutorial!!!

[satria044]

Hi Lisa,

What a great tutorial you presented here. Just by looking the "likes" , we know ppl love it !

I have created the template, but when I write to the all the div, the text overflow all the way outside the container. Any idea why that happened?

[megamix1029]

Lisa, you're awesome. These videos have been such a big help. This is the way CSS should be explained.

[clarayes]

That's clear but it will be nice if you could explain how to do a columns inside the box, that's actually what I'm trying to do.

[LynnStrauch]

Folks, watch all four tutorials. I only watched the first one, and made a comment that it did not look like Lisa's. Now that I have seen all the video's and followed them, it made a little more sense, and as time goes on, it will continue to stick (I hope). But follow along. Now I see where I went wrong. Thanks Lisa. Great tutorials, and great way of showcasing your talent.

[Cygna1]

Thanks once again Lisa!!! =) 

[vzxsw]

Your definitely the hottest CSS tutor EVER! haha!

[Mrflashlite]

your series was great and informative

[jayprayag]

I am a novice to CSS. But your tutorials were so good that I could grasp CSS key points in short time. Your explation is lucid. Also, you have a very pleasing voice. Pronounciation is clear. As a result, I could get everything you spoke. Thanks from the bottom of my heart for the real good work.

[wolf996]

Excellent. Very clear and just enough information to know what to do but without overloading it. Thanks!

[boneysin]

u rock sweet voice ... lisa i guess .... god bless

thanks a ton

[Mr28WeekSkater]

and if you now want to put all your stuff into the body you have to write everything between these two div /divs ?

[ady0211]

How do you center the whole web page?

[Cygna1]

@ady0211: To center the whole page set the right and left margin on "auto":

#container {

width: 900px;

margin-left:auto;

margin-right:auto;

}

[Cygna1]

@ady0211:  To center the whole page set the right and left margin of teh container on "auto":

#container {

width: 900px;

margin-left:auto;

margin-right:auto;

}

[rcklarue]

Thank you for taking the time to make these videos.I am new to this and I have learned so much in a short time.

Your videos make sense.

[isabelle0420]

Thank you, thank you, thank you Lisa. I have been searching endlessly for someone to explain CSS to me in a way I could understand, and you did it, for free! I really appreciate your hard work. :)

[tanisharbaap]

Really wonderful!

[tanisharbaap]

Really wonderful!

[lollipops711]

lol

[ovonijemojeime]

your voice is so awesome.

[mysteriously01]

great video

[rune500125]

only 1 thing.... MAKE MORE VIDEOS!! no one makes videos as clear and good as you. i used to make html pages but everything was always on the left and they looked bad but they always look profesional and good now.

thanks for the awsome videos!

[mangoprojects]

I enjoyed the four part series of css tutorials. Thank you. -behindvfx

[probowler94]

When specifying margins, you do not have to give all four (top, bottom, left, right) when they are the same value. Instead of using "margin: 5px 5px 5px 5px," you could have just specified "margin: 5px."

[2createawebsite]

@probowler94 Yes you can do that, but I used all 4 coordinates so people can learn that they can adjust all 4 values right there if they want to use different numbers for the various margins. Much shorter than creating a separate line for margin-top, margin-left, margin-right, etc.

[mskleftwich]

@probowler94 She said that at 5:22 anyway. "If you only do one coordinate for the padding, it will give you the padding for all four sides..."

[collmydog]

Excellent

[collmydog]

this is when the girls get the hands on it.

That is excellent for beginners, nice explaining and wary nice work.

You should get paid for this what i do :)

[shakaama]

lisa how i been following you for like 2 years under your lisa account and never realized you had this acount too /sigh i'm slow

[Sebe1337]

Thanks for the awesome tutorials Lisa!

[bliksum58]

Thanks Lisa. I learnt a lot and really enjoyed each session that you presented.

[just0408]

Thanx you Lisa

[ntje2005]

Shortcut note: When you are adding hex colors in your style sheet, if it is the same letter or number (example #FFFFFF)- you can just add the first three characters (example #FFF) and it will have the same effect! Saves me time.

[kchaggins]

Love it girlfriend! This is a super video! Thank you!

[asji1000]

wow nice i think she is lisa she look like lisa but not confirm tht who is she anyway whether ur lisa or another nice video keep it up

[wuddlknuddel]

very very good and understandable tutorial!

btw:

if you want a padding with 5 px each side you only need to type:

padding: 5px

because if it only gets 1 number it automatically takes it for the other sides too!

[cssdevelopernet]

Four very informative CSS videos, Lisa. People - if something goes wrong when you're coding in CSS, be patient and KEEP TRYING!

[overcominginertia]

Awesome job Lisa. After I saw the first one I was a little confused so I took a few other beginner tutorials. One made a good point that in addition to making changes to your page easier (through CSS). It will also make the page load faster because of the reduced code. If you have a high traffic page it will eat up bandwidth which will cost money unnecessarily. Thanks again for the great tutorials.

[Jovidon1]

Thanks {

very

very

very

very

very

}

much:)

[vn44ca]

@impulsive2urge

Do you mean she is smarter than you are? I think so!

[Evol07]

I'm so glad eye stumbled across your tutorials. They are very helpful and I think you've done a great job of translating from Geek Tech to something we can understand.

Props!

[MrFreedomax]

CSS made simple. Merci Beaucoup

[MrFreedomax]

CSS made simple. Merci Beaucoup

[ifama]

I loved this. I think I finally understand how it works. Great Job.

[sdbeng23]

Good job Liza!

[lukeschumann]

awesome

[fbuskens]

Great videos. You though me CSS within an hour. That's amazing! ;)

[Muse94Muse]

thank you for all this :D

[Masterrer]

Will You marry me?

[impulsive2urge]

@Masterrer

she's black

[Masterrer]

@impulsive2urge

you racist?

[gf133]

@impulsive2urge It doesn't matter whether she's #000000 or #FFFFFF :-P

[impulsive2urge]

@gf133 yeah it doesn't matter, only if the opacity is 0 though. :-P

[tanisharbaap]

@Masterrer

I was going to ask her that myself if I wasn't already married! :)

[seasonprojects]

Awesome tutorials, it was great to see someone doing tutorials for CSS using a bundled free text editor rather than spending 5 minutes explaining the program they are using, for example Dreamweaver. Great Work!!!!

[marcogugo]

That's right, but for a practical use there is better software, i use Notepad2 (it helps with syntax colouring for many coding languages, completing tags for you, folding the code that is part of a tag container and so on. It weights just few Kbs.

[srocket]

Good tutorials, any chance on going over shorthand CSS or first-child pseudo classes? w3 doesn't really go into to much detail and the class I am currently in is very fast paced

[chabamjae]

Thank so much! God Bless You more!

[vintageozarks]

I was afraid to even glance at CSS since all I knew was html. I've had to watch the tutorials several times but I wanted to be sure I learned it and had no confusion about each task. Thank you.

[varsaharas]

fantastic thank you very much

[tssebby]

ok ..but this is just a simple box ..not a table..How do u create a table with multiple collums and rows just with CSS ?

[antonorn]

Thank you for this tut i a am new to css but these tutorials will get me started.

[che18on]

awesome!

i am ur fan!

[AnchoredinGold]

The only way I could get the table, off the left navbar was to position it; absolute/left @ 170px.

[robcs04]

Thank you very much for the tutorials. Excellent videos.

[TylersComputerShow]

Your videos are great! 5 stars!