I am a newb here. I have been attempting to fix this code for the past couple days to no avail. I am trying to create a page that is reactive. It was working well before I added media queries and made some other small changes. I currently can not get the images to appear on the schedule and classes pages (#lounge , #mat). I also cannot get the nav bar to no longer be stuck in two columns.
index.html page
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href =yoga.css>
<title>Path of Light Yoga Studio</title>
<div id="wrapper">
<head>
<meta name="viewport"content="width-device-width,initial-scale=1.0">
</head>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<header class="home">
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<h2>Find Your Inner Light</h2>
<p><span class="studio">Path of Light Yoga Studio</span> welcomes all to experience a yoga practice in a tranquil,<br> peaceful
enviroment.Our studio offers classes at every level, from beginner to <br> advanced. Whether you are new to yoga
or have been practicing for years,<br> our dedicated instructors can modify a practice to help you improve your well-<br>being.
Let your inner light shine at the <span class="studio">Path of Light Yoga Studio</span>.</p>
<ul>
<li>Hatha, Vinyasa, Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class="clear">Path of Light Yoga Studio<br>612 Serenity Way<br>El Dorado, CA 96162
<br><br>
<a id="mobile" href="tell:888-555-555">888-555-5555</a>
<span id="desktop">888-555-5555</span>
</div>
</main>
<br><br>
<br><br>
<footer>Copyright © 2020 Path of Light Yoga Studio<br>
amanda#alcottherr.com
</footer>
</div>
schedule.hmtl
<!DOCTYPE html>
<html lang="en">>
<link rel="stylesheet" href =yoga.css>
<title>Path of Light Yoga Studio</title>
<head>
<meta name="viewport"
content="width-device-width,initial-scale=1.0">
</head>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<header class="content">
<h1>Path of Light Yoga Studio</h1>
</header>
<div id="wrapper">
<main>
<div id="loungehero"></div>
<h2>Yoga Schedule</h2>
<p> Mats, blocks and blankets provided. Please arrive 10 minutes before your class begins.
Relax in our Serenity Lounge before or after your class.
</p>
<div id="flow">
<section >
<h3>Monday - Friday</h3>
<ul>
<li>9:00am Gentle Hatha Yoga</li>
<li>10:30am Vinyasa Yoga</li>
<li>5:30pm Restorative Yoga</li>
<li>7:00pm Gentle Hatha Yoga</li>
</ul>
</section>
<section >
<h3>Saturday & Sunday </h3>
<ul>
<li>10:30am Gentle Hatha Yoga</li>
<li>Noon Vinyasa Yoga</li>
<li>1:30am Gentle Hatha Yoga</li>
<li>3:00pm Vinyasa Yoga</li>
<li>5:30pm Restorative Yoga</li>
</ul>
</section>
</div>
</main>
<br><br>
<footer>
<small><i>Copyright © 2020 Path of Light Yoga Studio<br>
amanda#alcottherr.com
</i>
</small>
</footer>
</div>
classes.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href =yoga.css>
<title>Path of Light Yoga Studio</title>
<div id="wrapper">
<head>
<meta name="viewport"content="width-device-width,initial-scale=1.0">
</head>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<header class="content">
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<div id="mathero"></div>
<h2>Yoga Classes</h2>
<div id="flow">
<section>
<h3>Gentle Hatha Yoga</h3>
<p> A 60 minute class of poses and slow movement that focuses on asana(proper alignment
and posture), pranayama (breath work), and guided meditation to foster your mind and body connection.
This class is intended for beginners and anyone wishing a grounded foundation in the practice of yoga.</P>
</section>
<section >
<h3>Vinyasa Yoga</h3>
<p>A 60 minute class that focuses on breath synchronized movement - you will inhale and exhale as you
flow energetically through yoga poses. While intended for intermediate to advanced students,
beginners are welcome to join in this class.</p>
</section>
<section >
<h3>Restorative Yoga</h3>
<p>A 90 minute class that features very slow movement and long poses.Restorative yoga is useful in
relieving stress and fostering a sense of well-being. This clamins, restorative experience is suitable
for students of any level of experience</p>
</section>
</div>
</main>
<br><br>
<footer>
<small><i>Copyright © 2020 Path of Light Yoga Studio<br>
amanda#alcottherr.com
</i>
</small>
</footer>
</div>
yoga.css
* { box-sizing: border-box;}
nav ul {display:flex;
flex-flow:row wrap;
margin:0;
font-size:1.2em;
list-style:none;}
nav li {
width:40%;
padding:0 1em 0 1em;
display:inline;}
nav{position:fixed;
top:0;
left:0;
width:100%;
padding-top:0.5em;
padding-right:0;
margin:0;
text-align:right;
background-color: white;
z-index:9999;}
nav a{display: block;
text-decoration:none;}
nav a:link{color:#3F2860;}
nav a:visited{color:#497777;}
nav a:hover {color: #A26100;}
header {background-color: #40407A;
background-image:url(sunrise.jpg);
background-size:100% 100%;
color:white;
font-size:90%;
margin-top:50px;
min-height:200px;
text-decoration:none;}
header a:link{color:#FFF;text-decoration:none;}
header a:visited{color:#FFF;text-decoration:none;}
header a:hover{color:#EDF5F5;text-decoration:none;}
h1 {text-decoration: none;}
.home {height:20vh;
padding:2em 0 0 10%;}
.content {height:20vh;
padding:2em 0 0 10%;}
#wrapper{background-color: #F5F5F5;
padding:2em;}
body {background-color: #3F2860;
color:#40407A;
font-family: Arial,
'Segoe UI',
Tahoma,
Geneva,
Verdana,
sans-serif;
margin:0}
.studio {font-style: italic;}
#mathero{background-image:url(yogamat.jpg);
background-repeat: no-repeat;
background-size:300px ;
display:none;}
#loungehero{background-image:url(yogalounge.jpg);
background-repeat: no-repeat;
background-size:300px ;
display:none;}
section {padding:0 .5em 0 .5em;}
footer {
font-size:0.6em;
font-style: italic;
text-align:center;}
#mobile{ display:inline;}
#desktop{display:none;}
#media (max-width:600px){
nav ul {display:flex;
flex-flow:row nowrap;
justify-content:flex-end;}
nav li { width:7em;}
section{ padding:0 2em 0 2em;}
#mathero{ display:block;
padding-bottom:1em;}
#loungeher0{ display:block;
padding-bottom:1em;}
#flow{display:flex;
flex-flow:row;}
#mobile{display:none;}
#desktop{display:inline;}
}
#media(min-width:1024px){
header {font-size:120%;}
.home {height: 50vh;
padding:5em 0 0 8em;}
.content {height:30vh;
padding:1em 0 0 8em;}
#wrapper {margin:auto;
width:80%;}
}
About your navbar:
You have the width of each li set to 40%, this means the 40% of your window width.
nav ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
}
nav li {
padding:0 1em 0 1em;
}
As for your pictures, the containers #loungeheroand #mathero (if you remove the display:none;) have 0 height.
Related
I'm working with my personal page.
I want to make columns out of the lists .
How can i do this .
I tried grid's and columns and it don't work . For some reason i'm thinking a web kit. Any suggestions ? I also tried to float margin , width, position , left and so forth . I'm officially stuck . I did use a max with of 960 pixels. Was that the wrong way to go ? I also centered aligned my page as well? Was that wrong as well ?
/*body styles*/
body, html{background-color:#4B88A2;}
.grid-container{display:grid;
/*grid grid-template: 1fr repeat(11,10px 1fr);*/
grid-template-columns:[left-sidebar-start] 1fr 10px 1fr[right-sidebar-end]
10px
[main-area-start]1fr reapeat(11,[gutter] 10px [row]1fr[main-area-end])
10px
[right-sidebar-start] 1fr 10px 1fr [right-sidebar-end];
grid-template-rows: [header-start] 1fr[header-end]
10px
[main-start] 1fr[main-end]
[footer-start]1fr[footer-end]
}
/*.content-wrap{max-width:950px;
margin: 0 auto;overflow:auto;padding:60px 50px; }*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*headers*/
h1,h2{font-family:'lobster', cursive;
font-size:40px;font-weight: 400;}
h1{font-size:80px;}
h3{margin:0;}
header{text-align: center;}
header{padding-top: 60px;position:relative; }
h2 {
margin: 10px 0;
font-size: 40px;}
/*navigation*/
.nav{text-align:center;
position:fixed; top:0;width:100%;margin:0px; }
.nav a{display:inline-block;
padding:15px 20px;
text-decoration:none;
text-transform:uppercase;
font-weight:700;
}
.footer{position: fixed;
left:0; bottom:0;width:100%;
text-align:center; background-color:slategray;
display:block;}
/*columns*/
.column1{float:left;
width:900px;
marging:10px;}
.column2{float:left;
width:300px;margin:10px;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lobster|Roboto" rel="stylesheet">
<link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner">
<nav role="navigation">
<div class="nav">
Home
About
Portfolio
Downloads
<!-- Right navigation-->
</div>
</nav>
<div class="content-wrap">
<h1>Larry J Designs</h1>
<h2>Beginner web designer/ artist</h2>
<div class="about" id="about-me">
<p><img src="images/placeholder.jpg" alt="stock" style="width:100px;height:100px;"></p>
<p> Hello, I'm Larry J , I currently live in the DC Metro area , i also love working on art in my spare time.
As a teen in high I use to love to draw and build websites ,
Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing .
Life has a long road to success , but on the road there are that you have to learn to get to the next level . Here are mines bellow :</p></div></div>
</header>
<main role="main">
<section><!--my skill-->
<div class="content-wrap">
<div class="column1">
<h3>Skills in progress</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java script</li>
<li>J query</li>
</ul></div>
<div class="column2">
<h3>Next Skills to learn</h3>
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Logo design</li>
<li>Graphic arts</li>
<li>T-shirt Design</li>
</ul>
</div></section>
</main>
<!--my skill-->
<!--skills list end-->
<!--container end-->
<div class="footer">
<p>©Larry J designs </p>
</div>
</body>
`.
I updated your column1 and column2 css with display: inline-block instead of float and it worked. I also made the width percentual.
/*body styles*/
body, html{background-color:#4B88A2;}
.grid-container{display:grid;
/*grid grid-template: 1fr repeat(11,10px 1fr);*/
grid-template-columns:[left-sidebar-start] 1fr 10px 1fr[right-sidebar-end]
10px
[main-area-start]1fr reapeat(11,[gutter] 10px [row]1fr[main-area-end])
10px
[right-sidebar-start] 1fr 10px 1fr [right-sidebar-end];
grid-template-rows: [header-start] 1fr[header-end]
10px
[main-start] 1fr[main-end]
[footer-start]1fr[footer-end]
}
/*.content-wrap{max-width:950px;
margin: 0 auto;overflow:auto;padding:60px 50px; }*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*headers*/
h1,h2{font-family:'lobster', cursive;
font-size:40px;font-weight: 400;}
h1{font-size:80px;}
h3{margin:0;}
header{text-align: center;}
header{padding-top: 60px;position:relative; }
h2 {
margin: 10px 0;
font-size: 40px;}
/*navigation*/
.nav{text-align:center;
position:fixed; top:0;width:100%;margin:0px; }
.nav a{display:inline-block;
padding:15px 20px;
text-decoration:none;
text-transform:uppercase;
font-weight:700;
}
.footer{position: fixed;
left:0; bottom:0;width:100%;
text-align:center; background-color:slategray;
display:block;}
/*columns*/
.column1{
display: inline-block;
width:calc(60%-10);
margin:10px;
vertical-align: top;
}
.column2{
display: inline-block;
width:calc(30%-10);
margin:10px;
vertical-align: top;
font-size:
}
.content-wrap {
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lobster|Roboto" rel="stylesheet">
<link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner">
<nav role="navigation">
<div class="nav">
Home
About
Portfolio
Downloads
<!-- Right navigation-->
</div>
</nav>
<div class="content-wrap">
<h1>Larry J Designs</h1>
<h2>Beginner web designer/ artist</h2>
<div class="about" id="about-me">
<p><img src="images/placeholder.jpg" alt="stock" style="width:100px;height:100px;"></p>
<p> Hello, I'm Larry J , I currently live in the DC Metro area , i also love working on art in my spare time.
As a teen in high I use to love to draw and build websites ,
Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing .
Life has a long road to success , but on the road there are that you have to learn to get to the next level . Here are mines bellow :</p></div></div>
</header>
<main role="main">
<section><!--my skill-->
<div class="content-wrap">
<div class="column1">
<h3>Skills in progress</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java script</li>
<li>J query</li>
</ul></div>
<div class="column2">
<h3>Next Skills to learn</h3>
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Logo design</li>
<li>Graphic arts</li>
<li>T-shirt Design</li>
</ul>
</div></section>
</main>
<!--my skill-->
<!--skills list end-->
<!--container end-->
<div class="footer">
<p>©Larry J designs </p>
</div>
</body>
Also, there was a typo on the margin property name on the line 58 in your css code.
Hope it helps,
best
I'm writing some html and css to create a webpage. On the left of the page is a nav section. At the top is a header, below which is a 'main' section containing text in various sections, and below that is a footer.
I have managed to get the header and footer to remain fixed as desired and also get the main section to scroll between the header and footer. The links in the nav are supposed to let the user jump to a section of main as required. However, when clicking on introduction, the introduction section gets positioned at the very top of the page (hidden under the header) where as I would like it to jump to its position just below the header. I've tried various combinations of setting top and position:absolute in main but without success. Can anybody help?
The html and css are below:
index.html:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>John Doe</title>
<link type="text/css" rel="stylesheet" href="homepage.css">
<style type="text/css">
</style>
</head>
<body>
<header id="top">
<h1>
<dl>
<dt>
John Doe
</dt>
<dd>
<img src="logo.jpg" alt="Logo" >
</dd>
</dl>
</h1>
</header>
<nav class="navlist">
<ul class="menuitem">
<li>Introduction</li>
<li>Previous Experience</li>
<li>Skills</li>
<li>Courses Taken</li>
<li>Courses Being Taken</li>
<li>Useful Links</li>
<li>Contact</li>
<img src="selfie.jpg" alt="Selfie" >
</ul>
</nav>
<div id="main">
<h2><a id="introduction">Introduction</a></h2>
<p>Welcome to my home page! This page tells you a little bit about myself.</p>
<p>Blah blah blah</p>
<h2><a id="prevExp">Previous Experience</a></h2>
<p>I have worked at
Prodrive,
Lotus Engineering and
Ricardo.
</p>
<p>At Prodrive I did some stuff.</p>
<p>At Lotus I did some stuff.</p>
<p>At Ricardo I did some stuff.</p>
<h2><a id="skills">Skills</a></h2>
<ol>
<li>Awesomeness</li>
<li>Mathematics</li>
<li>Problem Solving</li>
<li>CSS?</li>
</ol>
<h2><a id="courses_taken">Courses taken</a></h2>
<ul>
<li>BEng Degree</li>
<li>Games Programming</li>
<li>Java</li>
<li>Android Programming</li>
</ul>
<!-- Created nested list to show current course and its modules -->
<h2><a id="courses_being_taken">Courses being taken</a></h2>
<ul>
<li>MSc Degree
<ul>
<li><h3>Modules</h3></li>
<li>Apps</li>
<li>Research</li>
<li>Databases</li>
<li>Internet</li>
</ul>
</li>
</ul>
<h2><a id="useful_links">Useful Links</a></h2>
<ul>
<li>
<a href="http://www.w3schools.com/html/html5_intro.asp" >HTML5 Introduction from w3schools</a>
</li>
</ul>
<h2><a id="contact">Contact</a></h2>
<ul>
<li>Address: xxxx</li>
<li>Telephone: xxxx</li>
<li>Email: <a href="mailto:xxxx#uea.ac.uk" >xxxx</a></li>
</ul>
</div>
<footer>
<!-- Horizontal rule and update comment -->
<hr />
<p>Page last updated 30/09/2016 by Stephen Whiddett</p>
</footer>
</body>
</html>
homepage.css:
body {margin:0; padding:0;}
header {border: 0px solid white;}
nav {border: 2px ;}
footer {border: 2px ;}
div#main {border: 2px ;}
h1 {font-family:Helvetica,Arial,sans-serif;
font-size:x-large;
color:blue;
font-style: italic;}
h2 {font-family:Helvetica,Arial,sans-serif;
font-size:medium;
color:#0088FF;
font-style: italic;}
header{ width: 100%;
height: 12vh;
position: fixed;
top: 0;
background: #AAAAAA;
}
#main {
left:6em;
width: 80%;
margin: 13vh 0 6vh 6em;
}
footer{ position: fixed;
width:100%;
height:6vh;
bottom:0;
text-align:center;
background: white;}
p { font-family:Helvetica,Arial;
font-size:x-small;}
a {background-color:yellow}
header a {background-color:inherit}
nav img {max-width:100%;}
ul.menuitem {font-size:small;
margin:0;
padding:1em;}
nav.navlist {width:6em;
position: fixed;
top:12%;
bottom:94%;}
header dt {float:left;}
header dd {float:right;}
header dl {padding:1%;}
header dt {
position: absolute;
top: 6vh;
transform: translateY(-50%);
}
It may be necessary for you to reduce the window size of your browser in order to see the issue I've described to ensure that main cannot fit on the screen all at once.
So I want it to float to the right, but I want the text and one image (which I haven't turned to links yet) to be in one line.
HTML code:
<html>
<title>Home - Welcome to Micro Skills!</title>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
<div id="header" class="header">
<div class="container">
<div class="logo">
<h1><img src="microskills_logo.jpg" width="275" height="106" alt="Logo - Micro Sills"></h1>
</div>
<div class="navBar">
<ul>
<b>
<li><img src="home_icon.jpg" width="256" height="256" alt="Home" class="home_icon"></li>
<li>About Us</li>
<li>Events</li>
<li>Get Involved</li>
<li>Contact Us</li>
</b>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>Welcome to the Community MicroSkills Development Centre website.
Since 1984, we have been serving communities in the Greater Toronto Area. As a non-profit, charitable organization, we strive to achieve excellence in our service delivery to women, newcomers to Canada, youth and other community members who trust us to support them in improving their economic and social well-being.
Community MicroSkills Development Centre is a multi-cultural, non-profit, community based organization committed to assisting the unemployed, with priority to women, racial minorities, youth and immigrants. Recognizing barriers that immigrants, racial minority, youth and women face in their efforts towards self-sufficiency, MicroSkills aims to enable them to participate more fully in Canadian society and assist them in acquiring the skills needed to achieve self-determination and economic, social and political equality.
Our programs are designed to assist the unemployed, with priority to women, racial minorities, youth and immigrants achieve career and personal goals. Clients can choose as many services as required to help them on their way to becoming self-reliant and economically self-sufficient.</p>
</div>
</div>
</html>
CSS code:
#charset "utf-8";
/* CSS Document */
body{
width:100%;
margin:auto;
}
.container{
width:85%;
margin:auto;
}
.header{
background-color:#900;
width:100%;
height:17%;
top:0;
position:fixed;
text-decoration:none;
}
.logo{
float:left;
}
.navBar{
float:right;
height: 10px;
}
li{
float:left;
margin-left:2%;
padding-top:20px;
color:#FFF;
text-transform:uppercase;
font-size:12px;
font-stretch:ultra-condensed;
padding-right:0;
}
.content{
padding-top:20%;
}
.home_icon{
height:50px;
width:50px;
}
I want the same positioning, but I want to move the text and image in the "navBar" slightly to the left to fit everything in one line.
You should add a width property to your .navBar CSS.
http://codepen.io/calebanth/pen/KrZBXo
.navBar {
float: right;
height: 10px;
width: 30%;
}
Attempting to put the Nav bar containing Home, Menu, etc on the left of the page, and the rest in the center, and the windingroad.jpg floated to the right of all the text. I am lost in how to split these into multiple columns and continue, any help would be appreciated.
~HTML~
<head>
<meta charset="UTF-8">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" type="text/css" href="javajam.css">
<style>
#nav {
background-color:#999;
width:100px;
padding-top: 10px;
font-weight: bold;
float:left; }
#nav a {text-decoration: none;
padding-bottom: 15px;
a:link; { color: #996633;}
a:visited { color: #ccaa66;}
a:hover { color: #330000;
}
#nav ul { list-style-type: none;}
</style>
</head>
<body>
<h1>
<img src="javalogo.gif" alt="JavaJam Coffee House"
width="619" height="117">
</h1>
<p>Follow the winding road to JavaJam...</p>
<div id="nav wrapper">
<ul class="nav">
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
<main>
<div id="wrapper">
<img src="windingroad.jpg" alt="Winding Road"
width="333" height="156" class="floatright">
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
</main>
<p>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555
</p>
<footer>
<p>Copyright © 2014 Javajam Coffee House</p>
<p><a href="#college.edu">
a#college.edu</a>.</p>
</footer>
</body>
</html>
There are many ways to achieve this, but here is one way:
body {
margin: 0;
padding: 0;
}
#navigation {
width: 200px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1000;
overflow-y: auto;
background-color: gray;
}
#main {
margin-left: 200px;
padding: 5px;
}
<div id="navigation">
<h1>
<img src="javalogo.gif" alt="JavaJam Coffee House" width="619" height="117">
</h1>
<p>Follow the winding road to JavaJam...</p>
<div>
<ul class="nav">
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
</div>
<div id="main">
<div>
<div id="wrapper">
<img src="windingroad.jpg" alt="Winding Road" width="333" height="156" class="floatright">
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
</div>
<p>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555
</p>
<footer>
<p>Copyright © 2014 Javajam Coffee House</p>
<p>a#college.edu.</p>
</footer>
</div>
Wrap your navigation into one container and your content into another container then apply css to separate split these two containers so it can be left and right.
Also, for your css id attribute it cannot contain more than one word, because this value is unique.
I've been playing around with websites to figure out how they work. By downloading them and opening the in dream weaver cs6. But when I open the downloaded html file in my browser everything displays fine except the green background which is replaced with a default white one. Have a look.
http://www.bintrasher.com/index.html
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0036)http://www.bintrasher.com/index.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="./Bintrasher1_files/style.css">
<title>Bintrasher</title>
<style type="text/css"></style></head>
<body>
<div id="container">
<div id="top_banner"><img src="./Bintrasher1_files/dragons_den.gif" alt="dragons den"></div>
<div id="nav">
<ul>
<li>home</li>
<li>|</li>
<li>domestic</li>
<li>|</li>
<li>commercial</li>
<li>|</li>
<li>videos</li>
<li>|</li>
<li>shop</li>
<li>|</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="left_column">
<h1 class="header_home">Gain 40% more space in your wheelie bin!</h1>
<p>
Now with the Bin Trasher you can compact up to 40% of your waste to reduce overfilling and littering.
</p><p>
The sheer amount of waste produced by each household every week is increasing and the dangerous task of standing in your bin to squash your rubbish may be over!
</p><p>
We might just have the answer to your problem. The Bin Trasher is a simple gadget that compacts the waste and gives you 40% more space in your wheelie bin.
</p>
</div>
<div id="right_column"><p>Watch our demonstration video now…</p>
<object width="360" height="290"><param name="movie" value="http://www.youtube.com/v/7aHbTdhtrho&hl=en&fs=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/7aHbTdhtrho&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="290"></object>
</div>
</div>
<div id="footer">
<div id="col1">
<p>
<strong>Trade Enquiries Welcome</strong><br>
<strong>Tel:</strong> 059 91 57629<br>
<strong>Mobile:</strong> 087 206 9546<br>
<strong>Email:</strong> info#bintrasher.com</p>
</div>
<div id="col2">
<p>
<strong class="firstline">Great Value at only </strong><br>
<strong>€49.95</strong><br>
<strong class="lastline">Including VAT</strong>
</p>
</div>
<div id="col3"><img src="./Bintrasher1_files/buynow.gif"></div>
</div>
<p class="lower_left">Bin Trasher. 2010. All rights reserved </p>
<p class="lower_right">Terms & Conditions | Privacy Policy | Site Map<br>
<img src="./Bintrasher1_files/headers_26.gif"></p>
</div>
</body></html>
css:
#charset "UTF-8";
/* CSS Document */
img{border:0;}
body {text-align:center; margin:23px 0; background:url(../images/bgr.gif); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; line-height:1.4em;}
p a{color:#CC0000;}
p a:hover{color:#3c671e;}
#container {width:931px; margin-left:auto; margin-right:auto; text-align:left;}
#top_banner {height:149px; background:url(../images/top_banner.gif) bottom no-repeat; text-align:right;}
#nav {height:35px; background:url(../images/top_ban_bit.gif) no-repeat right #4a4a30; color:#FFFFFF;}
#nav ul{list-style-type:none; margin:0; padding:0 0 0 10px;}
#nav li{float:left; padding:6px 0.9em 0 0.9em; font-size:1.2em;}
#content{background:#FFFFFF; overflow:hidden; border-bottom:dotted 2px #006633;}
#left_column{ float:left; width:460px; padding:30px 30px;}
#right_column{margin-left:520px; padding:30px 20px;}
#footer{clear:both; background:#FFFFFF; overflow:hidden; padding:10px 20px 10px 30px; }
#footer div{float:left; width:33%;}
#col1 strong {color:#3c671e; text-transform:uppercase; font-weight:normal;}
#col2 strong {color:#5c8424; font-size:4em; line-height:1.2em;}
#col2 .firstline{color:#333333; font-size:1.6em;}
#col2 .lastline{font-size:1em; color:#333333;}
#col3 {text-align:right; padding-top:30px;}
.main_link {color:#FFFFFF; text-decoration:none;}
.main_link:hover, .selected{color:#669b41; text-decoration:none;}
p.lower_left{float:left; font-size:0.8em; color:#FFFFFF;}
p.lower_right{float:right; font-size:0.8em; color:#FFFFFF; text-align:right;}
.header_home{background:url(../images/heading_home.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;}
.header_industrial{background:url(../images/heading_industrial.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;}
There is probably a very easy answer because I'm very new to web development.
Thanks in advance.
instead of
background:url(../images/bgr.gif);
you need to write
background:url(http://www.bintrasher.com/images/bgr.gif);
A reference (the css file) is missing, I guess. Do you have the same file structure like on the server? I bet it will work then.