HTML5 and CSS3 beginners tutorial 38 - creating a website layout [part 5]

In this tutorial I show you how to float your navigation next to a logo and also how to make our list items in the navigation float next to each other.

.
Follow me on Facebook:

Follow me on Twitter:

Don't forget to subscribe:

Donate on PayPal:

xclick&hosted_button_id=DM496T7CTUYAS Donate on PayPal:

[tommoran]

The mind is like a huge sponge. Thx to God he gave me a great big brain. I am learning all of your programs to build my churches website and because I love to code and create smiles on the faces by the thousands. Keep them coming.

[hassansellam]

Yes it's really you are very very and very excellent teacher
i learn many things from you thanks a lot my best teacher

[annegallagher]

8:09 minutes works beautifully on Chrome, Firefox, and IE, however .top.nav ul li  displays in an unordered list.
Best tuts EVER.

[nizarahmed]

I am still look forward for your next tutorial .... thank you it is so helpful!

[markdeanilvicente]

Sir I would like to request for another javascript tutorials. I've already watched all of your javascript tutorials and learned I lot from them. :) Sir I want to learn more :D. God bless and thanks in advance

[dduck]

Awesome tutorials, I'd love to see more on CSS and so on. For now moving on to the JavaScript

[Princess]

Hello Quentin, thanks for your easy to understand videos with simple explanation.
However, in this video, rather than adding float:left and clear to the top_nav and logo, simply using display:inline-block would be sufficient. Also, the display:inline-block can be used to order the list items as well. This is how I styled my css file and the result is pretty much identical

.logo, .top_nav, .top_nav ul li{
display: inline-block;
}

.top_nav ul li{
padding: 30px 20px;
}

Since its all about HTML5 and CSS3 why not get rid of floats :)

Also, I really appreciate your humor in your videos coz they're not boring at all :)

[ocreative]

Hi Quentin,
I had really enjoy your tutorials. Thank you very much.
I wonder when you are going to upload tutorial number 39.
Thanks Man.

[stwillow]

This series was really good. You helped me get caught up on HTML5 and CSS3. I have subscribed and will tell my friends. Please keep going. I'm learning so much!..on to Javascript..TYTYTYTY :-)

[AHRAIDER]

Hello Quinton love this video series looking forward to viewing the javascrpt, and php tutorials as well.  I was wondering if you are going to do a MySQL tutorials any time in the near future.  While I had some exposure to all of these subject it has been years ago now so I am getting back up to speed on web design.  I completely enjoy how clearly you have described all of the elements in HTML5 and CSS3.  I would encourage anyone wanting to learn to view all of your tutorials.  From an older programmer once again thank you so much.

[adeyemisheriffdeen]

i really like ur videos brother it really help

[anurag]

Thanks sir, If possible then please clarify where i can use  display bloack and inline block Well thanks for very nice tutorial i learn a lot

[mark]

Now, this I have to study more to get this all down.

[walkbyeyes]

When using the float: right for the ".nav_top_url ul li" then it changing the positing of my all text. Could you please explain why it is happening?

[mathewi]

is it ok to use max-width with auto margin?It makes page more convenient for small screens

[annegallagher]

The block is only centering in Chrome, while each three browsers are displaying the "display:inline-block" in a ul list not across the page.

[saucy]

Wouldn't increasing the padding for both top and bottom make the list border overlap the article?

[michaelnovick]

not to sound stupid but to be centered with the logo wouldn't you just add half the amount of px height of the logo as padding and calculate for the font height and have a perfectly centered nav bar

[adeyemisheriffdeen]

could u please make videos on how to use javascript and php in web designing

[francoisheroez]

Consider maybe doing <div class="container">
<img src="default.png" a/ w/ h/ .../>
<div ="nav"></div> //still style these using inline-block
// style this using
<style> .container{
display: flex;
align-items: flex-end;   } // you might also use "justify-content: bottom" alternatively "center" or "top". 
 </style>
Your method works fine, but if you want it truly justified and don't have the patience or ambition to do the math.... this is an elegant solution.