Hey everybody, how’s your Friday going this fine evening? I’ve just got back from jamming with some friends and it’s really great to socialise again (in small numbers of course) and get some inspiration for further songwriting. But let’s get our teeth back into Applied Visual Design in HTML. Granted, it is really late here so we’ll keep it short and sweet. All lessons by FreeCodeCamp.
Why did the <head> not go to the party?
Cause he has no <body> to go with!
Come on gimmie that one.
Lock an Element to the Window with Fixed Positioning
Well this does exactly what it says on the tin. When the element in question is removed from the natural flow, the other element’s don’t “realise” where it’s positioned which may have repercussions elsewhere. “Fixed” elements don’t move when you scroll so they appear locked with the screen itself, you know the kind you get: for menus fixed at the top of the screen or for those terms and conditions on every page you open. simply add a “position:fixed;” declaration to the element’s selector you want to affect.
Push Elements Left/Right with Float Property
The float property “pushes” an element to the left or right of it’s parental container element and is usually coupled with the width property (percentage of the screen) to specify how much space the float property requires on the horizontal plane. The float property can be written as float:left; or float:right; .
Use z-index to Prioritise Stacked Elements
When writing HTML, elements can end up on top of each other in the browser, but you can order them using the z-index:number; declaration (whole numbers, not decimals!) So e.g. if you say z-index:1; and the other element has z-index:2;, the element with the number 2 will have priority as it contains a higher value of the z-index. You can imagine how this could be used as a resolution for multiple elements that are overlapping in one spot.
Center an Element Horizontally with Margin
Elements that sit on the left of the browser by default can be centered in the browser horizontally using a simple margin:auto; declaration.
This works for images too, as they are inline elements by default, but can be changed to block elements using the display:block; declaration.
Let’s call it a night there. Just a little brief one tonight but we’ll pick this up more tomorrow. Night ya’ll.