I'm having trouble getting the navigation background image to match the height of my page, and I've tried various methods suggested on this platform with no success. As a beginner in HTML5 and CSS, please excuse me if this is a basic question. This is the CSS code I have:
body {
background-color: #FF9933;
}
header {
background-image: url(orangesquares.png);
}
h1 {
background-color: #FFFFFF;
opacity: 0.6;
padding: 10px;
width: 275px
}
h2 {
color: #FF9933;
}
nav {
background-image: url(orangesquares.png);
float: left;
width: 200px;
margin-top: 0;
Margin-bottom: 0;
font-weight: bold;
}
nav ul {
list-style-type: none;
background-color: #FFFFFF;
opacity: 0.6;
padding: 10px;
}
#rightcolumn {
margin-left: 205px;
background-color: #ffffff;
color: #000000;
width: 80%;
}
.content {
padding: 10px 20px 0 20px;
}
#footer {
text-align: center;
font-size: 11px;
}
a:link {
color: #0033FF;
}
a:visited {
color: #0033FF;
}
figure {
width: 500px;
border: 1px solid #FF9933;
padding: 5px;
}
figcaption {
text-align: center;
font-size: 2em;
}
This is the HTML code for my index page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sims 3 Open House</title>
<meta charset="utf-8">
<meta name="description" content="Sims 3 Open House provides information on houses included in the Sims 3 bin, such as what furniture is included and how many squares big the rooms are." />
<meta name="keywords" content="Sims 3, the sims 3, the sims, sims, open house, house, houses, home, homes, lots and houses bin, bin, premade, premade houses, lot size, house size, furniture" />
<link type="text/css" href="openhouse.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Sims 3 Open House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li><br>
<li><a href="index.html#onebedroom">One Bedroom Homes</a></li>
<ul>
<li>Cabin Fever</li>
<li>Super Shack</li>
</ul>
<li><a href="index.html#twobedrooms">Two Bedroom Homes</a></li>
<ul>
<li>Ginger</li>
<li>Oak Grove Bungalow</li>
</ul>
<li><a href="index.html#threebedrooms">Three Bedroom Homes</a></li>
<ul>
<li>Cornucopia</li>
<li>Doubleday Lodge</li>
</ul>
<li>Contact Us</li>
</nav>
<article>
<div id="rightcolumn">
<div class="content">
<h2>Welcome</h2>
<p>Are you trying to choose a house from the Sims 3 bin but unsure where to start? Wondering about their interior design or room sizes? Interested in their furniture options? Look no further! I've categorized the bin houses by the number of bedrooms to make your search easier. Each house's page features detailed layout information, room dimensions, included furniture, lot size, and price. All screenshots were captured in <a href="http://www.thesims3.com/assetDetail.html?assetId=7016943">Sunset Valley 2</a>. </p>
<a id="onebedroom"><h2>One Bedroom Homes</h2></a>
<figure>
<img src="cabinfever.jpg" width="500px" alt="The front facade of the home Cabin Fever." />
<figcaption>
Cabin Fever
</figcaption>
</figure> <figure>
<img src="supershack.jpg" width="500px" alt="The front facade of the home Super Shack." />
<figcaption>
Super Shack
</figcaption>
</figure>
<a id="twobedrooms"><h2>Two Bedroom Homes</h2></a>
<figure>
<img src="ginger.jpg" width="500px" alt="The front facade of the home Ginger." />
<figcaption>
Ginger
</figcaption>
</figure>
<figure>
<img src="ogb.jpg" width="500px" alt="The front facade of the home Oak Grove Bungalow." />
<figcaption>
Oak Grove Bungalow
</figcaption>
</figure>
<a id="threebedrooms"><h2>Three Bedroom Homes</h2></a>
<figure>
<img src="cornucopia.jpg" width="500px" alt="The front facade of the home Cornucopia." />
<figcaption>
Cornucopia
</figcaption>
</figure>
<figure>
<img src="doubleday.jpg" width="500px" alt="The front facade of the home Doubleday Lodge." />
<figcaption>
Doubleday Lodge
</figcaption>
</figure>
</div>
<br>
<div id="footer">
<footer>
Home | One Bedroom Homes | Cabin Fever | Super Shack | Two Bedroom Homes | Ginger | Oak Grove Bungalow | Three Bedroom homes | Cornucopia | Doubleday Lodge | Contact Us
<br>
Copyright © 2015 Natasha Schmidt
</footer>
</div>
</body>
</html>