Basic CSS rules i must know
I came up with this topic this time because, often my friend and me confuse when we found a layout bug.
Layout bug i mean is a situation where the html and css we wrote not reflect the layout design as expected. Here is the example:
Image above shows that there are 2 things. First, the yellow box area we can call it 'banner'. Second, the orange button we can call it 'cta button'. Banner is the container and parent for the cta button. The cta button should be only within or inside the banner but a layout bug happen where the orange button when out the container out of control. It's happen because of the button is using A tag.
A tag is one of inline elements. Inline elements are made to provide some function without affecting layout. Inline elements are very good to be used in preparing web contents.
In this situation, A tag is still better than BUTTON tag because cta button is normally a link either link to contact form or an anchor link to email subscription form at the footer of the long page.
So, the solution is we need to override `display` property for the cta button from `inline` to `inline-block`.
Remember and use these block elements to avoid the layout bug.
Apart of choosing element. Another thing we must pay attention on is the usage of property `float`. `float` is a css property which will convert your block element to inline element. Instead of using float property, we better use 'flexbox'.
According to caniuse.com website, flex is now support on all browser especially modern browser. You can find out more about that in this link below:
https://caniuse.com/#search=flex
To learn more about html & css layout. Visit this link below:
http://learnlayout.com/
Layout Bug
Layout bug i mean is a situation where the html and css we wrote not reflect the layout design as expected. Here is the example:
Image above shows that there are 2 things. First, the yellow box area we can call it 'banner'. Second, the orange button we can call it 'cta button'. Banner is the container and parent for the cta button. The cta button should be only within or inside the banner but a layout bug happen where the orange button when out the container out of control. It's happen because of the button is using A tag.
A tag is one of inline elements. Inline elements are made to provide some function without affecting layout. Inline elements are very good to be used in preparing web contents.
In this situation, A tag is still better than BUTTON tag because cta button is normally a link either link to contact form or an anchor link to email subscription form at the footer of the long page.
Solution
So, the solution is we need to override `display` property for the cta button from `inline` to `inline-block`.
Remember and use these block elements to avoid the layout bug.
Apart of choosing element. Another thing we must pay attention on is the usage of property `float`. `float` is a css property which will convert your block element to inline element. Instead of using float property, we better use 'flexbox'.
According to caniuse.com website, flex is now support on all browser especially modern browser. You can find out more about that in this link below:
https://caniuse.com/#search=flex
To learn more about html & css layout. Visit this link below:
http://learnlayout.com/
Comments
Post a Comment