| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/JimMartinson/Classes/CST1021/Labs/ |
Upload File : |
Lab 7 - Layout with Style
Total possible points: 15
-15 if the CSS Validation Service or Markup Validation Service report errors. No further grading will be done.
Deductions for any elements required by the lab that are not present or correct:
-10 if the article/aside pairs do not align vertically on a wide enough browser window.
-5 for each incorrect width.
-5 if the footer does not stay below the last aside.
-2 for each missing declaration, element, or like group.
-1 for each incorrect declaration, element, or like group.
-1 for any additional css declarations or html elements that have errors.
There are some things I expect. If they are incorrect you will lose the following:
Work submitted incorrectly: -2 pts. This covers errors such as incorrect files names, incorrect file formats, poor formating, etc.
Second and subsequent submission of work for grading: -2 pts.
Work submitted late: -2 pts per week.
I reserve the right not to apply the deduction points at my absolute discretion.
-1.5 Work submitted late.
-1.5 Second and subsequent submission of work for grading.
-1 Work submitted incorrectly. Your files were not contained in a Lab07 folder.
If you need help correcting this, please contact me.
-1 Work submitted incorrectly. Your `Lab07` folder is misnamed `Lab_07`.
-1 Work submitted incorrectly. You files were not contained in a Lab07 folder.
Instead they were in the root of your zip file.
=e
Lab07.html:
-15 The Markup Validation Service at https://validator.w3.org/ reported errors.
You really must validate your html before submitting your assignment.
=e
Lab07.css:
-15 The CSS Validation Service at https://jigsaw.w3.org/css-validator/validator.html.en reported errors.
You really must validate your css before submitting your assignment.
=e
Lab07.html:
OK.
h1 header article aside article aside footer
Step 2. Create a web page named Lab07.html.
Step 2.1. Copy the content of your Lab01.html document into the Lab07.html file.
Step 2.2. Fix any errors you had in Lab 1 so this lab will display correctly.
-15 Step 2.2; Without a corrected Lab 1 to start from you cannot get this lab to work.
Correct the problems with Lab 1, wait for me to grade it, and then perform this lab.
Step 2.3. Change the Lab 1 references to Lab 7.
Step 2.4. Change the Lab01 reference to Lab07.
-2 Step 2.4; Line 6; Incorrect value for link tag href attribute. The external css file does not load.
You linked to Lab01.css. I continued grading after fixing this.
Step 2.5. Add extra content to your first aside so that it has as many lines of text displayed as the first article.
-2 Step 2.5; You do not have enough content in your first aside element.
-5 You used internal styles. They must be moved to your external style sheet.
-1 The entire content of your header section is in an h2 element.
-3 Not all elements are inside the border.
This is because only the header is not floated so the body ends just after it.
Floated element float "above" the body and do not extend it. Search for css clear.
Lab07.css:
OK.
Lab07.css:
@charset "utf-8";
* { box-sizing: border-box; }
html { }
body { border:1px solid black; padding:1em; margin:1em auto; width:90%; }
header { background-color: silver; margin-bottom:1em; }
main { overflow:hidden; }
article { background-color:#dfd; float:left; margin-bottom:1em; min-width:350px; padding-right:1em; width:70%; }
aside { background-color:#bdb; float:right; margin-bottom:1em; min-width:150px; padding-left:1em; width:30%; /**/padding-top:1.25em;/**/ }
article > h3 { /** /margin-top:0px;/**/ }
footer { background-color:silver; clear: both; }
html { border: black solid 1px; margin: 2.5%; padding: 1em; }
body { margin-left: auto; margin-right: auto;}
header { background-color: silver; }
article { background-color: orange; float: left; min-width: 350px; width: 70%; margin-top:10px; }
aside { background-color: darkorange; float: right; min-width: 150px; width: 30%; margin-top:10px; }
footer { background-color: silver; }
Lab07.css:
Step 3. Create an external style sheet named Lab07.css.
-5 Step 3; You did not place your css style declarations in an external Lab07.css file as required.
Do not use internal or inline styles.
3.1 Copy the content of your Lab01.css document into the Lab07.css file.
3.2 Change the comment to: /* Lab 7 External Style Sheet - Firstname Lastname */
3.3 Create styles to:
-5 Step 3.3; There was no requirement to set the height of the content.
Your use of `height:90vh` forces content to display outside (below) the body if the page is short enough or the content tall enough.
3.3.1 Content of the page
-5 Step 3.3.1; You did not style the content of the page as required.
You have a style for content. There is no content element in HTML5. Did you mean to use body?
-2 Steps 3.3.1 and 3.3.3; With a 1px border, the width of the article and aside elements are 2px wider than the 70% and 30% you want.
Either add a `box-sizing: border-box;` declaration to each so the border becomes part of the width or remove the border.
-0 Steps 3.3.1 and 3.3.3; With the background-color so dark, your text is unreadable.
Either lighten the background or color. (maybe add color: white;)
Step 3.3.1.1 Limited to 90% of the window width.
-5 Step 3.3.1.1; Line 10; The max-width declaration does not allow the body to extend to 90% of the windows width.
-5 Step 3.3.1.1; The content is not limited to 90% of the windows width.
Change the margin or style the body width instead.
You use of 'width: 90em;' also stops the article/aside pairs to adjust to the page width.
-5 Step 3.3.1.1; The content is not limited to 90% of the windows width.
Instead you have transformed every element to display at 90%.
Step 3.3.1.2 Centered.
-1 Step 3.3.1.2; The page content is not centered as required.
Search for css body center everything.
Step 3.3.1.3 With a solid border 1 px wide colored black.
-1 Step 3.3.1.3; Missing a solid border, 1 px wide, colored black.
-1 Step 3.3.1.3; The border is not 1 px wide.
Step 3.3.1.4 With 1 em of space between the border and all content. (Ignore header until example fixed)
-1 Step 3.3.1.4; You do not have 1em of space between the border and all content.
This is because you styled the html element instead of the body.
You also have 2em below the footer.
-1 Step 3.3.1.4; You do not have 1em of space between the border and all content.
You have 2em above the h1 heading and 2em below the footer.
-3 Steps 3.3.1.4, 3.3.1.5, 3.3.1.6; Without the border these are impossible to grade.
-1 Step 3.3.1.4; Missing 1 em of space between the border and all content.
Search for css padding.
-1 Step 3.3.1.4; You do not have 1em of space between the border and all content.
You have 2em of space below the footer.
I believe this is because the body has 1em of padding and the footer has a margin-bottom.
Does the padding do the work?
-3 Step 3.3.1.4; You do not have 1em of space between the border and all content.
You have 1.5em.
This is because you styled the html element and the body has a user-agent margin of 8px;
This happens with all elements in the body.
Either style the body element instead or remove the user-agent margin from the body.
-1 Step 3.3.1.4; You have 2em of space between the bottom of the footer and the body border, not 1em.
Does the footer need a margin-bottom? Does the body padding set 1em of space for you?
-1 Step 3.3.1.4; You have 2em of space below the footer.
I believe this is because of the p inside your footer.
The p causes 1em bottom margin. Then the body has 1em of padding. Try it without the p.
-1 Step 3.3.1.4; You have more than 1em of space below the footer.
I believe this is because you set all margins for html. You should only set left and right margins.
-2 Step 3.3.1.4; Your page does not allow the aside to line up with the article unless your page is a minimum of 1796px.
So why is this? You are trying to accomplish step 3.3.1.4. 1 em of space between the border and all content.
You are doing this with margin-left on the article and margin-right on the aside.
As well as margins on the header and footer. While this works, it is difficult to get it right.
Not for the header and footer, but for the article and aside.
The short answer is to use padding on the body to keep the other elements 1em away from the border.
The long answer is trying to mix a width that is in percent with a margin that is in em.
The body is 90% of the page width, that's .9 * 1920 for a HD screen, or 1728px.
This is essentially 85.4em wide. I know, I know. If an em of 1 = 16px then it should be 108.
But, the 16px for a font is not the width.
The size of a font can be characterized as the height of the font, but even this is just a loose and pragmatic description; characters may extend above and below the levels defined by the size of the font.
It turns out that 1em has a width that is about 20px.
Now, if you take 70% of that you get 59.78em. 30% is 25.62px.
Then you take 2em away for spacing, one from each.
59.78 - 1 = 58.78 which is about 68.03% of the page width.
25.62 - 1 = 24.62 which is about 28.5% of the page width.
Your settings are 69% and 29%. A good guess, but only that.
As you can see, mixing % and em is a pain.
But if you pad the body then the elements in it do not need a left or right margin to have 1em of space.
Step 3.3.1.5 With 1 em of space between the top border and the top of the page.
-1 Step 3.3.1.5; There is not 1 em of space between the top border and the top of the page.
Search for css margin.
Step 3.3.1.6 With 1 em of space between the bottom border and the bottom of the page.
-1 Step 3.3.1.6; There is not 1 em of space between the bottom border and the bottom of the page.
Search for css margin.
Step 3.3.2 Color the background of the header and footer elements to silver.
-1 Step 3.3.2; The header and footer element background colors are not silver.
-1 Step 3.3.2; Line 48; The header element background color is not silver.
-1 Step 3.3.2; Line 48; The footer element background color is not silver.
Step 3.3.3 For the article elements:
Step 3.3.3.1 Color the background to a color of your choice.
Step 3.3.3.2 Display on the left at 70% of the content width.
-2 Step 3.3.3.2; The article elements are not 70% of the page width.
You need not do a calculation. As the body is 90%, by setting the article to 70% it will display as 63%.
You need to remove the padding or use box-sizing: border-box.
You need to remove the left and right margins or use box-sizing: border-box.
-2 Step 3.3.3.2; The article elements are not 70% of the page width.
The margin-right extens the width beyond 70%, and must be removed.
Step 3.3.3.3 Set a minimum width of 350 px.
-2 Step 3.3.3.3; The article minimum width is not 350 px.
Step 3.3.4 For the aside elements:
Step 3.3.4.1 Color the background to a color that is a shade darker than the one for the article elements.
-1 Step 3.3.4.1; The aside background color is not a darker shade of the article background color.
Step 3.3.4.2 Display on the right at 30% of the content width.
-2 Step 3.3.4.2; The aside is not 30% of the page width.
Same issue here, do not calculate 30%*90%, just use 30% and it will be 30% of the body or 27% of the page.
You need to remove the padding or use box-sizing: border-box.
-2 Step 3.3.4.2; The aside is not 30% of the page width.
This is because you have 1em of padding. This adds to the width of the aside.
If you want the padding you also need to style box-sizing as border-box.
-0 Step 3.3.4.2; Line 13; You did not style the aside width to 30%.
Instead you styled the max-width. If your content was small enough the aside would not display as fully 30% of the page width.
This is the same problem you had with step 3.3.3.2 so I am not deducting an additional point.
-2 Step 3.3.4.2; The aside is displayed on the right.
Search for css float.
Step 3.3.4.3 Set a minimum width of 150 px.
-2 Step 3.3.4.3. The aside minimum width is not 150 px.
Step 3.3.5 Each article and aside pair must display aligned vertically if the page is wide enough
for them to be beside each other. (Display with the tops aligned.)
-3 Step 3.3.5; Your article/aside pairs are not aligned vertically on the page.
-2 Step 3.3.5; The second article/aside pair is not aligned vertically on the page.
This happens as the browser window is narrowed and the first aside becomes taller than the article.
The first aside pushes the second one below the start of the second article.
Try using css to clear the floats on the article element. Search for css clear.
You also lose your 1em of space between the aside and the next article.
-2 Step 3.3.5; The second article/aside pair is not aligned vertically on the page.
The first aside pushes the second one below the start of the second article.
Try using css to clear the floats on the article element. Search for css clear.
You also do not have 1em of space between the aside and the next article or between articles.
-2 Step 3.3.5; The second article/aside pair is not aligned vertically on the page.
You cannot see this because there is not enough content in your first aside and it never extends below your first article.
If you add content to your first aside you will be able see this.
The first aside pushes the second one below the start of the second article.
Try using css to clear the floats on the article element. Search for css clear.
You also lose your 1em of space between the aside and the next article.
-2 Step 3.3.5; The article and aside pairs are not displayed with the tops aligned.
You are clearing the float. Does the aside need to do this?
Step 3.3.6 Display 1em of space between the header, each article/aside pair, and the footer.
-1 Step 3.3.6; There is not 1em of space between the header and the first article/aside pair.
-1 Step 3.3.6; There is not 1em of space between the header and the first article/aside pair.
You have 2em of space. This is due to the top and bottom margins you have set.
Floated elements do not collapse margins.
article/aside pair.
-1 Step 3.3.6; There is not 1em of space between each article/aside pair.
You have none. Search for css margin-bottom.
-1 Step 3.3.6; There is not 1em of space between each article/aside pair.
You have 1.5em of space.
This is use to top and bottom margin settings and no margin collapse for floated elements.
-1 Step 3.3.6; There is not 1em of space between each article/aside pair.
You have .5em of space. Check the article bottom margin.
-1 Step 3.3.6; There is not 1em of space between each article/aside pair.
You have 2em of space. This is due to the top and bottom margins you have set.
Floated elements do not collapse margins.
last article/aside pair and the footer.
-1 Step 3.3.6; There is not 1em of space between the last article/aside pair and the footer.
You have none. Search for css margin-bottom.
Note that floated elements are not in the normal flow and margin collapse does not apply.
-1 Step 3.3.6; There is not 1em of space between the last article/aside pair and the footer.
You have .5em of space. This is because of how floated and non-floated element margins collapse.
-1 Step 3.3.6; There is not 1em of space between the last article/aside pair and the footer.
You have 2em of space.
Note that floated elements are not in the normal flow and margin collapse does not apply.
Try using only a bottom margin.
Search for css margin.
-1 Step 3.3.6; There is not 1em of space between the last article/aside pair and the footer.
You have 2em of space. This is due to the top and bottom margins you have set.
Floated elements do not collapse margins.
-1 Step 3.3.6; There is not 1em of space between the last article/aside pair and the footer.
It does have 1em if the aside extends below the article.
-1 Step 3.3.6; There is not 1em of space between the last article/aside pair and the footer.
It is displaying before the second article/aside pair.
Note that floated elements are not in the normal flow.
Should the article elements have the same margin-bottom as you have for your aside elements?
-1 Step 3.3.6; When the browser window gets too narrow you have a 2em margin between the article and aside, not 1em.
-1 Step 3.3.6; When the browser window gets too narrow you have no margin between the aside and the footer. You should have 1em.
-1 Step 3.3.6; Missing 1em of space between the header, each article/aside pair, and the footer as required.
Search for css margin.
-1 Step 3.3.6; You have 2em of space between the bottom of the footer and the body border, not 1em.
Does the footer need a margin-bottom? Does the body padding do this for you?
Step 3.3.7 The footer element must display below the second article and aside.
-4 Step 3.3.7; The footer does not display below the last aside correctly. Search for css clear.
-4 Step 3.3.7; By floating the footer there is nothing to anchor the bottom of the body and elements display below the body.
In order to keep the footer below the last article/aside pair you must clear the floats.
-1 Step 3.3.7; Your footer displays below the body.
Does it need a float or max-width?
-1 Step 3.3.7; The footer does not display the full width of the page.
This is because you changed the display to inline-block.
This does cause the footer to display below the article/aside pairs but changes the width to the content.
This did, however cause the body to extend below the footer.
Try clearing the floats to keep the footer below the article/aside pairs and extend the body.
-1 Step 3.3.7; The footer does not have 1em of space between it and the article/aside pair above it.
It has 2em.
This is because your article has a bottom margin and you footer has a top margin.
Normally these would collapse but one of the elements is display: inline-block and the other is display: block.
-1 Step 3.3.7; The footer does not have 1em of space between it and the article/aside pair above it.
This is because floated elements are 'above' the page and the margin-top you have for the footer has nothing to 'push' against.
Try using clearing the floats.
Step 3.3.8 Style the h1 element so it has a 1px solid silver border.
-1 Missing stop bogy tag.
While this is allowed by HTML 5, it is not allowed by me.
-1 Missing stop html tag.
While this is allowed by HTML 5, it is not allowed by me.
Very well done.
+1 You code is so well formatted and easy to read that I am giving you back a point for this.