http://cdlh2f.kesug.com/homework2-html.html?i=1
I have to add code to format my header and footer, but I do not know where this goes.
This is what I am trying to enter I don’t know where it should go in my code.
You’ll have to put it on your style tag you have on your head tag, where you put the CSS you added before on that page.
3 Likes
So when I put in under line 9, the header is still red, not green .
Sorry, I’m new to all of this and unsure how to get it to work.
After you applied the CSS code it should look like this on my side (I had to use Inspect Element and had to exactly copy it to make it work; also sorry if I cut some parts of it while I was taking the screenshot but the border extends to the end):
If you need the background to be different on those elements then you’ll have to add the background-color property to the styling for the elements with classes header and footer. Here is the documentation for that property:
3 Likes
I have gone and added it in, but I’m messing the yellow lines now.
You misspelled solid on the property value for the border that was supposed to be 2px solid yellow but is 2px soild yellow; it’s just a small typo though, nothing disastrous, and can be corrected easily by inverting the order of the letters.
4 Likes
Do you have an answer for my footer being at the top of the page?
Oh, I only looked at the typo. Instead of top on the styling for the element with class footer you’ll have to use the bottom property so that it stays down.
2 Likes
I have moved on to the next thing my instructor asked us to do, which is kind of working. Everything seems to be formatted the same, but the background is now white instead of black.
Here is what he is asking
Here is my code in cssex.css
body {background: black;
color: White;
}
a {color: Gray;}
.header {border: 2px solid yellow;
height: 75px;
width: 100vw;
position: absolute;
top: 0px;
left: 0px
}
.header h1 {text-align: center;}
.footer{border: 2px solid yellow;
height: 75px;
width: 100vw;
position: absolute;
bottom: 0px;
left: 0px
}
.middle{position: absolute;
left: 0px;
top: 75px;
bottom: 75px;
display: flex;
flex-flow: row;
width: 100vw;
border: 2px solid yellow
}
.sidebar{border: 2px solid yellow;
width: 200px;
}
.sidebar a:hover {font-style:italic;}
.sidebar a:visited {color: Green;}
.sidebar a:active {font-size: larger;}
.mainbody {border: 2px solid yellow;
flex-grow: 1
}
</style>
Please pay careful attention to the instructions you were given. It says:
take all the stuff IN the style tags and put it into a separate file
Emphasis added. Because the CSS file should only contain the things IN the style tags, not the style tags themselves.
4 Likes
Okay, I thought that it meant to take the style tags, too. Thank you!!
Now, when I load the webpage, the background is still white instead of black.
Please clear the browser cache by pressing a few times Ctrl + F5 while viewing your website.
If that doesn’t help (because some browsers are stubborn) then follow these instructions
here you forgot to close the div tag with >
and a few more mistakes is present in the HTML code.
6 Likes
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.