I cant figure this out and its for a project, if you can help me out asap ill marry you.
I have a 2 border images that I need to repeat around my content. 2 of the images are simple borders that will go to the left and bottom of my content. The 3rd image is a picture that will be in the bottom left where the 2 borders meet.
What I need to do is have 4 div containers. 3 for the images, and 1 to position them all.
Only my corner image is showing and im not sure if i positioned the divs right. Can someone please help asap!
HTML:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on HTML and XHTML 5th Edition
Additional Cases
Case 2
Cornucopia Online Home Page
Author:
Date:
Filename: corn.htm
Supporting files: bottom.jpg, corner.jpg, cornlogo.jpg, cornstyles.css,
countdown.js, left.jpg, tday.js, turkey.jpg
-->
<title>Cornucopia Online</title>
<link rel="stylesheet" type="text/css" href="cornstyles.css" />
<script language="javascript" src="tday.js"></script>
<script language="javascript" src="countdown.js"></script>
</head>
<body>
<div id="boxContent"> <!-- border holder-->
<div id="corner"> <!-- Corner Meetup Image-->
<div id="bottom"> <!--Bottom Image-->
<div id="left"> <!-- left image-->
<div id="head">
<div id="countdown">
<script type="text/javascript">
function countdown() {
}
</script>
</div>
<img src="cornlogo.jpg" alt="Cornucopia Online" />
</div>
<div id="main">
<ul id="links">
<li><a href="corn.htm">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="recipe.htm">Recipes</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul id="links2">
<li><a href="corn.htm">Home</a></li>
<li><a href="#">Products</a></li>
<li class="sub"><a href="#">Turkey</a></li>
<li class="sub"><a href="#">Poultry</a></li>
<li class="sub"><a href="#">Ham</a></li>
<li class="sub"><a href="#">Pastas</a></li>
<li class="sub"><a href="#">Cheeses</a></li>
<li class="sub"><a href="#">Dressings</a></li>
<li class="sub"><a href="#">Herbs and Spices</a></li>
<li><a href="recipe.htm">Recipe of the Week</a></li>
<li class="sub"><a href="#">Breakfast</a></li>
<li class="sub"><a href="#">Lunch</a></li>
<li class="sub"><a href="#">Dinner</a></li>
<li class="sub"><a href="#">Low Calorie</a></li>
<li class="sub"><a href="#">Vegetarian</a></li>
<li><a href="#">Newsletter</a></li>
<li class="sub"><a href="#">Winter</a></li>
<li class="sub"><a href="#">Spring</a></li>
<li class="sub"><a href="#">Summer</a></li>
<li class="sub"><a href="#">Autumn</a></li>
<li class="sub"><a href="#">Holiday</a></li>
<li><a href="#">My Account</a></li>
<li class="sub"><a href="#">Login</a></li>
<li class="sub"><a href="#">Shopping Cart</a></li>
<li class="sub"><a href="#">Recent Orders</a></li>
<li class="sub"><a href="#">Profile</a></li>
<li><a href="#">FAQS</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="article">
<h1>Welcome</h1>
<img src="turkey.jpg" alt="" />
<p class="firstPara">Cornucopia Online began as a small poultry
shop in rural Connecticut. Once famous only locally for the quality
of its poultry, dressings, herbs, and spices, Cornucopia is fast becoming
a leading provider of poultry-based dishes and products throughout
the Web.</p>
<p>If you've shopped here before, welcome back! If this is your first visit,
a wealth of delicious tastes and aromas await you. Please explore our
Products page for a sampling of our tasty dishes.</p>
<p>Cornucopia Online is an ideal entertaining resource for your next banquet
or family gathering. While we specialize in turkey, we also provide
delicious pastas, cheeses, hams, and side dishes. Cornucopia Online has
everything you need, including entertaining tips and serving advice.</p>
<p>Cornucopia Online is dedicated to ensuring safe and speedy delivery of our
food products. Please take advantage of our SureFresh delivery system
employing air tight, fully insulated packages that keep contents cool for
as long as 72 hours in external temperatures of over 100 degrees Fahrenheit.
We stand by our guarantee that the food products you receive from us are in
the same fresh condition as when they left our facility.</p>
<p>We use FedEx, UPS, or the U.S. Postal Service to ensure the timely delivery
of your order. Orders submitted before 4pm ET can be scheduled to arrive the
following business day (or any business day thereafter) for just $9.99!</p>
</div>
</div>
</div> <!--bottom border image-->
</div> <!-- LEFT border image-->
</div> <!--CORNER border image-->
</div> <!--BOXCONTENT-->
<address>
Cornucopia Online •
781 Bridge Street •
Bristol, CT 06010 •
1 - (800) 555 - 1088
</address>
</div>
</body>
</html>
CSS:
/*
New Perspectives on HTML and XHTML 5th Edition
Additional Cases
Case 2
Cornucopia Online Style Sheet
Author:
Date:
Filename: cornstyles.css
Supporting Files: none
*/
* {margin: 0px; padding: 0px}
body {font-size: 14px; margin: 0px; padding: 0px;
font-family: 'Lucida Grande', Verdana, sans-serif}
#pageContent {width: 780px; position: absolute; top: 0px; left: 0px}
#head {margin-left: 10px}
#main {width: 100%}
#links {list-style-type: none; text-align: center; width: 100%}
#links li {float: left; width: 12%; font-size: 12px; text-align: center}
#links li a {display: block; width: 100%; text-decoration: none; color: rgb(173, 89, 28);
border: 1px solid rgb(173, 89, 28)}
#links li a:hover {color: white; background-color: rgb(173, 89, 28)}
#links2 {clear: left; float: right; width: 160px; font-size: 13px;
list-style-type: none; padding: 5px; margin-top: 10px;
background-color: rgb(244, 244, 233)}
#links2 li.sub {text-indent: 20px}
#links2 li.newgroup {margin-top: 25px; border-top: 1px solid black}
#links2 a {text-decoration: none; color: black;
display: block; width: 100%; border-bottom: 1px dashed rgb(244, 244, 233)}
#links2 a:hover {color: black; background-color: rgb(224, 224, 213);
border-bottom: 1px dashed rgb(173, 89, 28)}
#article {width: 560px}
#article h1 {font-weight: normal; font-size: 32px; letter-spacing: 10px;
color: rgb(173, 89, 28); margin: 5px 0px}
#article h2 {font-weight: normal; font-size: 18px; letter-spacing: 5px;
color: rgb(173, 89, 28); margin: 5px 0px}
#article img {float: right; margin: 0px 10px 10px 10px}
#article p {margin: 15px 10px 15px 0px}
#article ul {list-style-type: disc; margin-left: 20px; font-size: 10px}
#article ol {margin-left: 30px; font-size: 10px}
address {font-style: normal; font-size: 10px; text-align: center;
padding-bottom: 10px}
/* IMAGE BORDER PROPERTIES */
#corner {
background-image: url('corner.jpg');
background-repeat: no-repeat;
background-position: left bottom;
}
#boxContent {
width: 740px;
padding: 0px 0px 40px 40px;
}
#bottom {
background-image: url('bottom.jpg');
background-position: bottom;
background-repeat: repeat-x;
}
#left {
background-image: url('left.jpg');
background-position: left;
background-repeat: repeat-y;
}
/* END IMAGE BORDER PROPERTIES */
p.firstPara:first-line {
font-variant: small-caps;
}
P.firstPara:first-letter {
float: left;
font-size: 350%;
line-height: 0.8;
margin: 0px 5px 5px 0px;
color: rgb(173,89,28);
font-family: "Times New Roman";
}
#countdown {
width: 150px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
padding: 5px;
font-size: 10px;
float: right;
}
