CSS Tutorial Pt 3 - Creating a Horizontal Nav

[Mertt03]

Did i mention already that you have really really good tutorials ? No, okey then im gonna say it now: Girl you really got good tutorials thanks for sharing it with us.

[ramraider2k6]

Please stop calling it pound. It's a Hash.

# Hash

£ Pound

It's like me telling you a comma is the same as an exclaimation mark.

[randomstuff6791]

Thank you so much Lisa, just what I was looking for!

[jomalicious1]

Hi Lisa,thank you for your tutorial ^_^ it help me a lot learn how to create a website from the start..btw,have a little help pls

I'm stuck on how to make a header and how to put it in my website.My photoshop editor always say "scratch disk full" T_T

I just follow what you put on your tutorial and just edit some of it like hex colors,width and height to see the result.thank you and God Bless!

[USMCxFirefly]

i hate when niggers know something i dont...

[LiveYourLoveBlog]

You keep me addicted to CSS, Lisa. I just started working on a static site for the kennel I got Roma from, just to be able to test all this. And it is looking amazing with your tutorials :)

[2createawebsite]

@LiveYourLoveBlog Really? That's great to hear Brankica!

[LiveYourLoveBlog]

@2createawebsite You saved my a-s with the horizontal nav :)

[DigitalPerfection1]

nice job on the css training

[misterfantasticman]

@ConcernsCitizens margin:0 auto;

[khanfaisur]

i impressed u r vidio lectures...absolutely nice training....i learn much more from these...faisurkhan...(abbottab­ad)

[sahilcspro]

Lisa can you teach to put a background image. And how do i get correct px for image i tried but its not getting right i am not able to get correct px for image of body

[monicas350]

this was a wonderful training exercise and I learned a lot.



[mrbrightsizwe]

@rednck09 in the css when defining the container id, inside the brackets type margin: auto; to center the container in the webpage.

[DannydesignsGFX]

The layout doesn't cover the whole off the page, why does it not?

[Frizzied]

Wow I am impressed!!! Keep going! :D

[Hhunterr18]

thanks it really helps

[kleisti12]

Good video but you forgot closing the ul tag!

[cadkins86]

Lisa, Thanks for passing your knowledge on. Very well done.

[54553400]

Lisa,great affect well done.

you done great job

plz keep going on,

UMAIR RAMZAN

[beans1979]

@yenamarre100 so post a better video

[wewilhelm]

thank you

[John77659]

thanks you have helped me out

[ikeashiasanders29]

WHAT IS THE UL-----IAM HAVING TROUBLE UNDERSTANDING THAT CAN YOU PLEASE HELP???

[MegaGobbleGobble]

@ikeashiasanders29

yeah the UL stands for 'unordered list' , which is basically bullet points if you put OL that would be 'Ordered list' which is number points, when she does the 'li' bit it stands for 'List items' , which is each bullet point. you saw she hides the bullet points though, so theres a space between the links rather than a bullet point :D hope that helps

[ExNavy]

Lisa, absolutely excellent!

I really like how you have explained the difference between #div and .class.

You make a whole lot of sense!

Thank you

[Loekkiee]

@ExNavy Please tell me the difference between a div and a class. I didnt understand that part :$

[jbach1203]

Thanks for the simple explanation.... makes so much sense.

[datspanishguy]

when i hover the background image is cropped to the font size..? any help?

[elvis69rules]

Your the best !!!

[turkswife]

How do you view the website,

[Cygna1]

@turkswife

Just open the "index.html" file with your webbrowser. When you save it as .html it should automatically be opened with the browser.

[Tortiak]

you should make a liquid design, they r easy :D

[salihacam]

hi. is there a way that you could change the color of the line that separates the header and the navgation or the body? and also, how would you create link that every time you hover on it, it will give you a sublink like a drop down list? I hope I made sense on my questioni, i'm very naive when it comes to programming.

Great tutorial! Thank you and hope you have more videos to come. have a great day!

[salihacam]

hi. is there a way that you could change the color of the line that separates the header and the navgation or the body? and also, how would you create link that every time you hover on it, it will give you a sublink like a drop down list? I hope I made sense on my questioni, i'm very naive when it comes to programming.

Great tutorial! Thank you and hope you have more videos to come. have a great day!

[Poolessons]

OMG...Lisa please read...ive sent like 20 messages but u havent replied in like 6 months.....

I Made my own website using this and i want you to tell me how i did.....Link:

PoolVideos.webs.com

(REMOVE SPACES IN LINK IF THERE ARE ANY!)

now msg me back please and tell me how u think of it

[2createawebsite]

@ConcernsCitizens You can try text-align: center; for that class or div

[mangoprojects]

Thank you. -behindvfx

[kaaalipsa]

For centering some element use:

#someDiv

{ width: 800px; margin: auto;

}

[jeetendrag10]

really nice tuts

[fatadel]

I have a question. Why can't we just give the relative position to the footer and use the same class?

[SmokeNoMore]

lisa lisa lisa... wow!

[artoorew]

Hey Lisa,

I have a question. What is the size for the link's hover BG image? Thanks!

[VICv13]

I'm just starting my "adventure" with web designing - your vidoes are fantastic !!!

Thanks a lot :)

[T3CHCH1LD]

cool i am 12 years and even i know css now.

i already knew basic html lol =-)

[octa231]

@T3CHCH1LD

I'm 11 and I know HTML, JavaScript and CSS.

I'm learning about Joomla now. I got 10

at HTML test (Physical test not on internet).

Same for Java Script.

[T3CHCH1LD]

nice, lol I know HTML, CSS and PHP.

[rednck09]

How do I get my page to be centered in the middle of the web browser?

[lisa3876]

Add the margin: auto; attribute to your style sheet for the container and it will center the page.

[xouttahellx]

@rednck09

could anyone answer please?!

[Cygna1]

@rednck09

After:

"  #container {

width: 900px; "

I added

" margin-left:auto;

margin-right:auto; "

It worked for me and its in the middle of the browser now.

[jomalicious1]

@Cygna1 hi i just wantto ask where did you get that idea..i fallowed you but it didn't work :D

[misterfantasticman]

@rednck09 margin:0 auto;

[mikael971117]

@rednck09 You use the center tag.

[MrCrynickYT]

@rednck09

put this code in the container:

margin-top: 50px;

margin-bottom: 50px;

margin-left: auto;

margin-right: auto;

[sdbeng23]

Great job Liza! I'm working on a php template and will try to add css style to it.

Thanks for doing it so clear and concise :)

[lukeschumann]

good job

[stevetownley]

Thanks Liza for taking the time to put together these tutorials, your a natural. I'm a Pro Developer and don't do much website stuff but needed to do a favor for a friend and you got me up to speed in 1/2 an hour, good on you! Cheers Stephen, New Zealand

[laszap]

this is a great work. i understand CSS at last. THANKS A LOT.

[vitravlos]

HI lisa, I just subscribed to you side and you are a great tutor!. Thank you so much for this. I was looking into how to create a horizontal nav for a very long time and found my answer by viewing your video. Really appreciate your effort:) well done! Vithya

[praphulo]

Thanks a lot :)

[Zydraca]

Why is it that the template looks great in firefox and IE browsers, but when I load it into Dreamweaver cs4 the design goes haywire: the navlinks are bullets and vertical, and everything below the header is skewed and all over the place.

[jimmybrowder]

Lisa, absolutely excellent training. Thank you very much! Jimmy Browder

[Maholix]

No expert comments here, just a thank you. You speak of W3Schools a lot, and I agree it's a great site, but the visuals you give make sense out of a lot of data. W3 is good at telling you how.. but it only touches on the why.

[NikSumix]

great work =]