From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Positioning elements: Solution - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Positioning elements: Solution
Hopefully, you were able to complete the positioning elements lab without too much trouble, and without getting too mad at me. Now, if you did get stuck, don't feel bad. It takes a while to fully understand how positioning works. So let's take a look at the finished files and how I coded those elements. So again, I have the index.htm and the main.css files open. Now, this time I went into the 04_07 folder and into the finished_file folder, so I'm opening from there. For the banner, I'm going to scroll down to about line 270 or so, and we go there. There is my banner style. And again, I'm previewing this in the browser, so we can sort of visualize kind of the solution that's happening here. Okay, now the banner paragraph is the one that I'm having to position. Now, I had to go ahead and take in the account of the padding of this when I set the width and the height values. So, taking the padding into account, I've set a height value that's equal to the height of the banner above it, and…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Relative positioning7m 59s
-
(Locked)
Absolute positioning8m 59s
-
(Locked)
Fixed positioning4m 23s
-
(Locked)
Controlling stacking order8m 31s
-
(Locked)
Clipping content8m 21s
-
(Locked)
Controlling content overflow5m 38s
-
(Locked)
Positioning elements: Lab3m 59s
-
(Locked)
Positioning elements: Solution3m 52s
-
(Locked)
-
-
-
-
-