7. Headings, paragraphs, and lists. paragraph tags not producing text


#1



I added p tags but text will not appear.


<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
        <div id="header"<h1>Tony Garcia</h1></div>
        <div class="left"<p>2009-2011</p></div>
        <div class="right"</div>
        <div id="footer"</div>
    </body>
</html>


#2

After class and id you are missing >

Like this:

<div id="header"> <h1>

#3

That's what I have written.


#4

You haven't closed any of your opening div tags at all..


#5

^yours
Nope, look closely

 <div class="left"> <p>2009-2011</p></div>

^mine


#6

Thanks guys! Another thing I noticed is the text in my left and right are showing up underneath the header.


#7

You need to show me your CSS then only I can help you regarding that


#8

#header  {
    border-radius: 5px;
    background-color: #808080;
    height: 20%;
    width: 100%;
    position:fixed;
    z-index:1;
}

.left  {
    border-radius: 5px;
    background-color: #808000;
    height: 90%;
    width: 40%;
    float:left;
}

.right  {
    border-radius: 5px;
    background-color: #808000;
    height: 90%;
    width: 40%;
    float:right;
}

#footer  {
    border-radius: 5px;
    background-color: #808080;
    height: 20%;
    width: 100%;
    clear:both;
}

#9

What do you mean underneath the header?
The left and right div's are under the header.

What lesson is this?


#10

Build a Resume, 7 Headings, paragraphs, and lists. I am adding the paragraph to the left and list to the right. The text is not visible until I scroll down. Then I can see the text because the header moves slightly down the page.


#11

You can push your .left and .right down, using margin:

.left, .right {
  margin-top: 20%;
}

#12

Tried it. Shrinks left but when the page is scrolled to the top the text is blocked by the header. Also, I tried background-size attribute (is attribute the right word)?


#13

I got .left and .right to push down with margin-top:10%.

Here is what my code looks like:

#header  {
    border-radius: 5px;
    background-color: #808080;
    height: 20%;
    width: 100%;
    position:fixed;
    z-index:1;
}

.left  {
    border-radius: 5px;
    background-color: #808000;
    height: 90%;
    background-size: contain;
    float:left;
    margin-top:10%;

}

.right  {
    border-radius: 5px;
    background-color: #808000;
    height: 90%;
    width: 90%;
    float:right;
    margin-top:10%;
    
}

#footer  {
    border-radius: 5px;
    background-color: #808080;
    height: 20%;
    width: 100%;
    clear:both;
}

Thanks stetim91!