When I preview my page I expect to see a div(wrapper) centered with a width of 940px surrounding the other elements of the page. Also in my css I made the div(wrapper) have a black background-color. For some reason there is no evidence of this wrapper and there is no obvious error in my html or css.Also my css is connected to my html and all the other elements can be formatted except for my wrapper. Why?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<link href="css/styles.css" type="text/css"
rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>
Exotic Honey
</h1>
</header>
<main>
<form action="http://compass.northseattle.edu/~aali/it111/form/formhandler.php" method="post">
<fieldset>
<legend>Place Order</legend>
<label>Name</label><input type="text" name="name">
<label>Email</label><input type="email" name="email">
<label>Payment</label>
<ul>
<li><input type="radio" name="payment" value="mastercard">MasterCard</li>
<li><input type="radio" name="payment" value="visa">Visa</li>
<li><input type="radio" name="payment" value="americanexperess">AmericanExpress</li>
</ul>
<label>Honeys</label>
<ul>
<li><input type="checkbox" name="honey" value="pitcairn">Pitcairn</li>
<li><input type="checkbox" name="honey" value="sage">Sage</li>
<li><input type="checkbox" name="honey" value="lavendar">Lavendar</li>
</ul>
<label>Continents</label>
<select name="regions">
<option value="na">North America</option>
<option value="sa">South America</option>
<option value="eu">Europe</option>
<option value="as">Asia</option>
<option value="af">Africa</option>
<option value="oc">Oceania</option>
</select>
<input type="submit" value="submit">
</fieldset>
</form>
</main>
<aside>
<figure>
<img class="right" src="images/honeypic.jpg" alt="honey jar">
<figcaption>Rare exotic honey</figcaption>
</figure>
</aside>
<footer>
<ul>
<li>Copyright ©</li>
<li><a href="">Terms of use</a></li>
<li><a href="http://compass.northseattle.edu/~aali/it111/index.html">Web design by Alas</a></li>
</ul>
</footer>
</div>
</body>
</html>
Here's my css
<style>
div#wrapper{
width:940px;
margin:20px auto;
background: black;
}
header{
color:goldenrod;
height:auto;
background-color:purple;
margin:20px auto;
text-align:center;
font-style:italic;
}
footer{
color:goldenrod;
height:auto;
background-color:darkred;
clear:both;
}
footer ul{
list-style-type: none;
margin-left:20px;
}
footer li{
float:left;
margin-right:30px;
}
main{
background-color:beige;
float:left;
width: 500px;
}
aside{
width:250px;
float:right;
margin-right:30px;
padding-right:30px;
background-color:darkgray;
}
label{
display:block;
}
input[type=submit]{
width:auto;
}
input[type=radio]
input[type=checkbox]{
width:auto;
height:auto;
margin-right:5px;
margin-left:5px;
}
form li{
list-style-type: none;
margin-left:auto;
}
legend{
font-size:1.3em;
font-style:italic;
}
.right{
width:250px;
height:250px;
padding-right:30px;
margin-right:30px;
}
</style>
Here's the preview
Aucun commentaire:
Enregistrer un commentaire