Tech School

User Tools

Site Tools

Trace: • inputs • exercise • exercise • padding_margin • attributes • update • javascript
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 [2021/12/13 05:14]
mag [Web Development Lesson 3 - Layout] 		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. We can keep the <html><nav></html> in the same position by fixing it.+  * Let's add some content to the <html><main></html> section. 
 +<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 your CSS code. 
 +<code>.content { 
 +  background-color:coral; 
 +  border:orangered solid 2px; 
 +  height: 400px; 
 +}</code> 
 +  * Notice that the <html><nav></html> moves up the screen as we scroll the page to see the bottom of <html><main></html> 
 +  *  We can keep the <html><nav></html> in the same position by fixing it.
 <code>nav { <code>nav {
   background-color: burlywood;   background-color: burlywood;
Line 119: 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.1639401297.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