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.
Related
There are spaces in my wrapper and I can't get rid of them. Even though I had set paddings to 0 there is still space. I don't know what the issue is. I don't want to put the wrapper inside a body tag so I can change what I want later.
I'm new to HTML :)
My Code
/*Mohammed Alnujaydi*/
body {background-color:#FCEBB6; color:#221811; font-family: Verdana, Geneva, sans-serif ;
background-image: url(images/background.gif);}
header {background-color:#D2B48C; height: 150px; background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;}
h1 { padding-top:45px; padding-left:220px; font-size:3em;}
h2{padding-left:3em; padding-right:2em;}
h3{padding-left:3em; padding-right:2em;}
P{padding-left:3em; padding-right:2em;}
div{padding-left:3em; padding-right:2em;}
ul{padding-left:3em; padding-right:2em;}
dl{padding-left:3em; padding-right:2em;}
nav
{font-weight:Bold; text-align: center; word-spacing: 1em; font-size:1.5em; padding-top:10px ;
float:left; width:200px;
}
nav a { text-decoration: none; }
nav a:link { color: #FEF6C2;}
nav a:visited { color: #D2B48C;}
nav a:hover { color: #CC9933;}
nav ul { list-style-type:none; padding-left:0em;}
h4{ background-color:#D2B48C; font-size:1.2em; padding-left:3em; padding-bottom:0em; padding-right:2em; text-transform:uppercase; border-bottom-style; clear:left;}
main{padding-left:0em; padding-right:0em; padding-bottom:2em; padding-top:0em; background-color: #FEF6C2;margin-left:200px;}
.details {padding-left:20%; padding-right:20%; overflow: auto;}
img{padding-left:10px; padding-right:10px;}
footer {background-color:#D2B48C; font-size:.60em; font-style:italic;text-align:center; padding-bottom:10px;
border-top :solid 2px; color:#221811;}
#wrapper { width: 80%; margin-left: auto;
margin-right: auto; background-color:#FEF6C2; min-width:900px; max-width:1280px; box-shadow: 5px 5px; }
*{ box-sizing: border-box; }
#heroroad {background-image:url(images/heroroad.jpg);background-size:100%;height:250px;}
#heromugs{background-image:url(images/heromugs.jpg);background-size:100%; height:250px;}
#heroguitar {background-image:url(images/heroguitar.jpg);background-size:100%; height:250px;}
.floatleft {float:left; padding-right:2em; padding-bottom:2em;}
header, nav, main, footer { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaJam Coffee House Menu
</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li>
Home</li> <li> Menu </li> <li> Music</li> <li>Job </li> </ul> </nav>
<main>
<div id ="heromugs">
</div>
<h2> Coffee at JavaJam</h2>
<p>Indulge in our locally roasted free-trade coffee and enjoy the aroma,
the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you — purchase — ask the barista for details
<dl>
<dt> <strong> Just Java </strong></dt>
<dd>Regular house blend, decaffeinated coffee, or flavor of the day.<br>
Endless Cup $3.00</dd>
<dt> <strong> Cafe au Lait</strong></dt>
<dd>House blended coffee infused into a smooth, steamed milk.<br>
Single $2.00 Double $4.00</dd>
<dt> <strong> Iced Cappuccino </strong></dt>
<dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.<br>
Single $4.75 Double $6.00 </dd>
</dl>
</main>
<br>
<footer>
Copyright © 2018 JavaJam Coffee House<br>
Malnujaydi#dbq.edu
</footer>
</div>
</body>
</html>
and this is a picture for clarification (the space with the blue)
There was a css style in your code giving all div elements padding of padding-left:3em; padding-right:2em, so I removed that. Is the result below what you had in mind?
body {
background-color: #FCEBB6;
color: #221811;
font-family: Verdana, Geneva, sans-serif;
background-image: url(images/background.gif);
}
header {
background-color: #D2B48C;
height: 150px;
background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;
}
h1 {
padding-top: 45px;
padding-left: 220px;
font-size: 3em;
}
h2 {
padding-left: 3em;
padding-right: 2em;
}
h3 {
padding-left: 3em;
padding-right: 2em;
}
P {
padding-left: 3em;
padding-right: 2em;
}
/* div{padding-left:3em; padding-right:2em;} */
ul {
padding-left: 3em;
padding-right: 2em;
}
dl {
padding-left: 3em;
padding-right: 2em;
}
nav {
font-weight: Bold;
text-align: center;
word-spacing: 1em;
font-size: 1.5em;
padding-top: 10px;
float: left;
width: 200px;
}
nav a {
text-decoration: none;
}
nav a:link {
color: #FEF6C2;
}
nav a:visited {
color: #D2B48C;
}
nav a:hover {
color: #CC9933;
}
nav ul {
list-style-type: none;
padding-left: 0em;
}
h4 {
background-color: #D2B48C;
font-size: 1.2em;
padding-left: 3em;
padding-bottom: 0em;
padding-right: 2em;
text-transform: uppercase;
border-bottom-style;
clear: left;
}
main {
padding-left: 0em;
padding-right: 0em;
padding-bottom: 2em;
padding-top: 0em;
background-color: #FEF6C2;
margin-left: 200px;
}
.details {
padding-left: 20%;
padding-right: 20%;
overflow: auto;
}
img {
padding-left: 10px;
padding-right: 10px;
}
footer {
background-color: #D2B48C;
font-size: .60em;
font-style: italic;
text-align: center;
padding-bottom: 10px;
border-top: solid 2px;
color: #221811;
}
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #FEF6C2;
min-width: 900px;
max-width: 1280px;
box-shadow: 5px 5px;
}
* {
box-sizing: border-box;
}
#heroroad {
background-image: url(images/heroroad.jpg);
background-size: 100%;
height: 250px;
}
#heromugs {
background-image: url(images/heromugs.jpg);
background-size: 100%;
height: 250px;
}
#heroguitar {
background-image: url(images/heroguitar.jpg);
background-size: 100%;
height: 250px;
}
.floatleft {
float: left;
padding-right: 2em;
padding-bottom: 2em;
}
header,
nav,
main,
footer {
display: block;
}
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li>
Home</li>
<li>
Menu
</li>
<li>
Music
</li>
<li>
Job
</li>
</ul>
</nav>
<main>
<div id="heromugs">
</div>
<h2> Coffee at JavaJam</h2>
<p>Indulge in our locally roasted free-trade coffee and enjoy the aroma, the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you — purchase — ask the barista for details
<dl>
<dt>
<strong> Just Java </strong>
</dt>
<dd>
Regular house blend, decaffeinated coffee, or flavor of the day.<br> Endless Cup $3.00
</dd>
<dt>
<strong> Cafe au Lait</strong>
</dt>
<dd>
House blended coffee infused into a smooth, steamed milk.<br> Single $2.00 Double $4.00
</dd>
<dt>
<strong> Iced Cappuccino </strong>
</dt>
<dd>
Sweetened espresso blended with icy-cold milk and served in a chilled glass.<br> Single $4.75 Double $6.00
</dd>
</dl>
</p>
</main>
<br>
<footer>
Copyright © 2018 JavaJam Coffee House<br>
Malnujaydi#dbq.edu
</footer>
</div>
I removed div{padding-left:3em; padding-right:2em;} because it adds to all divs including your #wrapper.
Then put margin:0; padding:0; on the body (some browsers add that in so start every project with this style rule on the body).
/*Mohammed Alnujaydi*/
body {background-color:#FCEBB6; color:#221811; font-family: Verdana, Geneva, sans-serif ; padding:0; margin:0;
background-image: url(images/background.gif);}
header {background-color:#D2B48C; height: 150px; background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;}
h1 { padding-top:45px; padding-left:220px; font-size:3em;}
h2{padding-left:3em; padding-right:2em;}
h3{padding-left:3em; padding-right:2em;}
P{padding-left:3em; padding-right:2em;}
ul{padding-left:3em; padding-right:2em;}
dl{padding-left:3em; padding-right:2em;}
nav
{font-weight:Bold; text-align: center; word-spacing: 1em; font-size:1.5em; padding-top:10px ;
float:left; width:200px;
}
nav a { text-decoration: none; }
nav a:link { color: #FEF6C2;}
nav a:visited { color: #D2B48C;}
nav a:hover { color: #CC9933;}
nav ul { list-style-type:none; padding-left:0em;}
h4{ background-color:#D2B48C; font-size:1.2em; padding-left:3em; padding-bottom:0em; padding-right:2em; text-transform:uppercase; border-bottom-style; clear:left;}
main{padding-left:0em; padding-right:0em; padding-bottom:2em; padding-top:0em; background-color: #FEF6C2;margin-left:200px;}
.details {padding-left:20%; padding-right:20%; overflow: auto;}
img{padding-left:10px; padding-right:10px;}
footer {background-color:#D2B48C; font-size:.60em; font-style:italic;text-align:center; padding-bottom:10px;
border-top :solid 2px; color:#221811;}
#wrapper { width: 80%; margin-left: auto;
margin-right: auto; background-color:#FEF6C2; min-width:900px; max-width:1280px; box-shadow: 5px 5px; }
*{ box-sizing: border-box; }
#heroroad {background-image:url(images/heroroad.jpg);background-size:100%;height:250px;}
#heromugs{background-image:url(images/heromugs.jpg);background-size:100%; height:250px;}
#heroguitar {background-image:url(images/heroguitar.jpg);background-size:100%; height:250px;}
.floatleft {float:left; padding-right:2em; padding-bottom:2em;}
header, nav, main, footer { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaJam Coffee House Menu
</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li>
Home</li> <li> Menu </li> <li> Music</li> <li>Job </li> </ul> </nav>
<main>
<div id ="heromugs">
</div>
<h2> Coffee at JavaJam</h2>
<p>Indulge in our locally roasted free-trade coffee and enjoy the aroma,
the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you — purchase — ask the barista for details
<dl>
<dt> <strong> Just Java </strong></dt>
<dd>Regular house blend, decaffeinated coffee, or flavor of the day.<br>
Endless Cup $3.00</dd>
<dt> <strong> Cafe au Lait</strong></dt>
<dd>House blended coffee infused into a smooth, steamed milk.<br>
Single $2.00 Double $4.00</dd>
<dt> <strong> Iced Cappuccino </strong></dt>
<dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.<br>
Single $4.75 Double $6.00 </dd>
</dl>
</main>
<br>
<footer>
Copyright © 2018 JavaJam Coffee House<br>
Malnujaydi#dbq.edu
</footer>
</div>
</body>
</html>
You are adding padding to every div element with this line of css:
div{padding-left:3em; padding-right:2em;}
Remove that and your issue is resolved.
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.
So I have to create a website using notepad++ and coding in HTML and CSS.
I have 4 different files and want to move the headings to the left so they are in line with the other text.
I was wondering if you guys could help me out with that.
I also want to make it look professional and visually appealing. Where should I go to learn how to do that?
I also want to add a comment box where a customer can comment and it will show up in the webpage. Please help.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Playthrough Gaming Cafe</title>
<meta charset="utf-8">
<link rel="stylesheet" href="playthrough.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Playthrough Gaming Cafe</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Jobs</li>
<li>Feedback</li>
</ul>
</nav>
<main>
<div id="gaminglogo"></div>
<h2>Playthrough Gaming Cafe</h2>
<p>We're located on the corner of Roosevelt Rd and Westchester Rd. Come level up your gaming experience at Playthrough!</p>
<h3>Playthrough Gaming Cafe features:</h3>
<ul>
<li>Adult Zone with fully stocked bar for customers 21+!</li>
<li>Teen Zone with Snack Bar!</li>
<li>Old Generation Gaming Room!</li>
<li>Multitude of systems and tvs.!</li>
<li>Open Late on weekends and holidays.</li>
</ul>
<div>
3453 Westchester RD<br>
WestChester IL 60189<br>
<a id="mobile" href="tel:888-599-5959">888-599-5959</a> <span id="desktop">888-599-5959</span><br><br>
</div>
</main>
<footer>
Copyright © 2016 Playthrough Gaming Cafe<br>
kennypatel#gmail.com
</footer>
</div>
</body>
</html>
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Playthrough Game Cafe</title>
<meta charset="utf-8">
<link rel="stylesheet" href="playthrough.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Playthrough Gaming Cafe</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Jobs</li>
<li>Feedback</li>
</ul>
</nav>
<main>
<div id="videogamesshelf"></div>
<h2>Gaming at Playthrough</h2>
<p>Come and play your favorite games at Playthrough. We have all the old classic systems and also the new current. Rent out some games, play before buy, and also indulge in some beverages at our very own Playthrough Cafe. </p>
<table>
<tr>
<th>Playthrough Gaming</th>
<td>We have all the game systems and more than enough tvs to play them. From Nintendo NES to Xbox One Slim, we have it all.<br>Entry Fee: $15.00 </td>
</tr>
<tr>
<th>Playthrough Cafe</th>
<td> Come enjoy our robust and smooth coffee, energy drinks, and soda. <br>Can: $0.75 Bottle: $1.25</td>
</tr>
<tr>
<th>Playthrough Adult</th>
<td>We have a seperate area for customer's 21+ with a fully stocked bar.<br>Entry Fee: $25. </td>
</tr>
</table>
</main>
<footer>
Copyright © 2016 Playthrough Gaming Cafe<br>
kennypatel#gmail.com
</footer>
</div>
</body>
</html>
jobs.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Playthrough Gaming Cafe Jobs</title>
<meta charset="utf-8">
<link rel="stylesheet" href="playthrough.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Playthrough Gaming Cafe</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Jobs</li>
<li>Feedback</li>
</ul>
</nav>
<main>
<h2>Jobs at Playthrough Gaming Cafe</h2>
<p>Want to work at JavaJam? Fill out the form below to start your application. Required fields are
marked with an asterisk (*).</p>
<form method="post" action="http://webdevbasics.net/scripts/javajam8.php">
<label for="myName">*Name: </label>
<input type="text" id="myName" name="myName" required="required">
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
<label for="myExperience">*Experience: </label>
<textarea name="myExperience" id="myExperience" rows="2" cols="20" required="required"></textarea>
<input type="submit" value="Apply Now">
</form>
</main>
<footer>
Copyright © 2016 Playthrough Gaming Cafe<br>
kennypatel#gmail.com
</footer>
</div>
</body>
</html>
feedback.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Playthrough Gaming Cafe</title>
<meta charset="utf-8">
<link rel="stylesheet" href="playthrough.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Playthrough Gaming Cafe</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Jobs</li>
<li>Feedback</li>
</ul>
</nav>
<main>
<div id="gaminglogo"></div>
<h2>Leave us some feedback at Playthrough Gaming Cafe</h2>
<p>Every week we hold a brainstorming session where we look at the feedback from customers. WE are here to CATER YOUR NEEDS!.</p>
<p>We are a new company, and we want gamers to have a place where they feel safe. Please leave some feedback what YOU, the customer thinks would help us deliver the best gaming experience.</p>
<form method="post" action="http://webdevbasics.net/scripts/javajam8.php">
<label for="myName">*Name: </label>
<input type="text" id="myName" name="myName" required="required">
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
<label for="myComment">*Feedback: </label>
<textarea name="myComment" id="myComment" rows="2" cols="20" required="required"></textarea>
<input type="submit" value="Post Feedback!">
</form>
</main>
<footer>
Copyright © 2016 Playthrough Gaming Cafe<br>
kennypatel#gmail.com
</footer>
</div>
</body>
</html>
playthrough.css
* {box-sizing: border-box; }
header, nav, main, footer {display: block; }
body { background-color: FFFFFF;
background-image: url(Blue-Background.gif);
color: #67D9E3;
font-family: Verdana, Arial, sans-serif;
background-image: url(Blue-Background.gif);
}
#wrapper { background-color: #0E828C;
margin-right: auto;
margin-left:auto;
max-width: 1280px;
min-width: 900px;
box-shadow: 3px 3px 3px #666666;
width: 80%
}
header {background-color: #FFFFFF;
background-image: url(gaminglogo.jpg);
background-repeat: no-repeat;
height: 150px;
}
h1 { padding-top: 45px;
padding-left: 220px;
font-size: 3em;
text-align: left;
}
nav { text-align: center;
font-weight: bold;
font-size: 1.5em;
padding-top: 10px;
float: left;
width: 200px;
}
nav a {text-decoration: none;}
nav a:visited{ color: #1EEDED; }
nav a:link { color: #08BB17; }
nav a:hover { color: #7F30BC; }
nav ul {list-style-type: none;
padding-left: 0;}
footer{ background-color: #FFFFFF;
font-size: small;
font-style: italic;
text-align: center;
border-top: 2px #221811 solid;
padding-bottom: 10px;
}
main {padding: 0 0 2 em 0;
margin-left: 200px;
background-color:1EEDED;
}
main h2, main h3 main h4, main p, main div, main ul, main dl {padding-left: 3em;
padding-right: 2em; }
h4 {background-color: #2678B3;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 0;
text-transform: uppercase;
border-bottom: 1px solid #000033;
clear: left;
}
img {padding-right: 10px;
padding-left: 10px;}
.details {padding-right: 20%;
padding-left: 20%;
overflow: auto;}
.floatleft {float:left;
padding-bottom: 20px;
padding-right: 20px; }
#videogamesshelf {background-size: 80% 80%;
background-image: url(videogamesshelf.jpg);
height: 250px;
background-repeat: no-repeat;
margin: auto;
width: 50%;
}
#gamehead {background-size: 80% 80%;
background-image: url(gaminglogo.jpg);
height: 250px;
width: 50%
}
#videogameheart{background-size: 100% 100%;
background-image: url(videogameheart.png);
height: 250px;}
#mobile { display: none; }
#desktop { display: inline; }
table { width: 90%;
margin: auto;
border-spacing: 0;
background-color: #FFFFCC; }
td, th { padding: 10px; }
tr:nth-of-type(odd) { background-color: #0E828C; }
form { padding: 2em; }
label { float: left;
display: block;
text-align: right;
width: 8em;
padding-right: 1em; }
input, textarea { display: block; margin-bottom: 1em; }
#mySubmit { margin-left: 9.5em; }
audio { display: block; margin-top: 1em; }
#media only screen and (max-width: 1024px) {
body { background-image: none; }
#wrapper { width: auto;
min-width: 0;
margin: 0;
padding: 0;
box-shadow: none; }
header { border-bottom: 5px solid #DAF6F2; }
h1 { margin-top: 0;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 2.5em; }
nav { float: none;
width: auto;
padding-top: 0;
margin: 10px;
font-size: 1.3em; }
nav li { display: inline-block; }
nav a { padding: 1em;
width: 8em;
font-weight: bold;
border-style: none; }
nav ul { padding: 0;
margin: 0; }
#videogamesshelf,#gamehead ,#videogameheart{ margin: 0; padding: 0; }
main { padding: 0;
margin: 0;
font-size: 90%; }
}
#media only screen and (max-width: 768px) {
header { background-image: url(gamingmonkey.jpg);
height: 128px; }
h1 { font-size: 2em;
text-align: center;
padding-left: 0; }
nav { margin: 0; }
nav a { display: block;
padding: 0.2em;
width: auto;
border-bottom: 1px solid #FEF6C2; }
nav li { display: block; }
main { padding-top: 1px; }
h2 { padding: 0.5em 0 0 0.5em;
margin-right: 0.5em; }
.details { padding-left: 0; padding-right: 0; }
#videogamesshelf,#gamehead,#videogameheart { background-image: none; height: auto; }
.floatleft { padding-left: 0.5em; padding-right: 0.5em; }
#mobile { display: inline; }
#desktop { display: none; }
}
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>