From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 23,000 courses taught by industry experts.
Clipping content - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Clipping content
One of the things that absolutely positioned elements allow us to do that we can't do with other element types is to use the clip property. Now the clip property allows us to essentially crop an element and its contents. Let's take a look at that by opening up clipping.htm, which you can find in the 04_05 directory. And the page structure of this one has changed a little bit. Instead of our normal three div tags that we have been using, essentially we have a section with a class of container, and now inside of that we have a div that has a paragraph inside of it as well. So we want a little bit more content inside of this so that you can actually see the clipping taking place. So essentially we are just going to crop that content down a little bit. I am going to preview that in the browser for you, so you can see what's kind of going on here, and here is the content that we are going to be clipping. You can see it's being positioned using absolute positioning. So what values can we…
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)
-
-
-
-
-