Skip to content

Latest commit

 

History

History
257 lines (226 loc) · 7.57 KB

making-an-image-card.md

File metadata and controls

257 lines (226 loc) · 7.57 KB
Raw
layout title desc markbot_submit hide_show_for_marks extra_tutorials goal fork steps
lesson
Making an image card
Use CSS position absolute and relative to make an image card.
true
true
title url
Position & z-index
position-zindex
title url
Position & z-index slide deck
/courses/web-dev-1/position-zindex/
title url
CSS layout cheat sheet
css-layout-cheat-sheet
before notes
We’re going to look at how to make the image card pattern, concentrating on position absolute and relative.
label text
Important
The two important bits are the “Plant-eater” label and the “Stegosaurus” heading and how they’re on top of the image.
label text
Type it, type it real good
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!
title before folders after notes
Set up project
Before we get started, create some files and get ready.
label type
making-an-image-card
folder
label indent
index.html
1
label type indent
css
folder
1
label indent
main.css
2
1. Make an `index.html` 2. Make a `main.css` in your `css` folder.
label text
Naming conventions
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions).
title before code_lang code_file code lines notes
Add HTML boilerplate
*Use the `html5`, `viewport` and `css` snippets.*
html
index.html
<!DOCTYPE html> <html lang="en-ca"> <head> <meta charset="utf-8"> <title>Image card</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="css/main.css" rel="stylesheet"> </head> <body> </body> </html>
num text
7
Don’t forget to attach the CSS file.
label text
HTML snippets
Create the boilerplate with `html5`, `viewport` & `css`
title before code_lang code_file code lines
Add CSS boilerplate
*Use the `borderbox` snippet.*
css
css/main.css
html { box-sizing: border-box; font-family: sans-serif; } *, *::before, *::after { box-sizing: inherit; } .img-flex { display: block; width: 100%; }
num text
10-13
Make a class to use on any image to make it scalable.
title before code_lang code_file code lines notes
Write the HTML for the card
Let’s start with a little HTML before moving into the CSS guts.
html
index.html
⋮ </head> <body> <article class="card"> <header class="card-head"> <h2 class="card-title">Stegosaurus</h2> <span class="card-label">Plant-eater</span> <img class="img-flex" src="https://placehold.it/640x480" alt=""> </header> <div class="card-body"> <p>The Stegosaurus is an armoured dinosaur with distinctive back plates and tail spikes.</p> </div> </article> </body> </html>
num fade
2-3
true
num text
5
Semantically an `<article>` makes sense because this can stand by itself.
num text
6
The important bits are in the `<header>` because a group will be needed for CSS later.
num text
9
Don’t forget the `img-flex` class to make the image flexible.
num fade
16-17
true
label text
Notice
There’re classes on just about everything to distinguish them from other elements in our page.
title before code_lang code_file code lines after
Some basic CSS for the card
Before we get into the positioning stuff, let’s get the basic card look done.
css
css/main.css
⋮ display: block; width: 100%; } .card { overflow: hidden; border: 1px solid #ccc; border-radius: 0 6px 6px; } .card-body { padding: .2rem 1rem; } .card-title { margin: 0; padding: .3rem 1rem; } .card-label { padding: .3rem 1rem .3rem calc(1rem - 4px); border-left: 4px solid green; background-color: rgba(255, 255, 255, .6); }
num fade
2-4
true
num text
7
The `overflow: hidden` is here to chop the corners of the image off.
num text
22
The crazy `calc()` is just really to make the text align properly when it also has a border. The `calc()` value allows us to get the browser to calculate between two different units.
With a refresh what you should see is this: ![](stage-1.jpg) **Make sure to shrink the width of your browser—the image card is completely flexible.**
title before code_lang code_file code lines after
Position the card title
Now let’s position the `.card-title` so that it sits at the bottom of the image.
css
css/main.css
.card-title { ⋮ margin: 0; padding: .3rem 1rem; position: absolute; bottom: 0; left: 0; width: 100%; }
num fade
3-4
true
num text
5
Setting it to `position: absolute` allows us to move it around using coordinates.
num text
6-7
Using `left` and `bottom` to move it to the bottom of the image.
num text
8
The `width` is there because `absolute` elements shrink to be as small as possible.
Notice how the title is now at the bottom of the screen, that’s because the coordinates for `absolute` default to position against `<body>` ![](stage-2.jpg) **Make sure to shrink the width of your browser—the image card is completely flexible.**
title before code_lang code_file code lines after
Fix card title position
To fix the positioning of the `.card-title` we need to find a parent element that we can set `position: relative` Using `relative` will reset the coordinates so the `bottom` and `left` position against the parent container instead. *Luckily, it’s inside the `<header class="card-head">` tag. So let’s target that!*
css
css/main.css
⋮ border-left: 4px solid green; background-color: rgba(255, 255, 255, .6); } .card-head { position: relative; }
num fade
2-4
true
num text
7
Using `position: relative` on this element will reset the coordinate system for all `absolute` children.
Now the `.card-title` snaps right into place. ![](stage-3.jpg)
title before code_lang code_file code lines
Position the card label
Since the `.card-head` is already `relative` all we need to do is just put `absolute` and coordinates onto `.card-label` Because it’s parent container is `relative` it will automatically position itself against that box.
css
css/main.css
.card-label { ⋮ padding: .3rem 1rem .3rem calc(1rem - 4px); border-left: 4px solid green; background-color: rgba(255, 255, 255, .6); position: absolute; left: 0; top: 0; }
num fade
3-5
true