I received some feedback about a past assignment warning me about my images being blurry. But I can't figure out how to fix it. The assignment gives very clear descriptions of what to do but I did everything it asked.
I have to do the following for the images:
Add a new selector id named yurthero. In CSS code declarations to configure 300px height and to display the coast.jpg background image to fill the space(use background-size: 100% 100%;) without repeating.
How can I stop my image from being blurry? It seems to me that the stretching forces it to blur.
Attached below is the html5, the css3, and the image I am using.
/* pacific.css for assignment #3 by Caleb Latimer */
body{
background-color: #FFFFFF;
color : #666666;
font-family: Verdana;
background-image: url(background.jpg);
}
h1{
background-color: #000033;
color : #FFFFFF;
font-family: Georgia;
line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
background-position: right;
}
nav{
font-weight: bold;
background-color: #90C7E3;
padding: 5px 5px 5px 5px;
}
h2{
color: #3399CC;
font-family: Georgia;
}
dt{
color: #000033;
font-weight: bold;
}
.resort{
color: #000033;
font-size: 1.2em;
}
footer{
font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px 10px 10px 10px;
}
#wrapper{
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #ffffff;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px #828282;
}
h3{
color: #000033;
}
main{
padding-left: 20px;
padding-right: 20px;
display:block;
}
#homehero{
background-size: 100% 100%;
height: 300px;
background-image: url(coast.jpg);
background-repeat: no-repeat;
}
#yurthero{
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero{
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
nav a{
text-decoration: none;
}
<!-- Chapter 4 Homework by Caleb Latimer -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pacific Trails Resort</title>
<link rel="stylesheet" href="pacific.css" /> <!-- Uses the pacific.css stylesheet inside of folder -->
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
Home
Yurts
Activities
Reservations <!-- Doesn't lead anywhere no requirements given -->
</nav>
<div id ="homehero"></div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p>
<span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.
</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span> <br />
12010 Pacific Trails Road <br />
Zephyr, CA 95555<br /><br />
888-555-5555<br />
</div>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort <br />
Caleb#Latimer.com
</footer>
</div>
</body>
</html>
Well it turns out I was given the wrong pictures for the assignment. With the correct pictures they turn out as intended. Always check size, height and width dimensions on images.
Related
The objective is to setup a 2 column CSS layout. The text book in class makes it sound as easy as editing the CSS Nav by making it float left. However, it will not extend the Nav column all the way to the bottom of the page as their example shows, but it does float in the upper left.
CSS:
body{
background-color: #ffffff;
color: #666666;
font: sans-serif;
background-image: url(background.jpg);
}
header{
background-color: #000033;
color: #ffffff;
font: sans-serif;
}
nav{
float: left;
width: 90px;
position: absolute;
background-color: #90c7e3;
text-decoration: none;
font-weight: bold;
padding: 5px;
}
main{
display: block;
}
h1{
line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72 px;
margin-bottom: 0;
}
h2
{
color: #3399cc;
font: serif;
}
h3
{
color: #000033;
}
dt
{
color: #000033;
font-weight: bold;
}
#resort
{
color: #000033;
font-size: 1.2em;
}
#footer
{
margin-left: 100px;
padding: 10px;
font-size: .7em;
font-style: italic;
text-align: center;
}
#wrapper
{
background-color: #ffffff;
min-width: 700px;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
width: 80%;
box-shadow: 5px 5px 5px #000033;
}
#homehero
{
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero
{
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero
{
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="pacific.css">
<title>Pacific Trails Resort</title>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
Home
Yurts
Activities
Reservations
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br>
888-555-5555<br>
</div>
</main>
<footer>
<div id="footer">
Copyright © 2016 Pacific Trails Resort<br>
</div>
</footer>
</div>
</body>
</html>
As I noted in my comment, you can add float right on the main element and then give the nav a height. You'll also need to restrict the width of the main element so that it fits next to the nav.
Check out this snippet to see this:
body{
background-color: #ffffff;
color: #666666;
font: sans-serif;
background-image: url(background.jpg);
position: relative;
}
header{
background-color: #000033;
color: #ffffff;
font: sans-serif;
}
nav{
width: 90px;
position: absolute;
background-color: #90c7e3;
text-decoration: none;
font-weight: bold;
padding: 5px;
height: 100%;
}
main{
display: block;
float: right;
width: 80%;
}
h1{
line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72 px;
margin-bottom: 0;
}
h2
{
color: #3399cc;
font: serif;
}
h3
{
color: #000033;
}
dt
{
color: #000033;
font-weight: bold;
}
#resort
{
color: #000033;
font-size: 1.2em;
}
#footer
{
margin-left: 100px;
padding: 10px;
font-size: .7em;
font-style: italic;
text-align: center;
}
#wrapper
{
background-color: #ffffff;
min-width: 700px;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
width: 80%;
box-shadow: 5px 5px 5px #000033;
}
#homehero
{
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero
{
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero
{
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="pacific.css">
<title>Pacific Trails Resort</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>Pacific Trails Resort</h1>
</header>
<div id="wrapper">
<nav>
Home
Yurts
Activities
Reservations
</nav>
<main>
<div id="homehero">
</div>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br>
888-555-5555<br>
</div>
</main>
</div>
<footer>
<div id="footer">
Copyright © 2016 Pacific Trails Resort<br>
</div>
</footer>
</body>
</html>
I noticed that you had a position absolute on the nav. I ran with that and positioned it relative to the body. I also moved the header and footer out of the wrapper div so that the wrapper only contains your nav and main elements. I moved the home hero into the main element so that it too will be floated right.
By wrapping the main and nav elements only in the wrapper, we can add height: 100%; to the nav element to take the full height of the wrapper. If we kept the header and footer in the wrapper, the nav would still be 100% of the height of the wrapper but now it would be too large because it doesn't discount the height of the header and the footer.
One other thing to note is that I removed the float: left; on the nav because the position: absolute; makes it irrelevant.
I want to remove the blue color above main and below main. I debug for several days, but just do not know how to fix this bug. Please help.
I attached my Page and my desire page.
body {
background-color:#FFFFFF;
background-image: url(background.jpg);
color: #666666;
font-family: Verdana, Arial, sans-serif;
}
* {
box-sizing: border-box;
}
header {
background-color: #000033;
color: #FFFFFF;
font-family: Georgia, serif;
}
h1 {
line-height: 200%;
background-image: url(sunset.jpg);
background-position: right;
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
}
nav {
font-weight:bold;
float: left;
width: 160px;
padding-top: 20px;
padding-right: 5px;
padding-left: 20px;
}
nav a {
text-decoration: none;
}
nav a:link {
color: #000033;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #FFFFFF;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
main {
padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #FFFFFF;
margin-left: 170px;
margin-top: 1px;
margin-bottom: 1px;
}
h2 {
color: #3399CC;
font-family: Georgia, serif;
}
h3 {
color: #000033;
}
dt {
color: #000033;
font-weight: bold;
}
.resort {
color: #000033;
font-size: 1.2em;
}
footer {
font-size: 0.70em;
font-style: italic;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
margin-left: 170px;
}
#wrapper {
background-color: #90C7E3;
margin-left: auto;
margin-right: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px black;
}
#homehero {
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left:170px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
header, nav, main, footer {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort :: Yurts</title>
<link href="pacific.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="yurthero"></div>
<main>
<h2>The Yurts at Pacific Trails</h2>
<dl>
<dt>What is a yurt?</dt>
<dd>Our luxuy yurts are permanent structures four feet off the ground. Each yurt has canvas walls, a wooden floor
and a roof dome that can be opened.</dd>
<dt>How are the yurts furnished?</dt>
<dd>Each yurt is furnished with a queen-size bed with down quilt and gas-fire stove. The luxury camping experience
also includes elecricity and a sink with hot and cold running water. Shower and restroom facilities are located
in the lodge.</dd>
<dt>What should I bring?</dt>
<dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and plan to
dress for changing weather with layers of clothing.</dd>
</dl>
</main>
<footer>
<small><i>Copyright © 2016 Pacific Trails Resort</i></small><br>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<link href="pacific.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset = "utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero"></div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with
panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br><br>
888-555-5555<br>
</div>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort<br>
</footer>
</div>
</body>
</html>
Your code is for two separate pages. Without having a working fiddle I would just recommend setting the margin bottom to 0px for the image and margin top 0 for the div with the white background.
You could also the the margin top for the div with the white background to minus (example: margin-top:-20px;). A quick and simple solution is to set margin-top to -30px in ur css for main and that will get you the desired effect.
https://jsfiddle.net/26f8ntwm/
main {
padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #FFFFFF;
margin-left: 170px;
**margin-top: -30px;**
margin-bottom: 1px;
padding-top:0px;
}
Your wrapper element has a blue background (#90C7E3), and since nav and footer don't have a background (i.e. their background is transparent), and they are inside #wrapper, that wrapper background color is visible in nav and footer:
#wrapper {
background-color: #90C7E3;
etc.
Solution: Just erase the first line from this rule, or give backgrounds to nav and footer.
I'm a total newbie when it comes to coding. I'm taking a class for HTML in school right now and I'm having an issue with a page I'm trying to create. I'm learning about CSS right now and in a practice page I made my box-shadow included in #container is not showing up in my div. When I open up the "answer" page to test my browser it shows up, but on my page with practically identical code it doesn't. Any help would be appreciated because this is driving me crazy. Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Bistro</title>
<meta charset="utf-8">
<style>
body {background-image: url(background.jpg);
font-family: Arial, Verdana, sans-serif;
}
h1 { background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 100px; width: 650px;
font-size: 3em;
padding-left: 150px; padding-top: 30px;
border: 1px solid #000033;
border-radius: 15px;
text-shadow: 3px 3px 3px #666;
}
h2 { color: #000033;
font-family: arial, sans-serif;
text-shadow: 1px 1px 0 #ccc;
}
#container { background-color: #ffffff;
padding: 20px;
width: 80%; min-width: 800px; max-width: 960px;
margin-right: auto;
margin-left: auto;
box-shadow: 5px 5px 5px #lelele;
}
footer { font-size: .80em;
font-style: italic;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Lighthouse Bistro</h1>
</header>
<nav>Home Menu
Directions Contact</nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are
available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-
fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with
locally-grown salad, fruit, and vegetables. </p>
</main>
<footer>Copyright © 2014 Your Name Here</footer>
</div>
</body>
</html>
The box-shadow that you are currently using doesn't actually use a color. Rather, you have #lelele rather than #1e1e1e. The different is that the first one isn't a color because you are using lowercase L's.
your #lelele is not color code So please change color and do this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Bistro</title>
<meta charset="utf-8">
<style>
body {background-image: url(background.jpg);
font-family: Arial, Verdana, sans-serif;
}
h1 { background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 100px; width: 650px;
font-size: 3em;
padding-left: 150px; padding-top: 30px;
border: 1px solid #000033;
border-radius: 15px;
text-shadow: 3px 3px 3px #666;
}
h2 { color: #000033;
font-family: arial, sans-serif;
text-shadow: 1px 1px 0 #ccc;
}
#container { background-color: #ffffff;
padding: 20px;
width: 80%; min-width: 800px; max-width: 960px;
margin-right: auto;
margin-left: auto;
box-shadow: 2px 2px 10px #ff0000;
}
footer { font-size: .80em;
font-style: italic;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Lighthouse Bistro</h1>
</header>
<nav>Home Menu
Directions Contact</nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are
available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-
fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with
locally-grown salad, fruit, and vegetables. </p>
</main>
<footer>Copyright © 2014 Your Name Here</footer>
</div>*emphasized text*
</body>
</html>
I really hope someone out there knows something about Brackets! I'm doing a project for school and it was going just fine yesterday. I have four pages, a home page, events page, contact page and about page. Somehow in the inspect element panel I have the events page loaded in the styles section and so now, no matter what I do the background image that is in the events page is loaded in all my other pages. Even if I delete it from the CSS! I can't figure it out and I have no idea how I got it there to begin with! How do I get rid of it so that I can style the pages differently with different images and all that?! Not sure how the css and html can help but I'll load it anyway.
<!doctype html>
<html>
<head>
<title>events</title>
<meta charset="utf-8">
</head>
<link href='https://fonts.googleapis.com/css?family=Miltonian+Tattoo' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Convergence' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="eventscss.css">
<body>
<div id="header">
<h1>Ready...Set...SPLASH!!</h1>
</div>
<aside class="sidebar1">
<h2>Where to?</h2>
<div id="mainnav">
<ul>
<li>Home</li>
<li>Events</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="one">
<img src="surprisedgirl.jpg" height="200" width="250">
</div>
</aside>
<article class="main">
<h2>PLAN YOUR NEXT BIRTHDAY WITH US!!</h2>
<p>Does someone have a birthday coming up? Why not plan a pool party? We have three different party packages to choose from.
You caan reserve anything from a little table, to an entire pool. We'll try our best to make sure the kiddos have the best
birthday ever. They'll be sure to talk about it for months to come. And you'll feel great knowing that you made it happen.
(Way to go!...)</p>
<p> The first Party Package that we offer is the standard Bronze Package.
You'll get three hours and ride passes for all. Skip straight to the front of the line of any slide you choose. We have party rooms for reservation or you
can choose a tent outdoors and poolside. Three large one topping pizzas, beverages, and wrist bands for the slides are all included for a set price of
$125. Limit of 10 wristbands. Additional bands can be purchaced for $2.00 per band.</p>
<p> Second choice for your party plans would be the Silver Package. Five party hours to toy around with, 15 slide wristbands,
jump to the front freedom, five large pizzas (three 1 topping, two 2-3 topping) beverages, party room or tent. All of this for only $150!</p>
<p> The third and final option that we offer is the Gold Package. This is the Mac Daddy of em' all! This package
includes all day play, unlimited wristbands, jump to the front freedom, eight large pizzas (of your choice) beverages, party room or tent, and a special Happy Birthday
message announced over the loud speaker before singing Happy Birthday! Your birthday boy or girl will feel as if they are on top of the world! This deal can be yours
for only $200! <br> Talk about a deal to be had!!</p>
</article>
<aside class="sidebar2">
<div id="img1">
<img src="goggle_kids_small.jpg" height="150" width="200">
</div>
<div id="img2">
<img src="waterparkkids.jpg" height="150" width="250">
</div>
<div id="img3">
<img src="slide-01.jpg" height="150" width="200">
</div>
</aside>
<style>
#one img {
padding-right:20px;
margin:10px;
width: 250px;
height: 300px;
padding-top: 60px;
transform: rotate(-10deg)
}
#img1 img{
padding-right:40px;
margin:10px;
width: 250px;
height: 200px;
transform: rotate(10deg);
}
#img2 img{
padding-right:40px;
margin:10px;
width: 250px;
height: 200px;
transform: rotate(-10deg);
}
#img3 img{
padding-right:40px;
margin:10px;
width: 250px;
height: 200px;
transform: rotate(10deg);
padding-top:20px;
}
</style>
<div id="footer">
<h4>Lilly's Pad 238 Main Street, Asheville NC 28804 (828)-669-4828 www.Lillyspad.com</h4>
h1{
padding-top: 15px;
margin:0;
height: 100px;
font-family:"Miltonian Tattoo";
font-size: 3em;
color:whitesmoke;
text-shadow:3px 3px black;
text-align: center;
background-image: url(pool-water-hd-inspiration-1.jpg);
background-repeat: repeat-x;
}
/*First column*/
.sidebar1 h2, .sidebar2 h2{
font-family: "Miltonian Tattoo";
text-align: center;
color: black;
text-shadow: 2px 2px white;
}
.sidebar1{
float: left;
width: 20%;
padding: 0 20px 0 10px;
background-image: url(Water-Drop-background.jpg);
height: 800px;}
#one{border-radius: 50%;
}
/*all main styles*/
#mainnav li{
list-style-type: none;
padding-top: 30px;}
#mainnav a:link{
text-decoration: none;
background-color:#feff00;
border-radius: 15px;
display: block;
background-size: 15px;
width: 100px;
padding: 5px 5px 5px 10px;
margin-bottom: 5px;
padding-right: 20px;
font-family: "Miltonian Tattoo";
color:black;
text-align: center;}
#mainnav{
background-color:#ccf3ff;
-webkit-box-shadow: -8px 11px 25px 0px rgba(0,0,0,0.68);
-moz-box-shadow: -8px 11px 25px 0px rgba(0,0,0,0.68);
box-shadow: -8px 11px 25px 0px rgba(0,0,0,0.68);
height: 300px;
border-radius: 20px;
padding-left:45px;}
.main{
float: left;
width: 60%;
height:800px;
padding: 0 20px;
background-image: url(happybirthday.jpg);
background-size: 400px;
background-repeat: no-repeat;
background-position: bottom;
}
.main h2{
font-family: "Miltonian Tattoo";
text-align: center;
font-size: 2em;
}
.main h3{font-family: "Miltonian Tattoo";}
.main p{
font-family: Convergence;
}
/*Second Column*/
.sidebar2{
background-image: url(Water-Drop-background.jpg);
height: 800px;
float: right;
width: 20%;
padding: 0 10px 0 20px;}
.sidebar2 p{
font-family: Convergence;
font-style: italic;
background-color: aliceblue;
text-align: center;
border-radius: 30px;
font-size: 0.9em;
-webkit-box-shadow: 10px 10px 14px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 14px -4px rgba(0,0,0,0.75);
box-shadow: 10px 10px 14px -4px rgba(0,0,0,0.75);
}
#footer{
background-color: #feff00;
clear: both;
height: 20px;
text-align: center;
font-style: italic;
font-size: .9em;
}
/*To keep from having float drops*/
*{
-moz-box-sizing: border-box;
box-sizing: border-box;}
This has got me stumped. I have done it before when it worked, and now it won't.
The light background that is behind the navagation bar should also be behind the body of the page. The footer should not be in it. There will be more content to go on the page but where the heading is Welcome to The Herb Place should have the light background the same as the nav bar. Even when I have written <div id="content-scroll"> in the html the div part comes up red and doesn't even recognise it.
body {
background-attachment: fixed;
background-image: url("../photos/background.jpg");
background-position: center center;
background-repeat: repeat;
background-size: 100%;
font-family: "open Sans", sans-serif;
font-size-size: medium;
font-style: normal;
line-height: 1.6em;
margin: 1px auto auto;
text-align: left;
max-width: 1024px;
}
#navigation li {
list-style: none;
display: block;
float: left;
margin: 1em;
}
#navigation li a {
display: block;
text-decoration: none;
color: #006600;
font-size: 1.6em;
font-family: Lucida Console;
font-style: italic;
margin: 0.5em;
}
#navigation li a:hover {
margin-top: 2px;
color: yellow;
}
.rectangle {
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
z-index: 300; /* the stack order: foreground */
margin: 1em 0;
background-image: url("../photos/background2.jpg");
}
#content-scroll {
background-image: url("../photos/background2.jpg");
max-width: 1024px;
background-position: center center;
background-size: 100%;
}
h1 {
color: #669933;
font-family: kristen ITC;
padding: 20px;
text-align: center center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Herb Place</title>
<link href="html/herb.css" rel="stylesheet">
</head>
<body>
<header>
<img id="logo" src="photos/logo.jpg" alt="My logo">
<!-- the body -->
<div class="rectangle">
<!-- the navigation links -->
<ul id="navigation">
<li> HOME</li>
<li> ABOUT US</li>
<li> STORE</li>
<li> TIPS & HINTS</li>
<li> CONTACT US</li>
</ul>
</div>
</header
<div id="content-scroll">
<h1> Welcome to The Herb Place</h1>
</div>
<div id="footer">
This website has been created as part of an assignment in an approval course of study for Curtin University and contains copyright<br>
material not created by the author. All copyright material used remains copyright of the respective owners and has been used here<br>
pursuant to Section 40 of the Copyright Act 1968 (Commonwealth of Australia). No part of this work may be reproduced without<br>
consent if the original copyright owners.
</div>
</body>
</html>