Tech School

User Tools

Site Tools

Trace: • exercise • exercise • padding_margin • attributes • update • javascript • inputs
en:web_development:layout:position

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
en:web_development:layout:position [2022/03/17 15:19]
mag [Fixed Positioning] 		en:web_development:layout:position [2023/08/16 09:33] (current)
Line 96: Line 96:
  
 ==== Fixed Positioning ==== ==== Fixed Positioning ====
-  * There's another useful option for positioning elements when you have a lot of information to scroll through. +  * Let's add some content to the <html><main></html> section. 
-  * First, let's simulate scrollable content by removing the bottom limit to <html><main></html> and setting the height to 100%. +<code>    <main> 
-<code>main { +        <div class="content">Section 1</div> 
-    background-color: lightgreen; +        <div class="content">Section 2</div> 
-    border: darkgreen solid 2px; +        <div class="content">Section 3</div> 
-    position: absolute; +    </main></code> 
-    top: 100px; +  * Now let's make it look like it contains a lot of information. Add the following to your CSS code. 
-    height: 100%; +<code>.content { 
-    left: 16%; +  background-color:coral; 
-    right: 0px;+  border:orangered solid 2px; 
 +  height: 400px;
 }</code> }</code>
   * Notice that the <html><nav></html> moves up the screen as we scroll the page to see the bottom of <html><main></html>   * Notice that the <html><nav></html> moves up the screen as we scroll the page to see the bottom of <html><main></html>
Line 131: Line 132:
  
 ==== Overflow ==== ==== Overflow ====
-  * There's another way of dealing with large pages if you want to have a footer that's always visible. Let's add some content to the <html><main></html> section. +  * There's another way of dealing with large pages if you want to have a footer that's always visible. 
-<code>    <main> +
-        <div class="content">Section 1</div> +
-        <div class="content">Section 2</div> +
-        <div class="content">Section 3</div> +
-    </main></code> +
-  * Now let's make it look like it contains a lot of information. Add the following to you CSS code. +
-<code>.content { +
-  background-color:coral; +
-  border:orangered solid 2px; +
-  height: 400px; +
-}</code>+
   * Scroll the page and see that our orange Content section overflows <html><main></html> and goes beyond <html><footer></html>. If that doesn't happen because your screen is too big, increase the value of <html>height</html> in CSS.   * Scroll the page and see that our orange Content section overflows <html><main></html> and goes beyond <html><footer></html>. If that doesn't happen because your screen is too big, increase the value of <html>height</html> in CSS.
   * When you're ready, let's add a scroll bar to <html><main></html>.   * When you're ready, let's add a scroll bar to <html><main></html>.
en/web_development/layout/position.1647555562.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki