I have a project and it was good before changing in style, but after adding shadow to the #container it gives me this message from the grader:
The trading card page has a list of new facts
Each fact should have a corresponding label: expected 4 to equal 8
What have I done wrong?
Here is the card.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<h1>Panda</h1>
<!-- photo credit: wikipedia.org, image taken by Ritik -->
<img src="https://c402277.ssl.cf1.rackcdn.com/photos/18315/images/hero_full/Medium_WW230176.jpg?1576168323" alt="panda">
<div id="card" class="animal-info">
<p id="interesting-fact">Pandas live mainly in temperate forests high in the mountains of southwest China, where they subsist almost entirely on bamboo. They must eat around 26 to 84 pounds of it every day, depending on what part of the bamboo they are eating. They use their enlarged wrist bones that function as opposable thumbs.</p>
<ul id="facts">
<li>
<span class="lable">Scientific Name</span>: <span class="value">Ailuropoda melanoleuca</span>
</li>
<li>
<span class="lable">Average Length</span>: <span class="value">4 to 5 feet</span>
</li>
<li>
<span class="lable">Average Lifespan</span>: <span class="value">20 years</span>
</li>
<li>
<span class="lable">Habitat</span>: <span class="value">Eating in a relaxed sitting posture</span>
</li>
</ul>
<p id="summary">A newborn panda is about the size of a stick of butter—about 1/900th the size of its mother—but females can grow up to about 200 pounds, while males can grow up to about 300 pounds as adults. These bears are excellent tree climbers despite their bulk.
</p>
</div>
</div>
</body>
</html>
And here is the styles.css:
#container{
width: 513;
height: 796;
object-fit: contain;
border: 1px solid #e0e0e0;
box-shadow: 0 5px 5px 5px #e0e0e0;
padding: 20px;
font-family: sans-serif;
}
#container img {
width: 300px;
height: auto;
border: 1px solid #e0e0e0;
padding: 1px;
}
#container h1{
padding: 20px;
}
#card #interesting-fact {
font-style: italic;
}
.animal-info{
}
#facts .lable {
font-weight: bold;
}
#facts .value{
font-style: italic;
}
#card ul {
list-style-type: none;
}
#card {
border: 1px solid #e0e0e0;
padding: 20px;
}
Okay ..
I had to put the list values without the <span class="value"></span>
That's it :)
Related
I should be doing a animal trading card simple page per my training to look like this using HTML and linking CSS style from another style.css sheet;
Here's the code i used below, but when i run {even though I'm almost there} i get these errors:
The trading card page with styling has an info section below the image with class 'animal-info'
The #card element does not have class 'animal-info': expected false to equal true
Stacktrace
The border should be solid: expected 'none' to equal 'solid'
Stacktrace
The trading card page with styling has a border around the animal's info section
The border should be solid: expected 'none' to equal 'solid'
Stacktrace
The trading card page with styling has spacing between the border and card elements
There must be some padding around the outside border: expected 0 to be above 0
Stacktrace
/* add your CSS here */
<style>
container { border: 2px solid black;
}
.container {border: 2px solid black;
}
#card {
font-style: italic;
padding: 1em;
}
.animal-info {
border: 2px solid black;
}
ul {list-style: none;
padding: 1em;
}
li span { font-weight: bold;
}
h1{
padding: 1em;
}
img {
padding: 1em;
}
#summary{
padding: 1em;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>For the Love of Puppies</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<h1>Puppies</h1>
<img src="https://placedog.net/300/300" alt="Puppy">
<div class="animal-info">
<div id="card">
<p id="interesting-fact">Queen Elizabeth II has long been associated with
Corgis. After a visit to Thomas Thynne, 5th Marquess of Bath in 1933,
Princesses Elizabeth and Margaret made it well known to their family
that they liked the Corgis owned by the Marquess.</p> </div>
<ul id="facts">
<li>
<span>Dog Breed Group</span>: Herding Dogs
</li>
<li>
<span>Average Length</span>: 10 inches to 1 foot tall at the shoulder
</li>
<li>
<span>Average Lifespan</span>: 12 to 14 years
</li>
<li>
<span>Weight</span>: Up to 30 pounds
</li>
</ul>
<p id="summary">Welsh Corgis come in two varieties: the Pembroke and
the Cardigan. They were registered as one breed by the Kennel Club in
the U.K. until 1934, although many breeders believe the two breeds
developed separately. Both have similar heads, bodies, levels of
intelligence and herding ability, but the Cardigan is slightly
larger and heavier boned than the Pembroke.
</p>
</div>
</div>
</div>
</body>
</html>
What should I do for it to be like the reference page? It's driving me freakin' nuts.
Thanks in advance..
I am created this card using simple css code.
container { border: 2px solid #eee;
}
.container {border: 2px solid #eee;
}
#card {
font-style: italic;
padding: 1em;
}
.animal-info {
border: 2px solid #eee;
}
ul {list-style: none;
padding: 1em;
}
li span { font-weight: bold;
}
img {
width: 100%;
border: 2px solid #eee;
}
#summary{
padding: 1em;
}
div#container {
padding: 20px;
margin: 50px;
border: 3px solid #eee;
box-shadow: 0px 10px 10px 10px #eee;
}
h1{margin-top:0;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>For the Love of Puppies</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<h1>Puppies</h1>
<img src="https://placedog.net/300/300" alt="Puppy">
<div class="animal-info">
<div id="card">
<p id="interesting-fact">Queen Elizabeth II has long been associated with
Corgis. After a visit to Thomas Thynne, 5th Marquess of Bath in 1933,
Princesses Elizabeth and Margaret made it well known to their family
that they liked the Corgis owned by the Marquess.</p> </div>
<ul id="facts">
<li>
<span>Dog Breed Group</span>: Herding Dogs
</li>
<li>
<span>Average Length</span>: 10 inches to 1 foot tall at the shoulder
</li>
<li>
<span>Average Lifespan</span>: 12 to 14 years
</li>
<li>
<span>Weight</span>: Up to 30 pounds
</li>
</ul>
<p id="summary">Welsh Corgis come in two varieties: the Pembroke and
the Cardigan. They were registered as one breed by the Kennel Club in
the U.K. until 1934, although many breeders believe the two breeds
developed separately. Both have similar heads, bodies, levels of
intelligence and herding ability, but the Cardigan is slightly
larger and heavier boned than the Pembroke.
</p>
</div>
</div>
</div>
</body>
</html>
Thank you all for the replies. I found the problem was putting the class="animal-info" code into the id=card instead of a standalone above it. That seemed to fix it all. :)
Doing CSS from scratch like you are doing is probably not the easiest way to do it. I recommend you to use a framework. For example I made this with Vuetify:
https://codepen.io/adelriosantiago/pen/qBbYrjG?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fcards%2F
Vuetify already contains the Card element that looks very similar to what you are looking for. The card element is tag-named <v-card></v-card>. You can also add many other elements from here: https://vuetifyjs.com/en/getting-started/quick-start/. Vuetify is fully responsive and will adjust automatically to fit different device sizes.
I can't click on my links anywhere. They are not inside of the div that seems to be blocking my ability to click on them. They are also not supposed to be opaque because they are not inside of that div. They are in their own divs. Anyone see what I'm missing here? How do I change this so that I can click on my links again? I was messing with the background image for awhile. I just don't know what's going on. This is my cheezy website I'm making for school. I just need help so I can turn this in! Thank you!
<!DOCTYPE html>
<!--
LOCAL PAGE
Heather M Smith
My First Home Page
CSIS 1430
6/18/2017
-->
<html>
<head>
<title>Heather's Home Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
max-height: 100%;
margin: 0 auto;
}
#background{
background: #373737 url('pinkBackground.jpg') no-repeat;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -3;
}
#heading
{
text-align: center;
}
#emailAddressLink
{
color: white;
}
#topBox
{
margin-top: 50px;
}
h1, h2, h3, h4
{
color: black;
font-family: Georgia;
text-shadow: 1px 0px 5px white;
text-align: center;
z-index: 4;
}
ol, ul, li
{
color: black;
font-family: Georgia;
font-size: 20px;
line-height: 2em;
z-index: 4;
}
.bigText
{
color: #373737;
font-family: Georgia;
font-size: 60px;
}
.link
{
color: #5200cc;
text-decoration: none;
font-family: Georgia;
font-size: 25px;
word-spacing: 5px;
line-height: 2em;
font-weight: bold;
text-shadow: 2px 0px 10px #ffff99;
z-index: 4;
}
.box
{
background-color: #DCD0C0;
padding: 20px;
border: 2px solid #373737;
margin: 10px auto;
width: 800px;
height: 300px;
opacity: .3;
z-index: -3;
}
.boxContents
{
width: 800px;
height: 340px;
margin: 10px auto;
margin-top: -350px;
text-align: left;
line-height: 2em;
z-index: 4;
}
#intro
{
font-family: Georgia;
font-size: medium;
word-wrap: normal;
font-size: 1.5em;
}
#slccLogo
{
position: relative;
float: right;
padding: 30px;
width: 250px;
height: 250px;
}
#owlImage
{
float: right;
width: 300px;
height: 200px;
}
#lastBox
{
line-height: 6em;
}
</style>
</head>
<body>
<!--BACKGROUND-->
<div id="background"></div>
<!--HEADING-->
<div id="heading">
<h1 class='bigText'>Heather's Home Page</h1>
<h2>CSIS 1430 | Email me:</h2>
<!--EMAIL ADDRESS-->
<address>
<a class='link' id="emailAddressLink"
href="mailto:HeatherSmithx#gmail.com" target="_blank">
Heather's Email
</a>
</address>
</div>
<br>
<!--BACKGROUND DIV BOX-->
<div class='box' id="topBox"></div>
<!--INTRO-->
<div class="boxContents">
<span id="intro">Hello! I'm Heather, a student at
<a class='link' href="http://www.slcc.edu/">Salt Lake Community
College</a>
studying Computer Science. I want to be a software developer and
my goal
is to get an internship before I graduate. I'm getting some
experience at
Century Link, where I currently work. I have worked at Century
Link for
two years as a Repair Representative. Even though my interest
in computers is great, I'm also an aspiring artist.
<br>
I've been painting, drawing, and playing music for most of my
life
and I know there's always so much more to learn. I'm hoping to
use my
creativity in a way that can be applied to developing software
in the
future.
</span>
</div>
<br>
<!--COMPUTER SCIENCE COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2 class="heading">My Computer Science Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="slccLogo" src="SLCCLogo.png" alt="SLCC">
<ul>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/computer-science-and-information-
systems">CSIS 1030</a></li>
<li>CSIS 1340 - content coming soon</li>
<li>CSIS 1400 - content coming soon</li>
<li>CSIS 1410 - content coming soon</li>
<li>CSIS 1430 - content coming soon</li>
<li>CSIS 1550 - content coming soon</li>
</ul>
</div>
<br>
<!--GENERAL EDUCATION COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2>My General Education Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="owlImage" src="Owl.png" alt="Wise Owl">
<ul>
<li class="link"><a
href="https://heathersmithx.wordpress.com/coursework/english-2010/">ENGLISH
2010 NOTEBOOKS</a></li>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/coursework/film-culture/686-2/">FILM
1070 FINAL PAPER</a></li>
<li class="link"><a href="index/reflection.html">CSIS 1430
REFLECTION</a></li>
<li class="link"><a
href="https://heathersmithx.wordpress.com/outside-the-classroom/">OUTSIDE OF
SCHOOL...</a></li>
</ul>
</div>
<br>
<!--MY FAVORITE WEBSITES-->
<div class='box'></div>
<div class="boxContents">
<h2>My Favorite Web Sites!</h2>
<ol>
<li class='link'><a href = "http://www.dreamincode.net/"
target="_blank">Dream in Code</a></li>
<li class='link'><a href = "https://www.wolframalpha.com/"
target="_blank">Wolfram Alpha</a></li>
<li class='link'><a href = "https://slcc.instructure.com/"
target="_blank">SLCC Canvas</a></li>
<li class='link'><a href = "https://www.w3schools.com/"
target="_blank">w3schools</a></li>
</ol>
</div>
<br>
<!--PROJECTS FROM THIS CLASS-->
<div class='box'></div>
<div class="boxContents" id="lastBox">
<h2>Projects from CSIS 1430</h2>
<h4 class="link">
<a class='link' href='resume.html' target="_blank">RESUME | </a>
<a class='link' href='littleBoxes/littleBoxes.html'
target="_blank">LITTLE BOXES | </a>
<a class="link" href='map/utahMap.html' target='blank'>IMAGE MAP
|</a>
<a class="link" href='PizzaPlace/pizzaIndex.html'
target='blank'>PIZZA ORDER FORM |</a>
<a class='link' href='GuessingGame/GuessIndex.html'
target="_blank">GUESSING GAME | </a>
<a class='link' href='TicTacToe/TicTacToe.html'
target="_blank">TIC TAC TOE | </a>
<a class='link' href='index/reflection.html'
target="_blank">REFLECTION </a>
</h4>
</div>
</body>
</html>
The issue is with the .boxContents class. The margin-top selector is pulling everything off. If you remove it, your links should function as expected. Also, just on a side-note, it's worth avoiding using lots of z-indexes in your CSS if they aren't required. It can lead to issues and content being hidden all too easily.
You've got a lot of z-index action going on there. I would be careful about how you are using the z-index. Refer to this great article on the CSS z-index which also higlights some of the pitfalls of using z-index. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Change the class .link to have z-index:5; and then test it. It will put it in front of your other <divs>.
Just make sure you keep that class with a higher z-index than your other classes / IDs.
This is my html coding. When I run the webpage in firefox there is no color or formating at all it is just the info I entered. I tried typing the code differently and still does not work. I went into developer in firefox and the css does not show up, when I add it the webpage is formatted. How do I fix this so I do not need to go into developer to add the css everytime?
<!DOCTYPE html>
<html>
<head>
<title> Penn State Health St. Joseph Radiology Employee Reference</title>
<!-- Author: Brie Rennig -->
<!-- Date: 08/24/2016 -->
<link rel="stylesheet" type="text/css" href="rem.css">
</head>
<body>
<div id="wrapper">
<h1>
Penn State Health St. Joseph Radiology Employee Reference
</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Workflow</li>
<li>Uniforms</li>
<li>Protocols</li>
<li>PACS</li>
<li>Resources</li>
<li>Students</li>
<li>About Us</li>
</ul>
</nav>
<main>
<center>
<img src="ps_health.jpg" id="ps_health">
</center>
<br>
<div id="Statement_Health">
<center>
<h2>
Mission Statement
</h2>
<!-- This text is emphasised as it is the mission statement for Penn State Health -->
<em>
The Mission of St. Joseph's is to nurture the healing ministry of the Church, supported by education and research. <br/>
Fidelity to the Gospel urges us to emphasize human dignity and social justice as we create healthier communities. <br/>
<br/>
</em>
</center>
</div>
<br/>
<div id="Prayer">
<h3>
Radiologic Technologist Prayer
</h3>
<em>
Almighty and merciful Lord, <br/>
I thank thee for giving me this day <br/>
That I may be able to serve my brethren.<br/>
<br/>
Thou give me a keen of mind, <br/>
To be able to formulate appropriate factor <br/>
Just enough kVp to penetrate <br/>
And mAs for density <br/>
To produce a good quality radiograph. <br/>
<br/>
Grant that I may also possess <br/>
A hand with a tender touch <br/>
That I may not intensify the suffering <br/>
as I position the patient.. <br/>
<br/>
Lastly Lord, let me wear a sweet smile, <br/>
And speak soft and pleasant words <br/>
which may sooth the afflicted <br/>
And that they may have confidence in me. <br/>
<br/>
For the honor and glory of Thy kingdom <br/>
Amen. <br/>
<br/>
</em>
</div>
<footer>
<ul>
<li>Home</li>
<li>Workflow</li>
<li>Uniforms</li>
<li>Protocols</li>
<li>PACS</li>
<li>Resources</li>
<li>Students</li>
<li>About Us</li>
</ul>
<br />
<p> <font face="algerian"> <font color= "#CCCCFF"> Posted by: Brianna Rennig </font> </p> </font>
<p> <font color= "#CCCCFF"> Contact Information: <a href="mailto:btr130#psu.edu">btr130#psu.edu</>.</font> </p>
Penn State Health St. Joseph
</footer>
</div>
</body>
</html>
and this is my CSS
body {
background: linear-gradient(to bottom, #f5f5f5, #0045cc);
}
#ps_health
{
}
#ballon_quote
{
border:5px;
border-style:ridge;
border-color:dark-blue;
width:60%;
height:50%;
}
#sms_MobileOnly
{
display: none;
}
#Statement_Health
{
margin-left: auto;
margin-right: auto;
width:90%;
border: 2px solid; black;
background-color: #CCCCFF;
}
#Prayer
{
margin-left: 25%;
margin-right: auto;
width:50%;
border: 2px solid; black;
background-color: #CCCCFF;
text-align: center;
}
footer ul
{
list-style-type: none;
}
footer li
{
display: inline;
}
footer a
{
text-decoration: none;
color: black;
}
nav ul
{
list-style-type: none;
}
nav a
{
text-decoration: none;
}
#wrapper
{
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #EAEAEA;
}
header
{
background-color: #CCCCFF;
margin-left: auto;
margin-right: auto;
width: 100%;
font-size: 24px;
font-family: Verdana;
font-weight: 900;
text-transform: uppercase;
text-align: center;
}
main
{
margin-left: 200px;
padding: 10px;
background-color: #FFFFFF;
font-family: Times New Roman ;
}
footer
{
text-align: center;
background-color: #CCCCFF;
margin-left: auto;
margin-right: auto;
width: 100%;
font-family: Verdana;
font-weight: 900;
text-transform: uppercase;
}
nav
{
float: left;
width: 250px;
}
Here is the problem: the Whole2 element in the css portion is supposed to be a container for the other divs, but it doesn't create the border or padding around he other elements. If anyone can tell me what I am doing wrong, please do.
By the way, the content is nonsense, ignore it.
This is my css:
<style>
.Whole2{
border:4px solid black;
padding: 1em;
}
.Title{
border: 1px solid;
background: lightblue;
text-align: right;
width: 57.9em;
height: 8em;
padding: .5em;
}
.Subtitle {
font-size: 0.8em;
}
.Blog1 {
width: 44em;
height: 20em;
border:1px solid black;
background: lightgreen;
text-align: justify;
padding: .5em;
}
.Blog2 {
width: 44em;
height: 20em;
border:1px solid black;
background: lightgreen;
text-align: justify;
padding: .5em;
}
.Friends {
border:1px solid black;
background: purple;
width: 12em;
height: 12em;
position: absolute;
top:10em;
left:0.5em;
padding: .5em;
}
.clears{
clear: both;
}
.theImg{
float: right;
padding: .5em;
}
.Blogs{
position: absolute;
top:10em;
left:14.4em;
}
.blogtext{
font-size: 18px;
}
.Whole2 {
border:4px solid black;
padding: 1em;
}
</style>
This is my html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="lab1.css">
<div class="Whole2">
<head>
<div Class="Title">
<h1> Title thing </h1>
<div class="Subtitle">
<h2> Subtitle thing </h2>
</div>
</div>
</head>
<h3 class="clears"></h3>
<div class="Friends">
<head>
<h1> Friends</h1>
</head>
<body>
<table>
<th>
Friends
</th>
<tr>
<td>
Leo Bloom
</td>
</tr>
<tr>
<td>
Leo Bloom
</td>
</tr>
<tr>
<td>
Leo Bloom
</td>
</tr>
</table>
</body>
</div>
<h3 class="clears"></h3>
<div class="Blogs">
<div class="Blog1">
<head>
<h1> <span><time>2015-02-11</time></span>: Moose Day</h1>
</head>
<body>
<div class="theImg">
<img src="http://ia.media-imdb.com/images/M/MV5BMjE0ODk2NjczOV5BMl5BanBnXkFtZTYwNDQ0NDg4._V1_SY317_CR4,0,214,317_AL_.jpg" height="200" width="200">
</div>
<h2>
<div class="blogtext">
The moose (North America) or elk (Europe), Alces alces, is the largest extant species in the deer family. Moose are distinguished by the palmate antlers of the males; other members of the family have antlers with a dendritic ("twig-like") configuration. Moose typically inhabit boreal and mixed deciduous forests of the Northern Hemisphere in temperate to subarctic climates. Moose used to have a much wider range but hunting and other human activities greatly reduced it over the years. Moose have been reintroduced to some of their former habitats. Currently, most moose are found in Canada, Alaska, Scandinavia and Russia.
</div>
</h2>
</body>
</div>
<h3 class="clears"></h3>
<div class="Blog2">
<head>
<h1> <span><time>2015-03-11</time></span>: Second Moose Day</h1>
</head>
<body>
<div class="theImg">
<img src="http://ia.media-imdb.com/images/M/MV5BMjE0ODk2NjczOV5BMl5BanBnXkFtZTYwNDQ0NDg4._V1_SY317_CR4,0,214,317_AL_.jpg" height="200" width="200">
</div>
<h2>
<div class="blogtext">
Their diet consists of both terrestrial and aquatic vegetation. The most common moose predators are wolves, bears, and humans. Unlike most other deer species, moose are solitary animals and do not form herds. Although generally slow-moving and sedentary, moose can become aggressive and move surprisingly quickly if angered or startled. Their mating season in the autumn can lead to spectacular fights between males competing for a female.
</div>
</h2>
</body>
</div>
</div>
</div>
</html>
First, put <div class="Whole2"> inside the body.
Second, you only can have one <head> and one <body>. And I think that you are confounding <head> with <header>.
Hey everyone I am having an issue where my social media buttons for my website are not staying in the nav header area. I have tried using the float attribute and it wont stay in the header here are some images to show you what I am talking about.
http://imgur.com/zwmtXju
as you can see in this image the social media buttons wont stay in the header area, any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<header>
<nav class="clearfix">
<a href="#" id="brand">
<h1>Skull</h1>
</a>
<ul class="clearfix">
<li>Moonshine</li>
<li>Recipes</li>
<li>The Blog</li>
<li>The Store</li>
<div id="socialMedia">
<img src="imgs/fbsm.png" alt=""/>
<img src="imgs/tsm.png" alt=""/>
<img src="imgs/psm.png" alt=""/>
</div>
</ul>
Skull®
</nav>
</header>
<div id="content">
<div id="story">
<p id="ourStory">Our Story</p>
<h1 id="bootleg">Bootlegging</h1>
<p id="storyBoard">
<span class="storyTelling">This is our history,</span>
<span class="storyTelling">our story,</span>
<span class="storyTelling">of how we became one of the greatest</span>
<span class="storyTelling">moonshine brands on the planet.</span>
<span class="storyTelling">A story of struggle,</span>
<span class="storyTelling">and independence,</span>
<span class="storyTelling">accompanied by expert craftmanship.</span>
<span class="storyTelling">Using years as chapters of our book of life</span>
<span class="storyTelling">we will show you what makes our moonshine so great.</span>
<span class="storyTelling">Scroll down and enjoy.</span>
</p>
</div>
<div id="timeLine">
<div id="present">
<h1>Here and Now</h1>
<p>Now in 2014 we are a globally recognized brand that many people know and love. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="2000">
<h1>2000</h1>
<p>In 2000, bars started buying our moonshine to make drinks with. This was a huge milestone for Skull®
Because, it brought our brand to the attention of many people that were not yet customers of our great alcohol. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1960">
<h1>1960</h1>
<p>By 1960 we were booming with popularity. Skull alcohol became a recognized brand.</p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1933">
<h1>1933</h1>
<p>By 1933 Prohibition was repealed, and the market grew thin. But that didn't stop us. Skull alcohol was born.
With our superior craftsmanship skills, and our excellent customer satisfaction our legacy continued</p>
<img src="imgs/prohibitionends.jpg" width="263" height="185" alt=""/>
</div>
<div id="1920">
<h1>1920</h1>
<p>By the early 1900s, states began passing laws that banned alcohol sales, and consumption. in 1920,
nationwide Prohibition went in to effect. It was the greatest thing moonshiners could have asked for.
Because there was no legal alcohol available, the demand for moonshine shot up like a rocket. Moonshiners
had so much business they couldn't even keep up with the demand. Hidden saloons called speakeasies were even
opened in every city. they were used to sell the illegal whisky.</p>
<img src="imgs/dry.jpg" height="200" alt=""/>
</div>
<div id="1860">
<h1>1860</h1>
<p>The hatred from the Whisky Rebellion escalated in to the 1860s as the government continued
to try and collect excise tax to fund the Civil War. At this time Moonshiners and many other anti-governmental
groups, such as the KKK, joined forces to kill anyone who would release the location of their stills and attack IRS officials and
their families.</p>
<img src="imgs/kkk.jpg" width="263" height="185" alt=""/>
</div>
<div id="1794">
<h1>1794</h1>
<p>The American people, who had just fought a war to get out from under oppressive British taxes
(among other things), were not particularly pleased. So, they decided to just keep making their own
whisky, completely ignoring the federal tax. All the resentment that the citizens had toward the
government eventually exploded when several hundred angry citizens took over the city of Pittsburgh,
Pennsylvania. President George Washington called apon the militia, a group of 13,000 troops to disperse
The angry mob. The Whiskey Rebellion was a failure.</p>
<img src="imgs/wr.jpg" alt=""/>
</div>
<div id="1791">
<h1>1791</h1>
<p>Moon shining began very early in American history. Shortly after the Revolution,
the United States found itself struggling to pay for the expense of fighting a long war.
The solution was to place a federal tax on liquors and spirits that would soon be known
as the whisky tax.</p>
<img src="" alt=""/>
</div>
</div>
</div>
<footer>
<div class="footerContent"></div>
<div class="footerContent"></div>
<div class="footerContent"></div>
</footer>
</div><!--containerEnd-->
</body>
</html>
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
width: 1920px;
background-color: #202021;
}
#container{
width: 100%;
margin: 0;
background: url('../imgs/565.jpeg') repeat-y center center fixed ;
}
header{
width: 100%;
height: 100px;
}
nav{
width: 100%;
height: 100px;
position: relative;
border-bottom: 2px solid #cccccc;
}
#brand{
margin-top:15px;
width: 250px;
height: 70px;
float: left;
background: url('../imgs/skullAlcoholText.png') no-repeat;
}
#brand h1{
display: none;
}
nav ul{
padding: 0;
margin: 0 auto;
width: 600px;
height: 100px;
list-style: none;
color: #fff;
border-bottom: 2px solid #cccccc;
}
nav li{
display: inline;
float: left;
}
nav a{
color: #fff;
display:inline-block;
width: 150px;
text-align: center;
text-decoration: none;
line-height: 100px;
}
nav li a{
border-right: 1px solid #cccccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:first-child a{
border-left: 1px solid #cccccc;
}
nav a:hover, nav a:active {
color: #ffffff ;
}
#socialMedia{
width: 320px;
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#socialMedia a:first-child{
}
#socialMedia a{
width: 100px;
}
nav a#pull {
display: none;
}
#content {
text-align: center;
}
#story{
margin: auto;
line-height: 2;
width: 300px;
height: 200px;
}
#ourStory, #bootleg, #storyBoard{
text-align: center;
color: #ffffff;
}
Your nav ul width is 600px. It's too small to contain all these elements. Therefore div is on next row. I also prefer to change div on something more semantic, like ul.
Put your code in table
<table width="646" border="0">
<tr><td width="98"><ul class="clearfix"><li>Moonshine</li></td><td width="82"><li>Recipes</li></td><td width="88"><li>The Blog</li></td><td width="110"><li>The Store</li></td>``<td width="78"><div id="socialMedia"><img src="imgs/fbsm.png" alt=""/></div></td><td width="78"><div id="socialMedia"><img src="imgs/tsm.png" alt=""/></div></td><td width="82"><div id="socialMedia"><img src="imgs/psm.png" alt=""/></div></td></tr></table></ul>