Layout Example CSS - Float, Display, Clear, Overflow properties

5 лет назад

29,244 Просмотров

Up until recently the main way that designers laid out their html web pages was using the float properties.
Although the float has now competition in terms of flexbox and grid, the float property along with it's cronies are essential to know for any web designer.
One thing that float is dependent on is the document flow. Generally float works from left to right and top to bottom. This means the html elements need to be laid out according to this flow. Otherwise we get different div sections showing up in the wrong places.
This tutorial starts with a wireframe diagram that shows what destination we are aiming for. It then moves through a step by step build up to a solid layout that has some responsiveness.

Тэги:

#Web_Design #HTML_Layout #CSS_Layout #CSS #HTML

Скачать видео

Комментарии:

@faridunivlogs4096 - 29.08.2022 19:07

you can write just margin auto

Ответить

@jason4906 - 16.02.2022 05:47

I'm so glad content like this exists. I'm struggling with learning CSS and floats right now and sometimes just seeing someone else's approach to basic stuff like this is very helpful. Thank you.

Ответить

@neiledwarddelacruz9419 - 17.08.2021 04:41

well explained. thank you

Ответить

@zulfiqarhussainshah3113 - 07.08.2021 21:48

Thanks a lot, It was really well explained !

Ответить

@carlojones8610 - 23.02.2021 02:12

Nice. Thks

Ответить

@shonhomezzz6222 - 03.02.2021 17:24

Do your layout every site you make?

Ответить

@TwZLTanTrUmZ - 10.01.2021 04:55

GEX

Ответить

@MadAustinite - 19.09.2020 01:17

This was a great example and explanation! Thanks!

Ответить

@habibikushal9738 - 25.05.2020 16:48

hello guys any idea how to get the iframe code ,
i have tried almost everything and nothing is working.
lease help..

thank you.

Ответить

@mehdialaoui8699 - 05.05.2020 20:59

Thanks a lot. Please can you share your code in Github !

Ответить

@amineaitboulman3995 - 04.05.2020 20:46

Thanks a lot Q Visible, that was really well explained !

Ответить

@dougui20 - 21.04.2020 08:36

wow, you made this so easy man

Ответить

@tomrago844 - 16.04.2020 12:24

Thank you!

Ответить

@TejaSwaroopArukoti - 15.01.2020 08:30

Nice explanation.

Ответить

@sddhrtha - 08.10.2019 17:03

Great video for beginners!

Ответить

@nssdesigns - 02.05.2019 07:16

Interesting. I'm a WordPress developer using visual builders and learning html and CSS on the fly to hopefully problem solve issues. I know it's probably not the best route but visual builders are certainly the fastest way to get up and running. Purists would maybe argue for bloated code but builder are getting better OXYGEN a prime example. Would be interesting to know if purist coders start with blank html and css style sheets?

Ответить