"Fundamental CSS comprehension" assessment


(Mauro Di Bert) #21

@chrismills could you help me with this? I’m sorry if this is not the proper way but it’s what i found being really newby! Tks!:


(A.J.) #22

Hello,
I have a question concerning line-height and how it works.
When I’ve reached the question about sizing the line-height I’ve tried to experiment to understand how it works. But without success.
If we follow exercise we have a h2 element inside a header element who has set height property to 3em(30px) and padding to 1em(10px). So I’ve tried to experiment and see how my h2 element will align in the content area of header element. h2 set to have margin = padding = 0 and I’ve set the font-size of the text inside h2 element to be 3em(30px) to occupy whole content area. I thought this should align the text in the content area. But without success.
The problem if I do not understand how line-height or text inside and element (who’s in his turn inside an element header) work further work with HTML and CSS will get more confusing.
Can some one explain how line-height behave? I have impression that there is some hidden line-height by default. But even when I unset line-height the 30px text wont align in the header element.
Thanks.firefox_line_height_wtf


(adilson) #24

@RickSanch3z Your <h2> element must have 20px (2em) as font size, that’s what the assessment asks so you need to stick with that. Now, what they are asking is to align the heading in the header in a vertical way using only line-height, which takes either unitless values or px, em, percentages, etc. For our purposes, we have a height of 3em in our header (container) and 2em in our heading (content), so if we want to fill the content in the container we need to increase the content’s height by 1.5 times (3em/2em) and that’s the value you need for line-height.


(Jeff Tseng) #25

Hi,my css is here. Can give me some feedback?
/* General styles - put these straight into your stylesheet */

body {
margin: 0;
}

html {
font-family: ‘Helvetica neue’, Arial, ‘sans serif’;
font-size: 10px;
background-color: #ccc;
}

/* Selectors to be matched up with rulesets /
/

.card article img
.card footer
.card header
.card
*/

/* Rulesets to be matched up with selectors */

.card article img{
max-height: 100%;
float: right;
}

.card footer{
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
border-radius: 0 0 1.5em 1.5em;
}

.card header{
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
border-radius: 1.5em 1.5em 0 0;
}

.card{
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}

.card header,.card footer {
height: 3em;
padding: 0.8em;
}

h2,p {
margin: 0;
}

.card article{
height: 12em;
background-color: rgba(0,0,0,0.2);
color: antiquewhite;
padding-left: 1em;
padding-top: 1em;
}

h2{
font-size: 2em;
line-height: 1.5;
}

.card footer p{
font-size: 1.5em;
line-height: 1.5;
}


(Chris Mills) #26

Hi Jeff,

Your code looks like it is definitely nearly there; nice work.

You can check your code against ours, see:


#27

Dear Chris,

I was hoping you could take a quick look at my code and give some feedback. The px value inherited from the html gave me a pause, but an easy fix once I realized everything needs to be calculated with 10px as basis instead of the usual 16px.

For whatever reason however, I can’t get the sizing of the whole box quite right. There’s this shadow under it, which is, I’m assuming, where the whole box should extend to (there’s no shadow in the example in the assessment article), but doesn’t.

The result is the following: shadow

Here’s the code:

/* General styles */
body {
margin: 0;
}

html {
font-family: ‘Helvetica neue’, Arial, ‘sans serif’;
font-size: 10px;
background-color: #ccc;
}

.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}

/* #1 */
.card header, .card footer {
height: 3em;
padding: 1em;
/box-sizing: border-box;/
}

/* #2 */
.card header h2, .card footer p {
margin: 0;
}

/* #3 */
.card article {
height: 12em;
background-color: rgba(0, 0, 0, 0.4);
}

/* #4 */
.card header h2 {
font-size: 2em;
line-height: 1.5;
}

/* #5 */
.card footer p {
font-size: 1.5em;
line-height: 2;
}

/* #6 */
.card article p {
padding: 1em;
color: white;
}

/* Header style */
.card header {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
border-radius: 1.5em 1.5em 0 0;
}

/* Footer style */
.card footer {
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
border-radius: 0 0 1.5em 1.5em;
}

/* Main business card content */
.card article img {
max-height: 100%;
float: right;
}

Thanks.


(Chris Mills) #28

Hi Martin,

Sorry for the slow reply! I’ve had a look at your code, and compared it to our finished version. The thing causing the problem is that you haven’t removed the default margins the browser automatically sets on headings and paragraphs from those in the header and footer, so that extra vertical height is putting the alignment of everything slightly wrong.

If you add this into your code:

.card h2, .card p {
  margin: 0;
}

You should see the whole thing line up nicely.