Differences

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

--- en:web_development:layout:position [2021/12/12 09:58]
mag [Overflow]
+++ en:web_development:layout:position [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
-====== Web Development Lesson 3 - Layout ======
+====== Web Development Lesson 5 - Layout ======
 ===== Forced Positioning =====
 ==== Objective ====
@@ Line 34: / Line 34: @@
   border: darkblue solid 2px;
 }</code>
-  * Now open 'layout.html' in Live Server and see how it looks.
+  * Now open 'layout.html' in Live Server and see how it looks. The colors and borders are purely there for your understanding of how the pieces fit on the screen. Usually they will have similar backgrounds.
   * All four elements fill the screen from left to right, wrapping their content tightly at left, top and bottom and they are stacked on top of each other in the order we've placed them.
   * You could use these for any content you like, but of course it's easier for you and anyone you might work with to follow if you use them as named.
@@ Line 96: / Line 96: @@
 ==== 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 {
   background-color: burlywood;
@@ Line 119: / Line 132: @@
 ==== 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.
   * When you're ready, let's add a scroll bar to <html><main></html>.

Tech School

User Tools

Site Tools

Differences

Page Tools