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>
Related
Below is the CSS that effects a div with three p's. I can't figure out how to reduce the "white space" above the first p within the border.
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
I can create the same border around just one p and the border will wrap tightly around the top of the p, but I want one boarder around all 3 p's.
Does that make sense? Technically, there is also "white space" below the last p but I'm okay with how that looks visually.
Thanks for the help!
Below is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<h1 style="text-align: center; line-height: 0px">Snow Leopard</h1>
<!-- photo credit: https://patrickwiltrout.wordpress.com/, image
taken by ? -->
<img src="snow-leopard.jpg" alt="Snow Leopard" style="border-radius:
5px">
<div id="animal-info">
<p id="interesting-fact">Snow leopards are unable to roar
because they have different, less developed vocal chords than
other leopards
and big cats.</p>
<ul id="facts">
<li><strong><span>Scientific Name</span>:</strong>
<em>Panthera Uncia</em></li>
<li><strong><span>Average Length</span>:</strong> <em>80-135
cm</em></li>
<li><strong><span>Average Lifespan</span>:</strong> <em>10-12
years</em></li>
<li><strong><span>Habitat</span>:</strong> <em>Highlands of
Central Asia</em></li>
</ul>
<p id="summary">Known for their elusive nature, snow leopards
are referred to by locals as “mountain ghosts.” As one of the
most mysterious species on the planet, the snow leopard remains
one of the least understood, and seen, of the big cats.</p>
</div>
</div>
</body>
</html>
Below is the CSS:
#container {
font-family: "Tahoma", sans-serif;
max-width: 256px;
padding: 4px;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 2px 3px 50px grey;
}
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#interesting-fact {
font-style: italic;
}
#facts {
list-style-type: none;
margin-left: -40px;
}
You got two ways to do this
First you can tagert the first p child of your div and remove the padding top
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#animal-info p:first-child {
margin-top: 0;
}
<div id="animal-info">
<p>Cat</p>
<p>Dog</p>
<p>Fish</p>
</div>
Or you can adjust the top padding of your div
padding: top right bottom left;
Hope this helps :)
#animal-info {
max-width: 256px;
padding: 0px 8px 8px 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
<div id="animal-info" >
<p>Cat</p>
<p>Dog</p>
<p>Fish</p>
</div>
This would be the end result in your example using the first child method
#container {
font-family: "Tahoma", sans-serif;
max-width: 256px;
padding: 4px;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 2px 3px 50px grey;
}
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#animal-info p:first-child{
margin-top: 0px;
}
#interesting-fact {
font-style: italic;
}
#facts {
list-style-type: none;
margin-left: -40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<h1 style="text-align: center; line-height: 0px">Snow Leopard</h1>
<!-- photo credit: https://patrickwiltrout.wordpress.com/, image
taken by ? -->
<img src="snow-leopard.jpg" alt="Snow Leopard" style="border-radius:
5px">
<div id="animal-info">
<p id="interesting-fact">Snow leopards are unable to roar
because they have different, less developed vocal chords than
other leopards
and big cats.</p>
<ul id="facts">
<li><strong><span>Scientific Name</span>:</strong>
<em>Panthera Uncia</em></li>
<li><strong><span>Average Length</span>:</strong> <em>80-135
cm</em></li>
<li><strong><span>Average Lifespan</span>:</strong> <em>10-12
years</em></li>
<li><strong><span>Habitat</span>:</strong> <em>Highlands of
Central Asia</em></li>
</ul>
<p id="summary">Known for their elusive nature, snow leopards
are referred to by locals as “mountain ghosts.” As one of the
most mysterious species on the planet, the snow leopard remains
one of the least understood, and seen, of the big cats.</p>
</div>
</div>
</body>
</html>
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.
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 am having some trouble with a site that I have to make for school. I've been troubling with it for a few days now. The problem is that my CSS styling is not showing up. Everything validates on my HTML page, and everything on the CSS page validates with the exception of my background image and a hlsa error. The image name is "background" and I am getting this error:
18 header Value Error : background-image Parse Error ("Module3/background.jpeg")
29 h1 Value Error : color 0 is not a color value : hlsa(0,0%,0%,0.2)
My stylesheet:
body
.gradient
{background-color:#666666;
background-image: linear-gradient(to bottom, #ffffff, #666666);
font-family: Arial, Helvetica, sans-serif;
Margin:0px
;
}
#container { background-color: white;
width:960px;
padding:20px;
margin-left:auto;
margin-right:auto;
box-shadow:5px 5px 5px #1e1e1e;
border-radius:15px}
header {background-image: ("Module3/background.jpeg");
background-repeat: No-repeat;
height:150px;
border:1px;
border-color: black;
border-radius:15px;
}
h1 {font-family:Impact, sans-serif;
font-size:4em;
padding-left:15px;
color: hlsa(0,0%,0%,0.2);}
h2 { font-family: Impact, Sans-serif;
font-size: 2em;
color: black;}
.photo {float:right;}
footer {border-style: solid;
border-top: thick;
font-size:.8em;
font-style: italic; }
And my HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My name</title>
<LINK href="Module3/assignment3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="w3-container">
<!--My required class information
-->
<h1>My Name</h1>
<h2>Education Goals</h2>
<img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200">
<ul>
<li>my goals</li>
<li>Graduate from my school</li>
</ul>
<h2>Hobbies/Interests</h2>
<ul>
<li>Reading</li>
<li>Volunteering</li>
</ul>
<h2>Favorite Web Sites</h2>
<ul>
<li>Wikipedia</li>
<li>The Shakespearean Insulter</li>
</ul>
<footer>
<p> © me</p>
</footer>
</div>
</body>
</html>
To use the background-image selector, you must put the value in a url(). Example:
background-image: url("Module3/background.jpeg");
Make sure the image is being pointed to correctly also.
Keep you code clean and well formatted. Open developer tools and inspect broken properties. If you are not sure that you can write properties without making mistakes, use emmet or similar utilities.
body,
.gradient {
background-color: #666;
background-image: linear-gradient(to bottom, #fff, #666);
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
#container {
background-color: white;
width: 960px;
padding: 20px;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 5px #1e1e1e;
border-radius: 15px;
}
header {
background-image: url("Module3/background.jpeg"); /* Be sure that path is exist */
background-repeat: no-repeat;
height: 150px;
border: 1px;
border-color: black;
border-radius: 15px;
}
h1 {
font-family: Impact, sans-serif;
font-size: 4em;
padding-left: 15px;
color: hsla(0, 0%, 0%, 0.2);
}
h2 {
font-family: Impact, Sans-serif;
font-size: 2em;
color: black;
}
.photo {
float:right;
}
footer {
border-style: solid;
border-top: thick;
font-size:.8em;
font-style: italic;
}
<div class="w3-container">
<!--My required class information-->
<h1>My Name</h1>
<h2>Education Goals</h2>
<img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200">
<ul>
<li>my goals</li>
<li>Graduate from my school</li>
</ul>
<h2>Hobbies/Interests</h2>
<ul>
<li>Reading</li>
<li>Volunteering</li>
</ul>
<h2>Favorite Web Sites</h2>
<ul>
<li>Wikipedia</li>
<li>The Shakespearean Insulter</li>
</ul>
<footer>
<p> © me</p>
</footer>
</div>