HTML5 & CSS Web Design - 108 - Styling the HTML5 Structure

Part 8 of Web Design tutorials covering basics of web development with HTML5 and CSS. In this we look at how to use CSS to make our HTML5 structure fit together. Tutorials by Will Goldstone see willgoldstone.com for more info.

Category:

Education

Tags:

• Web
• web design
• html
• css
• html5
• development
• education
• tutorial
• video
• dreamweaver

[miyuu90]

i just follow your instruction but then my side bar is below the article n section part? did i make any mistake?

[willgoldstone]

@miyuu90 presumably, you must have missed a float:left; somewhere on one of your previous sections.

[cahildesigns]

hands down the best introductory dreamweaver tutorial on youtube currently.

very clear, precise, and straight to the point. nicely nicely done!

[willgoldstone]

@cahildesigns thanks man!

[s1006000]

Hi there I am currently following the tutorial however when I come the nav bar css code it seems to appear differntly on my screen :S its including the info,sidebar etc this is my css code @charset "utf-8"; #wrapper{ width:1024px; margin-left:auto; margin-right:auto; position:relative; } header{ float:left; width:1024px; height:134px; background-color:#21c9dd } nav{ float:left; width:1024; height:40px; background-color:#F0C } any suggestions? cheers

[willgoldstone]

@s1006000 does putting the semi colons on the end of the lines of your last two properties in the header and nav rules fix it?

[Taurenwarrior75]

"My site" "Welcome" and the "Nav" are all sitting next to each other almost touching. The page isn't centered but instead is slightly to the left. "My site" has a tiny little blue box that surrounds it and doesn't expand cross-screen. I've looked over the tutorial several times and copied everything precisely as instructed but don't get the results the tutor is explaining. If anyone has any suggestions I would really appreciate it.

[miyuu90]

@willgoldstone i have already check it. i put float:left; as you said.

[L95Darkness]

Thanks for this dude! Extremely helpful, you were clear and explained everything very well. Thankyou!

[MrMegaSet]

THANK YOU!!!!!!!!!!!!!!!

I am just starting out and I was soooooooooo confused. Your tutorial put everything in place for me. It was clear and easy to understantd.

[supergameover]

Gracias. Saludos desde Argentina!

[Abcdds2]

Keep up the good work.

[divingonline]

See how that will run on Internet Explorer 7... HTML5 tags still need to be wrapped in a <div as a backup for older browsers.