I am trying to display a facebook like box on the sidebar of my website. Yet when I put the code in, nothing appears. I have tried moiving the code to different spots and still nothing appears. I am not sure what I am doing wrong. Thanks in advance. Here is the code.
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>Kustum Kostumes</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="page">
<div id="header">
<div class="background">
<h1 id="logo"> <img src="images/Banner1.jpg" alt="Logo" /> </h1>
<div id="navigation">
<ul>
<li class="selected">
<li>
Home
</li>
<li>
Services
</li>
<li>
Gallery
</li>
</ul>
</div>
</div>
</div>
<div id="contents">
<div id="blog">
<div id="sidebar">
<div class="section">
<div class="fb-page" data-href="https://www.facebook.com/kustumkostumes" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/kustumkostumes" class="fb-xfbml-parse-ignore">Kustum Kostumes</blockquote></div>
<ul class="posts">
<li>
<span class="time">.</a>
</li>
<li>
<span class="time"></a>
</li>
<li>
<span class="time"></a>
</li>
</ul>
</div>
<div class="section">
<h5></h5>
<ul>
</ul>
</div>
</div>
<div id="main">
<h3>Welcome to Kustum Kostumes</h3>
<p> We aim to provide high quality, handmade and crafted kostumes, props, sculptures, and artwork!<br> We put in a lot of time and effort into what we produce to make sure that not only is the client <br>happy but it looks as close as possible to the source material. </p><p>Please check out the services page to see a detailed list of what we have to offer <br>and the approximate prices for each. Please use the Gumtree links on the side <br>for what we currently have for sale. Alternatively, contact us for anything you have in mind.<br> Don't forget to like us on facebook for continual updates.
</p>
<img src="images/bg-header2.jpg" alt="Img" height="325" width="547">
</div>
<div class="footer">
</div>
</div>
</div>
<div id="footer">
<div class="background">
<div class="body">
<form action="contact.php" method="post" id="message" class="section">
<h3>Send a Message</h3>
<ul>
<li>
<label>Full Name:</label>
<input type="text" value="">
</li>
<li>
<label>Email:</label>
<input type="text" value="">
</li>
<li>
<label>Message:</label>
<textarea></textarea>
</li>
<li>
<input type="submit" value="Send">
</li>
</ul>
</form>
<div class="section">
<h3>Contact Us</h3>
<ul>
<li>
<span>Phone</span><strong>:</strong>
<p>
0450101551
</p>
</li>
<li>
<span>Email</span><strong>:</strong>
<p>
kustumkostumes#gmail.com
</p>
</li>
<li>
<span>
</li>
</ul>
</div>
<p id="footnote">
© Copyright 2017. All rights reserved. ABN 78 820 831 193
</p>
</div>
</div>
</div>
</div>
CSS Stylesheet
/* Website template by freewebsitetemplates.com */
#font-face {
font-family: 'DaysOne-Regular';
src: url('../fonts/DaysOne-Regular.eot');
src: local('☺'), url('../fonts/DaysOne-Regular.woff') format('woff'), url('../fonts/DaysOne-Regular.ttf') format('truetype'), url('../fonts/DaysOne- Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: url(../images/bg-body.jpg) repeat left top;
font-family: Arial, Helvetica, sans-serif;
min-width: 960px;
margin: 0;
}
.background {
background: url(../images/bg-pattern-red.jpg) repeat left top;
}
#page {
width: 960px;
margin: 0 auto;
padding: 156px 0 0;
}
img {
border: 0;
}
/*------------------------------ SPRITES ------------------------------*/
#footer ul li a {
background: url(../images/icons.png) no-repeat;
}
#message input[type='submit'], .more {
background: url(../images/bg-buttons.png) no-repeat;
}
.more {
background-position: 0 -35px;
color: #636974;
display: inline-block;
font-size: 14px;
font-weight: bold;
height: 35px;
line-height: 35px;
width: 170px;
padding: 1px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.more:hover {
background-position: 0 -82px;
color: #010000;
}
/*------------------------------ HEADER ------------------------------*/
#header {
width: 100%;
border-bottom: 5px solid #c3c3c3;
position: absolute;
left: 0;
top: 0;
}
#header .background {
height: 150px;
border-bottom: 1px solid #b6051c;
}
/** Logo **/
#logo {
font-family: 'DaysOne-Regular';
font-size: 36px;
font-weight: normal;
line-height: 130px;
width: 960px;
margin: 0 auto;
}
#logo a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
/** Navigation **/
#navigation {
background: url(../images/bg-navigation.png) no-repeat;
height: 49px;
width: 960px;
margin: 0 auto;
position: relative;
top: 0;
}
#navigation ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 1px 10px;
}
#navigation li {
float: left;
}
#navigation li a {
color: #636974;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 47px;
width: 154px;
border-color: transparent;
border-style: none solid;
border-width: 1px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#navigation li a:hover, #navigation li.selected a {
background-color: #bebcbc;
color: #2e3a54;
border-color: #afafaf;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
background: #fff url(../images/bg-content-bottom.png) no-repeat left bottom;
display: inline-block;
width: 100%;
margin-bottom: 30px;
padding: 23px 0 0;
-webkit-border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
-moz-border-radius-bottomleft: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#contents h1, #contents h2, #contents h4, #contents h5, #contents h6 {
color: #2e3a54;
font-family: "DaysOne-Regular";
font-size: 36px;
font-weight: normal;
margin: 0 0 18px;
}
#contents h2 {
font-size: 24px;
line-height: 24px;
text-transform: uppercase;
}
#contents h4 {
font-size: 16px;
line-height: 24px;
margin: 0 0 12px;
text-transform: uppercase;
}
#contents h5 {
font-size: 14px;
line-height: 24px;
margin: 0;
text-transform: uppercase;
}
#contents h5 a {
color: #940315;
text-decoration: none;
}
#contents h6 {
font-size: 12px;
line-height: 24px;
text-transform: uppercase;
}
#contents p {
color: #636974;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0 0 24px;
}
#contents p a {
color: #636974;
}
#contents p a:hover {
color: #721f29;
}
#contents h5 a:hover {
text-decoration: underline;
}
#contents .footer {
background-color: #f8f8f8;
clear: both;
width: 900px;
margin: 0 0 4px -30px;
padding: 20px 30px 0;
}
#contents .footer h6 {
float: left;
width: 210px;
margin-bottom: 30px;
margin-right: 20px;
text-transform: uppercase;
}
#contents .section {
width: 260px;
padding: 0 0 0 20px;
}
#contents > div:first-child {
padding: 48px 30px 24px;
}
.time {
color: #636974;
display: block;
font-size: 12px;
line-height: 12px;
padding: 6px 0 5px;
}
/** adbox **/
#contents #adbox {
background: url(../images/bg-adbox-bottom.png) no-repeat left bottom;
padding: 0 0 19px;
position: relative;
}
#adbox > div {
background-color: #f0f0f0;
height: 390px;
-webkit-border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
-moz-border-radius-bottomleft: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
padding-right: 20px;
}
#adbox > div:after {
clear:both;
content:"";
display:block;
height:1%;
line-height:0;
visibility:hidden;
}
#adbox h1 {
padding-top: 18px;
}
#adbox h4 {
font-size: 14px;
}
#adbox img {
float: left;
margin-right: 20px;
}
/** Sidebar **/
#contents .sidebar {
float: left;
min-height: 490px;
width: 279px;
border-right: 1px solid #f2cc3d;
margin: -19px 40px 0 30px;
padding: 20px 0 0;
}
#contents .sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
#contents .sidebar ul li {
font-size: 14px;
line-height: 24px;
margin: 0 0 24px;
}
#contents .sidebar ul span {
color: #636974;
display: block;
font-size: 12px;
line-height: 12px;
padding: 6px 0 5px;
}
#contents .sidebar ul li a {
color: #636974;
text-decoration: none;
}
#contents .sidebar ul li a:hover {
text-decoration: underline;
}
#sidebar, .highlight {
float: right;
display: inline-block;
border-left: 1px solid #f2cc3d;
margin: 0 0 24px 19px;
}
#sidebar .section {
border-top: 1px solid #f2cc3d;
padding-top: 24px;
}
#sidebar .section:first-child {
border: 0;
padding-top: 0;
}
#sidebar .section ul {
color: #636974;
font-size: x-small;
margin: 0 0 24px;
padding-left: 12px;
}
#sidebar .section ul li {
padding-left: 10px;
}
#sidebar .section ul li > a {
color: #636974;
display: block;
font-size: 14px;
line-height: 24px;
text-decoration: none;
}
#sidebar .section ul li a:hover {
text-decoration: underline;
}
/** list **/
ul.list {
list-style: none;
width: 600px;
margin: 0;
padding: 0;
}
ul.list li h5 + img {
float: left;
margin-right: 20px;
margin-top: 6px;
}
/** Main **/
#main > ul {
display: inline-block;
list-style: none;
width: 580px;
margin: 0;
padding: 0;
}
#main > ul li {
float: left;
width: 290px;
}
#main > ul li p b {
color: #2e3a54;
display: block;
font-family: 'DaysOne-Regular';
font-weight: normal;
text-transform: uppercase;
}
/** About **/
#contents #about {
padding-bottom: 0;
padding-top: 48px;
}
#about #main img {
margin-bottom: 18px;
}
#about .footer p {
font-size: 12px;
}
/** Services **/
#contents #services {
display: inline-block;
width: 900px;
}
#services #sidebar {
min-height: 620px;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
width: 100%;
border-top: 5px solid #c3c3c3;
position: absolute;
left: 0;
}
#footer .background {
border-top: 1px solid #b6051c;
}
#footer .body {
width: 960px;
margin: 0 auto;
padding: 40px 0 20px;
}
#footer .section {
float: left;
display: inline-block;
width: 460px;
margin: 0 10px 24px;
}
#footer h3 {
color: #fff;
font-family: 'DaysOne-Regular';
font-size: 18px;
font-weight: normal;
line-height: 18px;
margin: 0 0 18px;
text-transform: uppercase;
}
#footer ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer ul li {
color: #b3999c;
display: inline-block;
font-size: 14px;
line-height: 24px;
width: 100%;
border-top: 1px solid #8a0413;
padding: 12px 0 0;
vertical-align:top;
}
#footer ul li:first-child, #footer #message ul li {
border: 0;
padding: 0;
}
#footer ul li span {
float: left;
display: inline-block;
width: 70px;
vertical-align:top;
}
#footer ul li strong {
float: left;
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
#footer ul li p {
float: left;
display: inline-block;
width: 370px;
margin: 0;
padding: 0 0 12px;
}
#footer ul li a {
color: #b3999c;
display: inline-block;
height: 22px;
width: 30px;
margin: 0 10px;
text-decoration: none;
}
#footer ul li a.twitter {
background-position: -40px 0;
}
#footer ul li a.facebook {
background-position: -40px -32px;
}
#footer ul li a.googleplus {
background-position: -40px -64px;
}
#footer ul li a.twitter:hover {
background-position: 0 0;
}
#footer ul li a.facebook:hover {
background-position: 0 -32px;
}
#footer ul li a.googleplus:hover {
background-position: 0 -64px;
}
/** message **/
#message label {
float: left;
color: #b3999c;
display: inline-block;
font-size: 14px;
line-height: 30px;
width: 96px;
margin-right: 10px;
text-align: right;
}
#message input[type='text'] {
color: #636974;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 35px;
line-height: 35px;
width: 342px;
border: 1px solid #d7d7d7;
margin: 0 0 11px;
padding: 0 4px;
}
#message textarea {
color: #636974;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 95px;
line-height: 24px;
width: 342px;
border: 1px solid #d7d7d7;
margin: 0 0 4px;
padding: 0 4px;
overflow: auto;
resize: none;
}
#message input[type='submit'] {
background-position: 0 0;
color: #636974;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 25px;
line-height: 25px;
width: 52px;
border: 0;
margin-left: 106px;
padding: 0;
}
#message input[type='submit']:hover {
background-position: -62px 0;
color: #2e3a54;
}
#footnote {
clear: both;
color: #b75661;
font-size: 12px;
margin: 0;
text-align: center;
}
Related
I am having an issue where my navigation a is conflicting with an a href on .content - I have been trying to tackle this for the last few hours and no luck, thanks.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>
You declare style for global <a> tag, so all <a tags will use that style. Special style for <a tags from .content class can be achieved by adding to your css file: .content a { your instructions }.
Furthermore, use ul nav li a to specify your desired options for the menu. If you have multiple ul list in your project, use a specific class for each of them.
See this now has very different properties on default and hover.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
.content a {
background:blue;
transition:1s;
}
.content a:hover {
transform:translateX(500px);background:red;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>
I am very inexperienced when it comes to recent html and other languages, I had a little schooling years ago, but that's about it. I had a friend ask for hep designing a simple web page for him. I have all the kinks worked out except for on a gallery page I created in the website. This page seems to work well in firefox, but not on chrome or is. In ie, it seems to ignore the css sheet altogether. In chrome, I cannot get the "Preview" image to load.
HTML of Gallery page:
<!DOCTYPE html>
<html>
<style type="text/css">
body {
background: #222;
margin-top: 20px;
}
h3 {
color: #eee;
font-family: Verdana;
}
.thumbnails img {
height: 80px;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
cursor:pointer;
}
.preview {
padding: 1px;
display: block;
max-width:500px;
max-height:399px;
width: auto;
height: auto;
}
#content, html, body {
height: 98%;
}
#left {
max-height:400px;
float: left;
width: 75%;
background: white;
height: 100%;
overflow: auto;
}
#right {
max-height:400px;
float: left;
width: 25%;
background: white;
height: 100%;
overflow: auto;
}
</style>
<head>
<meta charset="UTF-8">
<title>Gallery - Urban Outdoor Design</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body height: 1000px>
<div id="page">
<div id="header">
<a href="index.html" id="logo"><img
src="images/logo.png" alt="Logo"></a>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Services
</li>
<li class="current">
Gallery
</li>
<li>
<a href="billpay.html">Bill
Pay</a>
</li>
<li>
Contact
</li>
</ul>
</div>
<div id="body">
<div id="content">
<h1>Some Samples of our work:</h1>
<br>Use the scrollbar at the right
to browse images, point to an image to view a
larger version on the left.
</div>
<div class="gallery" align="center">
<div id="content">
<div id="left"><img
id="preview"
class="preview"
></div>
<div id="right">
<div class="thumbnails" align="center">
<img onmouseover="preview.src=this.src"
src="gallery/image1.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
src="gallery/image2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
src="gallery/image3.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
src="gallery/image4.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
src="gallery/image5.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
<br>
</div>
</div>
</div>
<div id="footer">
<p>
Urban Outdoor Design, LLC ©
2015 | All Rights Reserved
</p>
</div>
</div>
</body>
</html>
CSS sheet:
body {
background: url(../images/bg-body.jpg) repeat;
color: #A7A238;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
min-width: 940px;
padding: 0;
}
a {
outline: none;
}
img {
border: 0;
}
p {
margin: 0;
text-align: justify;
}
p a {
color: #356618;
}
p a:hover {
color: #66a143;
}
#page {
background: #840D22;
margin: 0 auto;
padding: 0 20px;
width: 900px;
}
#header {
background: #ffffff;
height: 151px;
}
#header a#logo {
display: block;
height: 86px;
padding: 15px 0 0 20px;
}
#header a#logo img {
display: block;
margin: 0 auto;
}
#header > ul {
background: #4b4b4b;
height: 49px;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 900px;
}
#header > ul > li {
float: left;
position: relative;
width: 150px;
}
#header > ul > li > a {
color: #f0f2c9;
display: block;
letter-spacing: 0.1em;
line-height: 49px;
text-align: center;
text-decoration: none;
}
#header > ul > li.current > a,
#header > ul > li.current > a:hover,
#header ul li ul li.current a,
#header ul li ul li.current a:hover {
background: #840d22;
color: #f0f2c9;
}
#header ul li a:hover {
background: #daead0;
color: #1b330c;
}
#header ul li ul {
list-style: none;
left: -99999px;
margin: 0;
overflow: visible;
padding: 11px 0 0;
position: absolute;
top: 49px;
width: 150px;
z-index: 2;
}
#header ul li:hover ul {
left: 0;
top: 49px;
}
#header ul li ul li {
background: #4B4B4B;
}
#header ul li ul li a {
color: #f0f2c9;
display: block;
line-height: 31px;
text-align: center;
text-decoration: none;
}
#body {
background: #ffffff;
}
#body div.header {
height: 410px;
}
#body div.header div {
position: relative;
}
#body div.header div a img,
#body div.header ul li a.figure img,
#body div.body ul li a img {
display: block;
filter: alpha(opacity=100);
/* Needed for IE8 and old versions */
opacity: 1;
}
#body div.header div a img:hover,
#body div.header ul li a.figure img:hover,
#body div.body ul li a img:hover {
filter: alpha(opacity=90);
/* Needed for IE8 and old versions */
opacity: 0.9;
}
#body div.header div div {
background: url(../images/bg-description.png) repeat-x;
height: 75px;
bottom: 0;
position: absolute;
padding: 17px 20px;
left: 0;
width: 860px;
}
#body div.header div div h1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
text-transform: uppercase;
}
#body div.header div div h1 a {
color: #e3e699;
text-decoration: none;
}
#body div.header div div h1 a:hover {
color: #ffffff;
}
#body div.header div div p {
color: #ffffff;
letter-spacing: 0.028em;
line-height: 24px;
}
#body div.header div div p a.continue {
background: url(../images/interface.png) no-repeat -400px 0;
display: inline-block;
height: 20px;
left: 3px;
position: relative;
top: 5px;
width: 20px;
}
#body div.header div div p a.continue:hover {
background: url(../images/interface.png) no-repeat -400px -20px;
}
#body div.header ul {
background: #356618;
list-style: none;
margin: 0;
overflow: hidden;
padding: 10px 0;
}
#body div.header ul li {
background: url(../images/separator1.png) repeat-y;
float: left;
overflow: hidden;
padding: 9px 20px 7px 0;
width: 280px;
}
#body div.header ul li:first-child {
background: none;
}
#body div#content ul.section li img,
#body div.header ul li a.figure {
display: block;
float: left;
}
#body div.header ul li a.figure img {
display: block;
border: 1px solid #ffffff;
margin: 0 20px 0;
}
#body div.header ul li.current h3 a {
color: #e3e699;
}
#body div.header ul li h3 {
font-size: 16px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.028em;
margin: 0;
padding: 0 0 10px;
}
#body div.header ul li h3 a {
color: #e3e699;
text-decoration: none;
}
#body div.header ul li h3 a:hover {
color: #ffffff;
}
#body div.header ul li p {
color: #ffffff;
letter-spacing: 0.022em;
line-height: 18px;
text-align: left;
}
#body div.body {
padding: 23px 20px 0;
}
#body div.body h1,
#body div.footer div h1 {
background: #dce9d4;
border-bottom: 2px solid #b3cca4;
color: #836145;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
font-weight: normal;
height: 37px;
line-height: 37px;
margin: 0;
padding: 0 0 0 20px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #ffffff;
}
#body div.body ul {
list-style: none;
margin: 0;
overflow: hidden;
padding: 21px 0;
}
#body div.body ul li {
float: left;
margin: 0 0 0 20px;
width: 200px;
}
#body div.body ul li:first-child,
#body div#content ul.section li:first-child,
#body div#content div#sidebar div ul li:first-child {
margin: 0;
}
#body div.body ul li h2 {
color: #836145;
font-size: 16px;
font-weight: normal;
margin: 0;
padding: 24px 0 10px;
text-transform: uppercase;
}
#body div.body ul li p {
color: #4b4b4b;
letter-spacing: 0.028em;
line-height: 24px;
text-align: left;
}
#body div.footer {
border-top: 1px solid #d7d6cd;
margin: 0 20px;
overflow: hidden;
padding: 23px 0;
}
#body div.footer img {
display: block;
float: left;
}
#body div.footer div {
float: right;
width: 540px;
}
#body div.footer div ol {
margin: 0;
padding: 20px 0 0 20px;
}
#body div.footer div ol li {
color: #4b4b4b;
font-weight: bold;
margin: 10px 0;
}
#body div.footer div ol li p {
font-weight: normal;
letter-spacing: 0.028em;
line-height: 24px;
}
#body div#content {
border-top: 1px solid #5d8546;
overflow: hidden;
padding: 35px 20px;
}
#body div#content h1 {
color: #818181;
font-size: 20px;
letter-spacing: 0.028em;
margin: 0;
text-transform: uppercase;
}
#body div#content h3 {
color: #836145;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.028em;
line-height: 24px;
margin: 0;
padding: 30px 0 0;
}
#body div#content h3.first {
padding: 12px 0 0;
}
#body div#content p {
letter-spacing: 0.028em;
line-height: 24px;
padding: 25px 0 0;
}
#body div#content ul.section {
list-style: none;
margin: 0;
padding: 29px 0 0;
}
#body div#content ul.section li {
margin: 35px 0 0;
overflow: hidden;
}
#body div#content ul.section li span {
display: block;
float: left;
}
#body div#content ul.section li div {
float: right;
width: 520px;
}
#body div#content ul.section li div h2,
#body div#content div#article h2 {
color: #836145;
font-size: 16px;
letter-spacing: 0.028em;
line-height: 13px;
margin: 0;
}
#body div#content ul.section li div p {
padding: 23px 0 0;
}
#body div#content form {
margin: 0;
padding: 30px 0 0;
}
#body div#content form p {
color: #818181;
padding: 0 0 25px;
}
#body div#content form label {
display: block;
margin: 20px 0;
overflow: hidden;
}
#body div#content form label span:first-child {
background: none;
color: #836145;
float: left;
height: auto;
text-transform: uppercase;
width: 200px;
}
#body div#content form label span {
background: url(../images/interface.png) no-repeat;
display: block;
float: left;
height: 19px;
width: 320px;
}
#body div#content form label span input {
background: none;
border: none;
color: #818181;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 17px;
letter-spacing: 0.028em;
line-height: 17px;
margin: 1px 0 0 2px;
padding: 0;
width: 316px;
}
#body div#content form label span.message {
background: url(../images/interface.png) no-repeat 0 -25px;
height: 151px;
}
#body div#content form label span.message textarea {
background: none;
border: none;
color: #818181;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 147px;
letter-spacing: 0.028em;
margin: 2px 0 0 2px;
overflow: auto;
padding: 0;
resize: none;
width: 316px;
}
#body div#content form input#send {
background: url(../images/interface.png) no-repeat -331px -56px;
border: none;
color: #ffffff;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 25px;
letter-spacing: 0.028em;
line-height: 25px;
margin: 0 0 0 440px;
text-align: center;
text-shadow: 1px 1px 1px #514b61;
text-transform: uppercase;
width: 80px;
}
#body div#content form input#send:hover {
background: url(../images/interface.png) no-repeat -331px -81px;
}
#body div#content div#article {
border-right: 1px solid #96b285;
float: left;
padding: 0 20px 0 0;
width: 580px;
}
#body div#content div#article img {
display: block;
margin: 0 0 35px;
}
#body div#content div#article h1 {
padding: 0 0 17px;
}
#body div#content div#article h2 {
line-height: 24px;
}
#body div#content div#article span {
color: #818181;
display: block;
letter-spacing: 0.028em;
line-height: 24px;
}
#body div#content div#sidebar {
float: right;
width: 242px;
}
#body div#content div#sidebar h3 {
color: #818181;
font-weight: bold;
line-height: normal;
padding: 0 0 15px;
text-transform: uppercase;
}
#body div#content div#sidebar div {
border-top: 1px solid #96b285;
padding: 20px 0;
}
#body div#content div#sidebar div:first-child {
border: none;
padding: 0 0 20px;
}
#body div#content div#sidebar div ul,
#footer div div ul {
list-style: none;
margin: 0;
padding: 0;
}
#body div#content div#sidebar div ul li {
color: #818181;
letter-spacing: 0.028em;
line-height: 24px;
}
#body div#content div#sidebar div ul li a {
color: #818181;
text-decoration: none;
}
#body div#content div#sidebar div ul li a:hover {
color: #4b4b4f;
}
#body div#content div#sidebar div:first-child ul li {
letter-spacing: 0.024em;
line-height: 18px;
margin: 15px 0 0;
}
#body div#content div#sidebar div p {
color: #818181;
padding: 0;
}
#footer {
background: #dce9d4;
border-top: 1px solid #b8d0aa;
}
#footer div {
height: 174px;
overflow: hidden;
}
#footer div div {
border-left: 1px solid #b8d0aa;
float: left;
height: 134px;
padding: 20px 20px;
width: 180px;
}
#footer div div:first-child {
border: none;
}
#footer div div h1 {
color: #8c8c8c;
font-size: 18px;
font-weight: normal;
margin: 0;
padding: 0 0 13px;
text-shadow: 1px 1px 1px #ffffff;
text-transform: uppercase;
}
#footer div div ul li a {
letter-spacing: 0.028em;
line-height: 18px;
}
#footer div div a {
color: #8c8c8c;
display: block;
letter-spacing: 0.05em;
text-decoration: none;
}
#footer div div a:hover {
color: #4b4b4f;
}
#footer div div a#mail {
background: url(../images/icons.png) no-repeat;
height: 14px;
line-height: 14px;
margin: 0 0 10px;
padding: 0 0 0 30px;
}
#footer div div a#facebook {
background: url(../images/icons.png) no-repeat 0 -38px;
height: 20px;
line-height: 20px;
margin: 0 0 10px;
padding: 0 0 0 30px;
}
#footer div div a#twitter {
background: url(../images/icons.png) no-repeat 0 -88px;
height: 18px;
line-height: 18px;
margin: 0 0 10px;
padding: 0 0 0 30px;
}
#footer div div a#googleplus {
background: url(../images/icons.png) no-repeat 0 -134px;
height: 20px;
line-height: 20px;
margin: 0 0 10px;
padding: 0 0 0 30px;
}
#footer div div a#mail:hover {
background: url(../images/icons.png) no-repeat 0 -14px;
}
#footer div div a#facebook:hover {
background: url(../images/icons.png) no-repeat 0 -58px;
}
#footer div div a#twitter:hover {
background: url(../images/icons.png) no-repeat 0 -106px;
}
#footer div div a#googleplus:hover {
background: url(../images/icons.png) no-repeat 0 -154px;
}
#footer p {
background: #840D22;
color: #ffffff;
height: 37px;
line-height: 37px;
text-align: center;
text-shadow: 1px 1px 1px #8da181;
}
Here is a link to a screenshot of what it should look like. It works in Firefox. On mouseover of a thumbnail on right, it opens a large version of the image in the white space in the body.
http://www.image-share.com/ijpg-2876-171.html
Thank you for any help!
you can use this for your mouseover will make it work in firefox and chrome
onmouseover="document.getElementById('preview').src=this.src"
from what I can find it looks like firefox can apply id variables to javascript in this case preview will be automatically given an id, while chrome does not do this.
Edit:
replace your onmouseover
<img onmouseover="preview.src=this.src" src="gallery/image1.jpg" alt="Image Not Loaded"/>
change to
<img onmouseover="document.getElementById('preview').src=this.src" src="gallery/image1.jpg" alt="Image Not Loaded"/>
edit 2:
to get the first image already in the area just add a src="" to the <img /> inside of the left div, see below:
<div id="content">
<div id="left">
<img id="preview" class="preview" src="http://d.ibtimes.co.uk/en/full/1409516/how-update-nexus-5-official-android-5-0-lollipop-build-lrx21o-via-factory-image.jpg">
</div>
ok, i am having problems with the ndex page im re building ( due to flash drive getting corrupted. :(, i want the nav bar to sit flush with the slider which is below it... at the moement the nav bat is way too the left and it doesnt look very good :/ e.g--->
i will give you both my html and my css to refer to:
HTMLof nav and slider
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="">sports news
<ul>
<li>headlines</li>
<li>when an where</li>
<li>rewind</li>
<li>manager of the week </li>
</ul>
<li class="">music
<ul>
<li>whats new</li>
<li>the classic corner</li>
<li>hall of fame</li>
</ul>
</li>
<li class="news">on air
<ul>
<li>schedule</li>
<li>presenters</li>
<li>competitions</li>
<li>guests</li>
</ul>
</li>
<li class="contact">events</li>
<li class="contact">gallery</li>
<li class="contact">Contact</li>
</ul>
</div>
<div class="cleaner"></div>
<div id="middle">
<div id="slider">
<img src="images/slideshow/01.jpg" alt="slideshow 01" title="wow" />
<img src="images/slideshow/02.jpg" alt="slideshow 02" title="wow" />
<img src="images/slideshow/03.jpg" alt="slideshow 03" title="wow" />
<img src="images/slideshow/04.jpg" alt="slideshow 04" title="wow" />
<img src="images/slideshow/05.jpg" alt="slideshow 05" title="wow" />
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
color: #4d4638;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background: url(images/tooplate_body.jpg);
background-color: #c2b8a1;
background-repeat: repeat-x;
background-position: top
}
a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
.orange {
color: #FC0;
}
.green {
color: #CF6;
}
p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }
a.more {
clear: both;
display: block;
width: 87px;
height: 31px;
padding-right: 15px;
line-height: 30px;
text-align: center;
color: #000;
font-weight: bold;
background: url(images/btn.png);
}
a.more:hover {
text-decoration: none;
color: #960;
}
.float_l { float: left }
.float_r { float: right }
.margin { margin: 10px; }
.image_wrapper {
display: inline-block;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 4px;
margin-bottom: 5px;
}
.image_fl {
float: left;
margin: 3px 15px 0 0;
}
.image_fr {
float: right;
margin: 3px 0 0 15px;
}
.list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.list li {
color:#000;
margin: 0 0 5px 0;
padding: 0 0 0 25px;
background: url(images/list.png) no-repeat scroll 0 5px;
}
.list li a {
color: #000;
font-weight: normal;
}
.list li a:hover {
text-decoration: underline;
}
#header {
width: 960px;
padding: 10px 0;
margin: 0 auto;
}
#site_title {
float: left;
}
#site_title h1 {
margin: 30px 0 0 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 278px;
height: 50px;
color: #fff;
text-indent: -10000px;
background: url(images/logo.png) no-repeat;
}
/* menu */
#menu {
float: right;
width: 632px;
height: 48px;
margin-top: 40px;
background: url(images/menu.png)
}
#menu ul {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
#menu ul li {
float: left;
display: block;
padding: 0;
margin: 0;
display: inline;
text-align: center;
}
#menu ul li a {
display: block;
width: 116px;
padding: 9px 4px 9px 0;
margin: 0;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #000000;
text-shadow: 1px 1px 1px #cec8ba;
font-weight: normal;
outline: none;
border: none;
background: url(images/menu_divider.png) center right no-repeat
}
#menu ul li a:hover, #menu ul li .current {
color: #fff;
text-shadow: 1px 1px 1px #3d3728;
}
#menu ul .last {
background: none;
}
#search_box {
float: right;
margin: 12px 0 0 0;
width: 170px;
height: 27px;
background: url(images/search.png) no-repeat;
}
#search_box form {
clear: both;
width: 170px;
height: 26px;
padding: 0;
margin: 0;
}
#searchfield {
float: left;
display: block;
height: 16px;
width: 130px;
padding: 5px;
font-size: 12px;
color: #ccc;
line-height: 0;
background: none;
border: none;
}
#searchbutton {
float: right;
display: block;
height: 26px;
width: 30px;
padding: 0;
margin: 0;
cursor: pointer;
background: none;
border: none;
}
/* end of menu */
/* slider */
#middle {
clear: both;
width: 940px;
height: 307px;
padding: 10px 40px;
margin: 0 auto;
background: url(images/middle_home.png) no-repeat
}
#middle_subpage {
clear: both;
width: 820px;
height: 207px;
padding: 60px 100px;
margin: 0 auto;
font-family: Georgia, "Times New Roman", Times, serif;
background: url(images/middle_subpage.png) no-repeat;
}
#middle_subpage h2 {
font-size: 48px;
color: #000;
}
#middle_subpage p {
font-size: 18px;
color: #000;
line-height: 30px;
}
#middle_subpage a {
color: #507921;
font-weight: normal;
}
#slider {
float: right;
width: 940px;
height: 300px;
overflow: hidden;
}
/* end of slider */
#main {
clear: both;
width: 960px;
padding: 30px 0;
margin: 0 auto;
}
.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }
.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }
.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }
#cp_contact_form {
margin: 10px;
padding: 0;
width: 412px;
}
#cp_contact_form form {
margin: 0px;
padding: 0px;
}
#cp_contact_form form .input_field {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form label {
display: block;
width: 100px;
margin-right: 10px;
font-size: 14px;
}
#cp_contact_form form textarea {
width: 400px;
height: 160px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form .submit_btn {
margin: 5px 0px;
padding: 5px 14px;
text-decoration: none;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
}
#map {
margin: 10px;
}
#map img {
width: 300px;
height: 200px;
border: 1px solid #d9d3c5;
background: #b5ac98;
padding: 7px;
margin-bottom: 10px;
}
.news_box {
clear: both;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dashed #333;
}
.news_box h2 {
font-size: 20px;
margin-bottom: 0;
}
.news_box p.date {
color: #000;
}
.news_box img {
float: left;
padding: 4px;
border: 1px solid #000;
margin-right: 30px;
}
.news_box a.more {
clear:none;
float: right;
}
.sb_lp_box {
clear: both;
margin-bottom: 20px;
}
.sb_lp_box img {
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box {
clear: both;
margin-bottom: 30px;
}
.post_box h2 {
font-size: 20px;
margin-bottom: 10px;
}
.post_box p.post_meta {
margin-bottom: 0;
}
.post_box p span.cat a {
color: #507921;
font-weight: 400;
}
.post_box img {
width: 550px;
height: 160px;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box a.more {
float: left;
}
.lbe_box {
clear: both;
margin-bottom: 20px;
}
.lbe_box h3 {
font-size: 16px;
margin-bottom: 0;
}
.lbe_box h3 a {
color: #507921;
font-size: 16px;
font-weight: normal;
}
.lbe_box h3 a span {
font-size: 12px;
color: #507921;
}
.lbe_box p {
margin-bottom: 0;
}
.lbe_box p.date {
font-size: 10px;
font-weight: 700;
color: #507921;
}
#gallery {
margin: 0;
padding: 0;
}
#gallery ul {
margin: 0;
padding: 0;
}
#gallery ul li {
display: block;
float: left;
width: 281px;
margin: 0 30px 30px 0;
padding: 8px;
border: 1px solid #d0c9b8;
background: #b6ac97;
}
#gallery ul .third {
margin: 0 0 30px 0;
}
#gallery ul li a img {
border: 1px solid #ccc;
margin-bottom: 5px;
}
#footer_wrapper {
clear: both;
width: 100%;
background: #a19882;
border-top: 10px solid #d0c8b4;
}
#footer {
width: 960px;
margin: 0 auto;
padding: 15px 0;
text-align: center;
color: #000;
background: url(images/footer.jpg) top center no-repeat
}
color: #5fa008;
font-weight: normal;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
.nav ul{
position:relative;
z-index:9999;
}
}
Add this to your CSS:
.nav {
margin-right: auto;
margin-left: auto;
clear: both;
}
I made a fiddle for testing:
http://jsfiddle.net/8x1fkpoe/
On my site, all the pages of text, stay within the wrapper which goes to the bottom of the page. For some reason on a page with images, the wrapper doesn't go to the bottom, nor does the div which holds the images.
Here is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Just Joel</title>
<link href="../CSS/JJ.css" rel="stylesheet" type="text/css" />
<link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css">
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="../js/jquery.corner.js"></script>
<script type='text/javascript' src="../js/slideshow.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="../../../CSS/JJ.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapperfull">
<div id="header">
<img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header">
</div><!-- end header div -->
<div class="navigation">
<div class="menu-holder">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Work
<ul class="submenu">
<li>Print
</li>
<li>Branding
</li>
<li>Photography
</li>
</ul>
</li>
<li>Blog
</li>
<li>Inspired
</li>
<li>Contact
</li>
</ul>
</div>
<!-- menu-holder end -->
</div><!-- end navigation div -->
<div class="blog-container">
<div id="sidebarwrapper">
<div id="sidebar">
<h1>TREE TOP NEWS</h1>
<br>
<p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p>
<p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p>
</div><!--sidebar!-->
</div>
<div class="project">
<img src="../../../Images/Tree Top News/P7158702.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/P7158703.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/P7158711.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/P7158701.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/Tree Top News 2010-6.jpg" alt="Tree Top" class="image" height="378" width="580">
</div>
</div>
</div>
</body>
</html>
Here is the CSS
#wrapperfull {
min-height: 100%;
width: 1050px;
border: none;
margin-top: 0px;
background-color: #FFF;
position: relative; /* for the absolute positioned footer */
margin-right: auto;
margin-bottom: auto;
padding-top: 0.1px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 30px;
}
#head {
height: 100px;
width: 1050px;
border: none;
margin: auto;
background-color: #FFF;
position: fixed;
}
#header {
height: 135px;
width: 1045px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
margin-top: 0px;
}
#footer {
position: absolute;
width: 1050px;
height: 85px;
bottom: 0;
padding: 0px;
margin-bottom: 150px;
}
.footer-style {
padding: 40px;
}
h1 {
font-family: "geogtq md";
color: #00BDE5;
font-size: 25px;
text-decoration: none;
margin-top: 35px;
}
h1:hover {
color: #007889;
font-size: 25px;
}
h2 {
font-family: Helvetica, sans-serif;
color: #00BDE5;
font-size: 25px;
text-decoration: none;
}
h2:hover {
color: #007889;
font-size: 25px;
}
p {
font-family: Helvetica, sans-serif;
color: #01778B;
font-size: 12px;
text-align: justify;
}
img {
float: right;
}
html {
margin: 0;
padding: 0;
border: none;
height: 100%;
}
body {
margin: 0;
padding: 0;
border: none;
height: 100%;
background-image: url(../Images/stripe_70d2cce6f1e8675c4b38e18625444054.png);
background-repeat: repeat;
}
/* because of the box model anong with the height and set width, you'll want to have padding, border, and margin set to 0. Auto left and right margins are ok for centering. */
.container {
height: 100%;
width: 1050px;
margin-top:120px;
display: inline-block;
background-color: #FFF;
}
.heading {
height: 90px;
width: 750px;
float: left;
margin-top: 70px;
position: fixed;
background-color: #FFF;
margin-bottom: 35px;
margin-left: auto;
}
.blog-container {
min-height: 100%;
width: 700px;
margin-top: 170px;
margin-right: 0px;
background-color: #FFF;
}
.work-container {
min-height: 100%;
width: 585px;
margin-top: 70px;
background-color: #FFF;
}
.slideshow {
width: 900px;
list-style: none;
position: relative;
margin-top: 25px;
}
ul.slideshow li {
position: absolute;
left: -2px;
top: -9px;
display: inline;
}
.navigation {
height: 150px;
width: 600px;
margin-top: 0px;
margin-left: auto;
padding-top: 20px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
}
.menu-holder ul {
height: 120px;
padding: 0;
list-style-type: none;
}
.menu-holder ul li {
position: relative;
float: left;
line-height: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 100px;
margin-left: 0px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
}
.menu-holder ul li:hover ul {
display: block;
float: left;
color: #000;
}
.menu-holder ul li a {
font-family: Helvetica, sans-serif;
font-size: 15px;
display: block;
color: #00BDE5;
text-decoration: none;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 0px;
}
.menu-holder ul li a:hover {
color: #007985;
}
.menu-holder ul li ul {
float: none;
display: none;
position: absolute;
top: 35px;
left: -10px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.menu-holder ul li ul:hover {
display: block;
}
.menu-holder ul li ul li {
position: static;
float: none;
display: inline;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px -10px;
margin-right: 20px;
}
.menu-holder ul li ul li a {
display: inline;
margin: 0 0px 0 0px;
-webkit-border-radius: 0;
}
a:link {
text-decoration: none;
color: #000;
font-family: Helvetica, sans-serif;
}
a:hover {
text-decoration: none;
color: #000;
font-family: Helvetica, sans-serif;
}
ul {
font-size: 15px;
margin: 0;
padding: 0;
list-style: none;
margin-right: 40px;
}
ul li, ul li ul li {
display: inline;
position: relative;
float: left;
color: #00BDE5;
}
li ul {
display: none;
width: 450px;
margin-right: 20px;
}
ul ul li a {
font-family: Helvetica, sans-serif;
font-size: 15px;
text-decoration: none;
margin-right: 15px;
white-space: nowrap;
color: #00BDE5;
margin-right: 20px;
}
li:hover ul {
display: inline;
position: absolute;
}
li:hover li {
float: none;
font-size: 15px;
margin-top:3px;
}
.services1 a {
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #00BDE5;
float: left;
list-style-type: none;
}
a:link {
text-decoration: none;
color: #00BDE5;
font-family: Helvetica, sans-serif;
text-align: center;
}
a:hover {
text-decoration: none;
color: #007889;
font-family: Helvetica, sans-serif;
text-align: center;
}
/* Thumb size 230 x 150 px */
.work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
}
.work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: Helvetica, sans-serif;
color: #FFF;
overflow: hidden;
}
.work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 20px;
font-family: Helvetica, sans-serif;
color: #00BDE5;
height: 180px;
border: 1px solid #02BDE5;
overflow: hidden;
text-align: centre;
font-size: 12px;
}
.work_thumbs li .type {
color: #01BDE6;
}
.work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #02BDE5;
text-decoration: none;
color: #007789;
font-family: Helvetica, sans-serif;
text-align: centre;
}
.work_thumbs li .thumb {
margin-bottom: 15px;
display:block
}
.project {
width: 580px;
height: 1000px;
margin-top: 0px;
margin-right: 100px;
left: auto;
background-color: #fff;
}
.single .header {
position:static
}
.single #sidebar a {
color:#000;
}
.single #sidebar a:hover {
color:#4f4f4f
}
.image {
margin: 0px;
padding-bottom:50px;
}
/* Set fixed top margin */
#sidebar {
width: 273px;
height: 200px;
left: 50%;
top: 165px;
background-color: #FFF;
padding: 10px 20px 10px 10px;
color:#00C0EE;
font-family: Helvetica, sans-serif;
position: fixed;
color: #007789;
font-size: 15px;
}
#sidebar h1 {
font-family: Helvetica, sans-serif;
padding: 5px 0 15px 0;
font-weight: normal;
font-size: 18px;
color: #00C0EE;
}
#sidebar p {
padding-bottom: 15px;
font-family: Helvetica, sans-serif;
color: #007789;
height: 100%;
}
#sidebarwrapper {
right: 822px;
position: absolute;
width: 205px;
height: 200px;
top: 248px;
}
* {
margin: 0; padding: 0;
}
#page-wrap {
width: 600px;
margin: 15px auto;
position: relative;
}
#sidebar ul {
background: #EEE;
padding: 10px;
}
li {
float: left;
display: inline;
}
#main {
width: 700px;
float: left;
}
http://jsfiddle.net/Q6Lze/
You need a clearfix to clear the floats contained within. This forces the div containing the floated images take up that space instead of collapse into itself:
.project:after {
display: table;
content: '';
clear: both;
}
Or just add it to div:after instead
I'm using Dreamweaver to edit a template that I got for my new business website. I'm having a problem with the footer and I'm not sure if it's an HTML issue, a CSS issue, or an I'm just an idiot issue. No matter what I do the footer extends down too far. Here's a screenshot of what I'm talking about:
http://tinypic.com/r/t9ccbn/4
Also, I would like the links to line up with the column above it like the contact info and the copyright info do. Here is the HTML:
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<p><br>
9501 W. Sahara Ave. #2082
<br> Las Vegas, NV 89117
<br> 702-409-5373<br>
info#briarpatchfurniture.com
</p>
</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li> Gallery</li>
<li>Contact</li>
<p id="footnote">
© Copyright TIBISI, Inc 2013. All Rights Reserved.
</p>
</div>
</div>
And here is the CSS:
/*------------------------------ FOOTER ------------------------------*/
#footer {
background-color: #e2b241;
border-top: 1px solid #fff;
padding: 28px 0 14px;
}
#footer p {
color: #4b3a33;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#footer > div {
width: 940px;
margin: 0 auto;
padding: 0 10px;
}
#footer .posts {
float: left;
height: 300px;
width: 302px;
padding: 0;
}
#footer .posts li {
width: 276px;
margin: 0 0 30px;
padding-left: 10px;
}
#footer .posts p a {
line-height: 24px;
margin: -3px 0 3px;
}
#links {
background: url(../images/separator-dark.png) repeat-x left bottom;
color: #4b3a33;
display: inline-block;
width: 940px;
padding: 0 0 20px;
}
#links h4 {
color: #241b18;
font-family: "Oswald";
font-size: 15px;
font-weight: normal;
line-height: 24px;
margin: 0 0 12px;
padding-left: 10px;
text-transform: uppercase;
}
#links > div {
float: left;
background: url(../images/separator-dark-vertical.png) repeat-y left top;
height: 300px;
padding-left: 20px;
}
#links .showroom {
background: none;
width: 293px;
padding-left: 0;
padding-right: 15px;
}
#links .showroom h4 {
padding-left: 0;
}
#links .showroom img {
margin-bottom: 12px;
}
#links .showroom p {
font-size: 13px;
margin: 0;
}
#links .showroom p em {
color: #fff;
display: block;
font-style: normal;
margin: 0 0 20px;
}
#links .showroom p a {
color: #4b3a33;
display: block;
}
#links .showroom p a:hover {
color: #241b18;
}
#newsletter {
background: url(../images/separator-dark.png) repeat-x left bottom;
width: 284px;
margin: 0 0 16px 6px;
padding: 0 0 20px;
}
#newsletter h4 {
padding-left: 0;
}
#newsletter input {
color: #4b3a33;
height: 26px;
line-height: 26px;
width: 269px;
border: 3px solid #af8112;
margin: 0 0 6px;
padding: 0 4px;
*margin-left: -6px; /** Needed for IE7 **/
}
#newsletter input.btn2 {
color: #fff;
width: 83px;
border: 0;
padding: 0px 0 2px;
}
#connect a {
display: inline-block;
height: 33px;
margin: 0 10px;
}
#connect a.facebook {
background-position: -46px -112px;
width: 33px;
}
#connect a.googleplus {
background-position: -46px -153px;
width: 34px;
}
#connect a.twitter {
background-position: -46px -194px;
width: 40px;
}
#connect a.facebook:hover {
background-position: 0 -112px;
}
#connect a.googleplus:hover {
background-position: 0 -153px;
}
#connect a.twitter:hover {
background-position: 0 -194px;
}
#footer ul.navigation {
float: right;
display: block;
line-height: 24px;
list-style: none;
margin: 0;
padding: 0 12px 0 0;
}
#footer ul.navigation li {
float: left;
margin-left: 15px;
}
#footer ul.navigation li:first-child {
margin-left: 0;
}
#footer ul.navigation li a {
color: #ab7d0f;
font: 11px/24px "Oswald";
text-decoration: none;
text-transform: uppercase;
}
#footer ul.navigation li a:hover {
color: #241b18;
}
#footer #footnote {
color: #ab7d0f;
font: 11px/24px "Oswald";
margin: 0;
text-transform: uppercase;
}
Any help will be appreciated.
http://jsfiddle.net/GCqfE/
Your use of line-height in all of the child elements of the footer is causing the footer to expand downwards vertically, and without a height value given for the parent div they are free to expand. Either change the line-heights to smaller values, or prescribe a height for the parent footer div like so:
#footer {
background-color: #e2b241;
border-top: 1px solid #fff;
padding: 28px 0 14px;
height:100px;
}
I've updated your jsFiddle: http://jsfiddle.net/GCqfE/1/