HOW TO STRUCTURE LAYOUT & LINK PAGES
HOW TO STRUCTURE LAYOUT
There are basically four methods:- WATER (no CSS - content fills screen - no controls)
- FLOAT (using CSS with float left, and width persentages to organize layout)
- GRID (new CSS - verticle columns of equal width)
- FLEXBOX (new CSS - verticle columns of unequal widths)
MORE ABOUT THE FLOAT TECHNIQUE
You can structure pages using the following CSS...- Divs - Divisions (think of them like boxes). These boxes or sections, that can have their own formatting.
- Width - Adjusts the width of elements on the page.
- Float - Specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
About Positioning of Divs
- Static - Basic default.
- Fixed - Prevents element from moving or scrolling.
- Absolute - Allows you to place elements exactly where you want them by using the positioning attributes top, left, bottom, and right to set the location.
- Relative – relative to its place in the code.
3 DIFFERENT WAYS TO CODE CSS
Make a CSS style sheet sheet and attach it. Put CSS in head portion of HTML code. Place it in line <style=______>
X, Y, Z
X-axis: Horizontal axis of the page.
Y-axis: Vertical axis of the page.
Z-index: Allows objects to move forward (up) or backward (down) on the page, like an elevator. The lower the number, the further
back it will be from the screen, and the higher the number, the closer it will be to the screen. An X,Y-axis of 0,0 would start at the top right of the page.
tags
- <header>
- <nav>
- <main>
- <article>
- <section>
- <footer>
- <aside> any name can be used for a class or ID <div> (division) tag.
COMMON
- float:
- width:
- max-width:
- height:
- background:
- padding: (Padding pushes in)
- margin: (Margin marches out)
- boarder: (this applies to all four sides)
border-top: 5px solid red;
border-left: 24px solid blue;
border-right: 10px solid blue;
border-bottom: 10px solid blue; - max-width:
- max-height:
- display:
- pseudo-classes:
- opacity:
- flex:
UNCOMMON
Rounded Corners (not approved by World Wide Web Consortium yet, but approved by browsers. So we have to use different code for the browsers)- Rounded Corners - Approach 1: All corners the same
border-radius: 10px; /* future proofing */
moz-border-radius: 10px;
webkit-border-radius: 10px; - Rounded Corners - Approach 2: Corners different
border-radius: 10px 20px 30px 0; /* future proofing */
moz-border-radius: 10px 20px 30px 0;
webkit-border-radius: 10px 20px 30px 0;
opacity:
RARE
- position:
- max-height:
- z-index:
- outline:
- Divs - Divisions (think of them like boxes). These boxes or sections, that can have their own formatting.
- Width - Adjusts the width of elements on the page.
- Float - Specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.