Check this website My Html. When you hover to product, the menu will move down.. But how can you make the drop down appear without moving anything?Like the dropdown menu is on top and not inserted in between? Sorry but I am just a newbie to this..
Thanks.
My Html Code
<!DOCTYPE html>
<!-- Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="utf-8" />
<title>LotMovement</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.jpg" alt="" />
</div>
<nav>
<ul>
<li class="selected"><span>home</span></li>
<li>
<span>Product </span>
<ul>
<li>
Input
</li>
<li>
Enquiry
</li>
</ul>
</li>
<li><span>Movement</span></li>
<li><span>contact us</span></li>
</ul>
</nav>
</div>
<div id="body">
<div class="header">
<div>
<ul>
<li><img src="images/discuss.jpg" alt="" /></li>
<li><img src="images/graph.jpg" alt="" /></li>
</ul>
<div>
<h3>Lot Movement Tracking System</h3>
<form>
User Name
Pass Pasword
</form>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<div>
<h3>AusTralAsia</h3>
<ul>
<ul>
<li>+630212013129 -Main</li>
</ul>
</ul>
</div>
<div>
<h3>europe</h3>
<ul>
<li>To Be Announced</li>
</ul>
</div>
<div>
<h3>canada</h3>
<ul>
<li>To Be Announced</li>
<li></li>
</ul>
</div>
<div>
<h3>middle east</h3>
<ul>
<li>To Be Announced</li>
<li></li>
</ul>
</div>
<div>
<h3>follow us:</h3>
<a class="facebook" href="http://www.facebook.com/" target="_blank">facebook</a>
<a class="twitter" href="http://twitter.com" target="_blank">twitter</a>
</div>
</div>
<div>
<p>© Copyright 2012. All rights reserved</p>
</div>
</div>
</body>
</html>
My CSS
/* Template by freewebsitetemplates.com */
body {
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding: 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
#body {
background: url(images/bg-content.gif) repeat-x top left;
margin: 0;
padding: 0;
min-width: 960px;
}
#body .header {
background: url(images/bg-body.gif) repeat-x bottom center;
margin: 0 0 30px 0;
}
#body .header div {
background: url(images/smiling-man.jpg) no-repeat bottom right;
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
#body .header div div {
background: none;
margin: 0;
padding: 0 0 0 13px;
height: 200px;
width: 490px;
}
#body .header div h3 {
color: #2a4f5e;
font-size: 20px;
line-height: 30px;
margin: 18px 0 0 0;
padding: 0;
text-shadow: 1px 1px 1px #fff;
}
#body .header div h3 span {
display: block;
font-size: 25px;
}
#body .header div h3 a {
color: #2a4f5e;
text-decoration: none;
}
#body .header div h3 a:hover {
color: #507685;
}
#body .header div p {
color: #507685;
font-size: 14px;
line-height: 24px;
margin: 12px 0 6px 0;
padding: 0;
text-shadow: 1px 1px 1px #fff;
}
#body .header div p a {
color: #507685;
}
#body .header div p a:hover {
color: #2a4f5e;
}
#body .header ul {
overflow: hidden;
margin: 0;
padding: 49px 0 0;
}
#body .header ul li {
float: left;
list-style: none;
padding: 0 5px;
}
#body .body {
border: 1px solid #e0e0e0;
margin: 0 auto 34px auto;
overflow: hidden;
padding: 0 2px;
width: 954px;
}
#body .body div {
float: left;
}
#body .body .section {
background: url(images/bg-section.gif) repeat-x top left;
height: 193px;
margin: 0;
padding: 35px 0 0 40px;
width: 186px;
}
#body .body .section img {
display: block;
}
#body .body .section a {
color: #2a4f5e;
display: block;
font-size: 14px;
font-weight: bold;
height: 145px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 145px;
}
#body .body .section a:hover {
color: #507685;
}
#body .body .section img {
border: 0;
}
#body .body .article {
background: url(images/bg-article.gif) no-repeat top center;
overflow: hidden;
padding: 19px 16px;
width: 470px;
}
#body .body .article img {
border: 0;
float: left;
padding: 0 10px 0 0;
}
#body .body .article h4 {
color: #2a4f5e;
font-size: 15px;
font-weight: bold;
margin: 12px 0;
padding: 0;
}
#body .body .article h4 a {
color: #2a4f5e;
text-decoration: none;
}
#body .body .article h4 a:hover {
color: #507685;
}
#body .body .article p {
color: #2a4f5e;
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 0;
}
#body .body .article p a {
color: #2a4f5e;
}
#body .body .article p a:hover {
color: #346b84;
}
#body .footer {
margin: 0 auto;
overflow: hidden;
padding: 0 0 15px 0;
width: 960px;
}
#body .footer div {
float: left;
margin: 0;
padding: 0;
}
#body .footer div ul {
margin: 0;
padding: 0;
}
#body .footer div ul li {
list-style: none;
margin: 0 0 15px;
padding: 0 0 15px;
}
#body .footer h3 {
color: #2a4f5e;
font-size: 14px;
line-height: 26px;
margin: 0 0 12px 0;
padding: 0;
text-align: justify;
text-transform: uppercase;
}
#body .footer h3 a {
color: #2a4f5e;
text-decoration: none;
}
#body .footer h3 a:hover {
color: #507685;
}
#body .footer .section {
padding: 0 10px;
width: 220px;
}
#body .footer ul li {
background: url(images/border-dashed.gif) repeat-x bottom left;
}
#body .footer ul li:last-child {
background: none;
}
#body .footer li p {
color: #5d5d5d;
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .footer li p a {
color: #5d5d5d;
text-decoration: underline;
}
#body .footer li p a:hover {
color: #aeaeae;
}
#body .footer li span {
color: #aeaeae;
display: block;
font-size: 10px;
line-height: 16px;
margin: 5px 0 0;
padding:0;
}
#body .footer ul.news li p {
background: url(images/bullets.gif) no-repeat 0 8px;
padding: 0 0 0 15px;
}
#body .footer .featured {
padding: 0 18px 0 24px;
width: 438px;
}
#body .footer .featured ul li {
overflow: hidden;
}
#body .footer .featured img {
border: 1px solid #dbddde;
float: left;
margin: 0 20px 0 0;
padding: 1px;
}
#body .footer .featured p {
margin: 0;
padding: 0;
}
#body .contact,
#body .about,
#body .services,
#body .blog {
margin: 0 auto;
padding: 25px 10px 50px 10px;
width: 940px;
}
#body h1 {
color: #2a4f5e;
font-size: 27px;
font-weight: bold;
height: 74px;
line-height: 74px;
margin: 0;
padding: 0;
text-indent: 10px;
text-transform: uppercase;
}
#body .contact p {
color: #7b7b7b;
font-size: 15px;
font-weight: bold;
line-height: 26px;
margin: 0;
padding: 40px 0;
text-align: justify;
width: 830px;
}
#body .contact p a {
color: #7b7b7b;
}
#body .contact p a:hover {
color: #2a4f5e;
}
#body .contact div {
margin: 0;
padding: 0 0 30px 0;
}
#body .contact div h3 {
color: #5d5d5d;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 0 0 5px 0;
}
#body .contact div ul {
margin: 0;
padding: 0 0 20px 0;
}
#body .contact div ul li {
color: #5d5d5d;
font-size: 14px;
list-style: none;
margin: 0;
padding: 5px 0;
}
#body .about div {
padding: 50px 0 0 0;
}
#body .about h2 {
color: #2a4f5e;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#body .about p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
margin: 10px 0 0;
padding: 0;
text-align: justify;
width: 830px;
}
#body .about p a {
color: #5d5d5d;
}
#body .about p a:hover {
color: #2a4f5e;
}
#body .services div {
overflow: hidden;
margin: 0;
padding: 40px 0 0;
}
#body .services h2 {
color: #2a4f5e;
font-size: 16px;
font-weight: bold;
line-height: 24px;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#body .services h2 a {
color: #2a4f5e;
}
#body .services h2 a:hover {
color: #507685;
}
#body .services h3 {
color: #2a4f5e;
font-size: 14px;
font-weight: bold;
line-height: 24px;
margin: 15px 0 0;
padding: 0 30px 0 0;
text-transform: uppercase;
}
#body .services h3 a {
color: #2a4f5e;
}
#body .services h3 a:hover {
color: #507685;
}
#body .services h4 {
color: #2a4f5e;
font-size: 16px;
font-weight: normal;
line-height <ul>
A 0;
padding: 0;
text-transform: uppercase;
}
#body .services p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
}
#body .services p a {
color: #5d5d5d;
}
#body .services p a:hover {
color: #2a4f5e;
}
#body .services div ul {
float: left;
margin: 0;
padding: 20px 0 0;
width: 312px;
}
#body .services div ul li {
background: url(images/bullets.gif) no-repeat center left;
color: #5d5d5d;
font-size: 14px;
list-style: none;
margin: 0;
padding: 5px 0 5px 12px;
text-align: left;
}
#body .services div div {
overflow: hidden;
margin: 0;
padding: 0 0 5px 0;
}
#body .services div div img {
float: left;
padding: 0 10px 0 0;
}
#body .services div div p {
padding: 0 30px 0 0;
text-align: justify;
}
#body .products {
margin: 0 auto;
padding: 25px 0 70px 0;
width: 960px;
}
#body .products h2 {
color: #2a4f5e;
font-size: 26px;
margin: 0;
text-align: center;
text-transform: uppercase;
padding: 90px 0 30px 0;
}
#body .products p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0 10px;
text-align: justify;
}
#body .products p a {
color: #5d5d5d;
}
#body .products p a:hover {
color: #2a4f5e;
}
#body .products div {
overflow: hidden;
margin: 0 0 45px 0;
padding: 0;
}
#body .products div div {
float: left;
margin: 0;
padding: 0 10px;
text-align: center;
width: 300px;
}
#body .products div div h3 {
color: #2a4f5e;
font-size: 16px;
line-height: 24px;
margin: 0;
padding: 0 0 10px 0;
text-align: justify;
text-transform: uppercase;
}
#body .products div p {
font-size: 16px;
}
#body .products div div p {
font-size: 14px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .blog {
overflow: hidden;
}
#body .blog div {
float: left;
padding: 60px 0 0 0;
width: 630px;
}
#body .blog ul {
float: left;
margin: 0;
padding: 38px 0 0 30px;
width: 280px;
}
#body .blog ul li {
background: url(images/border-dashed.gif) repeat-x bottom left;
list-style: none;
margin: 0;
padding: 22px 0;
}
#body .blog ul li:last-child {
background: none;
}
#body .blog h2 {
color: #2a4f5e;
font-size: 16px;
margin: 0;
padding: 0;
text-transform: capitalize;
}
#body .blog h3 {
color: #5d5d5d;
font-size: 14px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .blog h3 a {
color: #5d5d5d;
}
#body .blog h3 a:hover {
color: #2a4f5e;
}
#body .blog p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .blog p a {
color: #5d5d5d;
}
#body .blog p a:hover {
color: #2a4f5e;
}
#body .blog div p {
padding: 15px 0;
}
#body .blog div p.article {
font-weight: bold;
}
#footer {
background: #f5f5f5 url(images/bg-footer.gif) repeat-x top left;
margin: 0;
min-width: 960px;
padding: 0;
}
#footer div {
margin: 0 auto;
overflow: hidden;
padding: 26px 0 0;
width: 960px;
}
#footer div div {
float: left;
margin: 0;
padding: 0;
text-align: center;
width: 192px;
}
#footer div div h3 {
color: #818a8c;
font-size: 12px;
font-weight: bold;
margin: 0 0 5px 0;
padding: 0;
text-transform: uppercase;
}
#footer div div ul,
#footer div div ul li {
margin: 0;
list-style: none;
padding: 0;
}
#footer div div ul li {
font-size: 12px;
line-height: 22px;
color: #818a8c;
}
#footer div a.facebook,
#footer div a.twitter {
display: block;
float: left;
height: 27px;
margin: 10px 0 0;
text-indent: -99999em;
width: 40px;
}
#footer div a.facebook,
#footer div a.twitter {
background: url(images/icons.gif) no-repeat;
}
#footer div a.facebook {
background-position: 0 0;
margin: 10px 0 0 58px;
_margin: 10px 0 0 28px;
}
#footer div a.twitter {
background-position: 0 -37px;
}
#footer div p {
color: #c1c1c1;
font-size: 12px;
margin: 0;
padding: 0 0 30px 0;
text-align: center;
text-shadow: 1px 1px 1px #fff;
}
Try adding position: absolute; property to the ul element:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
position: absolute;
display: block;
}
Related
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;
}
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/
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/
I have a main css file.. It is common to all my jsp. On my other jsp, I need to remove a background picture.. How can i overlapped it?
Part of the css that should be overlapped.
#body .header div {
background: url(images/smiling-man.jpg) no-repeat bottom right; --> i want this
removed. by overlapping it with another css.
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
This is what i have done.. just removing the the background does not worked and added a class overlap on the div.
.overlap{
background:none;
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
My HTML
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="product.css">
<title>Lot Movement Main Page</title>
</head>
<body>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.jpg" alt="" />
</div>
<nav>
<ul>
<li class="selected"><span>home</span></li>
<li> <span>Product </span>
<ul>
<li>
<span>Input</span>
</li>
<li>
<span>Enquiry</span>
</li>
</ul>
</li>
<li><span>Movement</span></li>
<li><span>contact us</span></li>
</ul>
</nav>
</div>
<div id="body">
<div class="header">
<div id ="prodoverlap">
<h3>Lot Movement Tracking System</h3>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<div>
<h3>AusTralAsia</h3>
<ul>
<ul>
<li>+630212013129 -Main</li>
</ul>
</ul>
</div>
<div>
<h3>europe</h3>
<ul>
<li>To Be Announced</li>
</ul>
</div>
<div>
<h3>canada</h3>
<ul>
<li>To Be Announced</li>
<li></li>
</ul>
</div>
<div>
<h3>middle east</h3>
<ul>
<li>To Be Announced</li>
<li></li>
</ul>
</div>
<div>
<h3>follow us:</h3>
<a class="facebook" href="http://www.facebook.com/" target="_blank">facebook</a>
<a class="twitter" href="http://twitter.com" target="_blank">twitter</a>
</div>
</div>
<div>
<p>© Copyright 2012. All rights reserved</p>
</div>
</div>
</body>
</body>
</html>
My Main CSS
/* Template by freewebsitetemplates.com */
body {
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding: 0;
}
#header {
margin:0 auto;
padding: 0;
overflow: hidden;
width: 960px;
}
#header #logo {
float: left;
height: 144px;
width: 355px;
}
#header #logo img {
border: 0;
}
#header ul li {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
width: 121px;
}
#header ul li a,
#header ul li a span,
#header ul li a:hover,
#header ul li a:hover span,
#header ul li.selected a,
#header ul li.selected a span
{
background: url(images/menu.gif);
}
#header ul li a
{
background-position: 10px 0;
color: #2a4f5e;
display: block;
font-size: 14px;
height: 36px;
line-height: 36px;
margin: 0;
padding: 0 0 0 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #fff;
}
#header ul li a span
{
background-position: -70px 0;
display: block;
margin: 0;
padding: 0 10px 0 0;
}
#header ul li a:hover {
background-position: -186px -37px;
color: #346b84;
text-shadow: none;
}
#header ul li a:hover span {
background-position: -70px -37px;
}
#header ul li.selected a{
background-position: 10px 36px;
color: #fff;
text-shadow: none;
}
#header ul li.selected a span{
background-position: -70px -74px;
}
/*dropdown*/
#header ul ul {
display: none;
}
#header ul li:hover > ul {
display: block;
}
#header ul ul li a span
{
background-position: -70px 0;
font-size: 10px;
text-transform: none;
display: block;
margin: 0;
padding: 0 10px 0 0;
}
#header ul ul li a:hover {
background-position: -186px -37px;
color: #346b84;
text-shadow: none;
}
#body {
background: url(images/bg-content.gif) repeat-x top left;
margin: 0;
padding: 0;
min-width: 960px;
}
#body .header {
background: url(images/bg-body.gif) repeat-x bottom center;
margin: 0 0 30px 0;
}
#body .header div {
background: url(images/smiling-man.jpg) no-repeat bottom right;
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
#body .header div div {
background: none;
margin: 0;
padding: 0 0 0 13px;
height: 200px;
width: 490px;
}
#body .header div h3 {
color: #2a4f5e;
font-size: 20px;
line-height: 30px;
margin: 18px 0 0 0;
padding: 0;
text-shadow: 1px 1px 1px #fff;
}
#body .header div h3 span {
display: block;
font-size: 25px;
}
#body .header div h3 a {
color: #2a4f5e;
text-decoration: none;
}
#body .header div h3 a:hover {
color: #507685;
}
#body .header div p {
color: #507685;
font-size: 14px;
line-height: 24px;
margin: 12px 0 6px 0;
padding: 0;
text-shadow: 1px 1px 1px #fff;
}
#body .header div p a {
color: #507685;
}
#body .header div p a:hover {
color: #2a4f5e;
}
#body .header ul {
overflow: hidden;
margin: 0;
padding: 49px 0 0;
}
#body .header ul li {
float: left;
list-style: none;
padding: 0 5px;
}
#body .body {
border: 1px solid #e0e0e0;
margin: 0 auto 34px auto;
overflow: hidden;
padding: 0 2px;
width: 954px;
}
#body .body div {
float: left;
}
#body .body .section {
background: url(images/bg-section.gif) repeat-x top left;
height: 193px;
margin: 0;
padding: 35px 0 0 40px;
width: 186px;
}
#body .body .section img {
display: block;
}
#body .body .section a {
color: #2a4f5e;
display: block;
font-size: 14px;
font-weight: bold;
height: 145px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 145px;
}
#body .body .section a:hover {
color: #507685;
}
#body .body .section img {
border: 0;
}
#body .body .article {
background: url(images/bg-article.gif) no-repeat top center;
overflow: hidden;
padding: 19px 16px;
width: 470px;
}
#body .body .article img {
border: 0;
float: left;
padding: 0 10px 0 0;
}
#body .body .article h4 {
color: #2a4f5e;
font-size: 15px;
font-weight: bold;
margin: 12px 0;
padding: 0;
}
#body .body .article h4 a {
color: #2a4f5e;
text-decoration: none;
}
#body .body .article h4 a:hover {
color: #507685;
}
#body .body .article p {
color: #2a4f5e;
font-size: 14px;
line-height: 22px;
margin: 0;
padding: 0;
}
#body .body .article p a {
color: #2a4f5e;
}
#body .body .article p a:hover {
color: #346b84;
}
#body .footer {
margin: 0 auto;
overflow: hidden;
padding: 0 0 15px 0;
width: 960px;
}
#body .footer div {
float: left;
margin: 0;
padding: 0;
}
#body .footer div ul {
margin: 0;
padding: 0;
}
#body .footer div ul li {
list-style: none;
margin: 0 0 15px;
padding: 0 0 15px;
}
#body .footer h3 {
color: #2a4f5e;
font-size: 14px;
line-height: 26px;
margin: 0 0 12px 0;
padding: 0;
text-align: justify;
text-transform: uppercase;
}
#body .footer h3 a {
color: #2a4f5e;
text-decoration: none;
}
#body .footer h3 a:hover {
color: #507685;
}
#body .footer .section {
padding: 0 10px;
width: 220px;
}
#body .footer ul li {
background: url(images/border-dashed.gif) repeat-x bottom left;
}
#body .footer ul li:last-child {
background: none;
}
#body .footer li p {
color: #5d5d5d;
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .footer li p a {
color: #5d5d5d;
text-decoration: underline;
}
#body .footer li p a:hover {
color: #aeaeae;
}
#body .footer li span {
color: #aeaeae;
display: block;
font-size: 10px;
line-height: 16px;
margin: 5px 0 0;
padding:0;
}
#body .footer ul.news li p {
background: url(images/bullets.gif) no-repeat 0 8px;
padding: 0 0 0 15px;
}
#body .footer .featured {
padding: 0 18px 0 24px;
width: 438px;
}
#body .footer .featured ul li {
overflow: hidden;
}
#body .footer .featured img {
border: 1px solid #dbddde;
float: left;
margin: 0 20px 0 0;
padding: 1px;
}
#body .footer .featured p {
margin: 0;
padding: 0;
}
#body .contact,
#body .about,
#body .services,
#body .blog {
margin: 0 auto;
padding: 25px 10px 50px 10px;
width: 940px;
}
#body h1 {
color: #2a4f5e;
font-size: 27px;
font-weight: bold;
height: 74px;
line-height: 74px;
margin: 0;
padding: 0;
text-indent: 10px;
text-transform: uppercase;
}
#body .contact p {
color: #7b7b7b;
font-size: 15px;
font-weight: bold;
line-height: 26px;
margin: 0;
padding: 40px 0;
text-align: justify;
width: 830px;
}
#body .contact p a {
color: #7b7b7b;
}
#body .contact p a:hover {
color: #2a4f5e;
}
#body .contact div {
margin: 0;
padding: 0 0 30px 0;
}
#body .contact div h3 {
color: #5d5d5d;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 0 0 5px 0;
}
#body .contact div ul {
margin: 0;
padding: 0 0 20px 0;
}
#body .contact div ul li {
color: #5d5d5d;
font-size: 14px;
list-style: none;
margin: 0;
padding: 5px 0;
}
#body .about div {
padding: 50px 0 0 0;
}
#body .about h2 {
color: #2a4f5e;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#body .about p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
margin: 10px 0 0;
padding: 0;
text-align: justify;
width: 830px;
}
#body .about p a {
color: #5d5d5d;
}
#body .about p a:hover {
color: #2a4f5e;
}
#body .services div {
overflow: hidden;
margin: 0;
padding: 40px 0 0;
}
#body .services h2 {
color: #2a4f5e;
font-size: 16px;
font-weight: bold;
line-height: 24px;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#body .services h2 a {
color: #2a4f5e;
}
#body .services h2 a:hover {
color: #507685;
}
#body .services h3 {
color: #2a4f5e;
font-size: 14px;
font-weight: bold;
line-height: 24px;
margin: 15px 0 0;
padding: 0 30px 0 0;
text-transform: uppercase;
}
#body .services h3 a {
color: #2a4f5e;
}
#body .services h3 a:hover {
color: #507685;
}
#body .services h4 {
color: #2a4f5e;
font-size: 16px;
font-weight: normal;
line-height: 24px;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#body .services p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
}
#body .services p a {
color: #5d5d5d;
}
#body .services p a:hover {
color: #2a4f5e;
}
#body .services div ul {
float: left;
margin: 0;
padding: 20px 0 0;
width: 312px;
}
#body .services div ul li {
background: url(images/bullets.gif) no-repeat center left;
color: #5d5d5d;
font-size: 14px;
list-style: none;
margin: 0;
padding: 5px 0 5px 12px;
text-align: left;
}
#body .services div div {
overflow: hidden;
margin: 0;
padding: 0 0 5px 0;
}
#body .services div div img {
float: left;
padding: 0 10px 0 0;
}
#body .services div div p {
padding: 0 30px 0 0;
text-align: justify;
}
#body .products {
margin: 0 auto;
padding: 25px 0 70px 0;
width: 960px;
}
#body .products h2 {
color: #2a4f5e;
font-size: 26px;
margin: 0;
text-align: center;
text-transform: uppercase;
padding: 90px 0 30px 0;
}
#body .products p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0 10px;
text-align: justify;
}
#body .products p a {
color: #5d5d5d;
}
#body .products p a:hover {
color: #2a4f5e;
}
#body .products div {
overflow: hidden;
margin: 0 0 45px 0;
padding: 0;
}
#body .products div div {
float: left;
margin: 0;
padding: 0 10px;
text-align: center;
width: 300px;
}
#body .products div div h3 {
color: #2a4f5e;
font-size: 16px;
line-height: 24px;
margin: 0;
padding: 0 0 10px 0;
text-align: justify;
text-transform: uppercase;
}
#body .products div p {
font-size: 16px;
}
#body .products div div p {
font-size: 14px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .blog {
overflow: hidden;
}
#body .blog div {
float: left;
padding: 60px 0 0 0;
width: 630px;
}
#body .blog ul {
float: left;
margin: 0;
padding: 38px 0 0 30px;
width: 280px;
}
#body .blog ul li {
background: url(images/border-dashed.gif) repeat-x bottom left;
list-style: none;
margin: 0;
padding: 22px 0;
}
#body .blog ul li:last-child {
background: none;
}
#body .blog h2 {
color: #2a4f5e;
font-size: 16px;
margin: 0;
padding: 0;
text-transform: capitalize;
}
#body .blog h3 {
color: #5d5d5d;
font-size: 14px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .blog h3 a {
color: #5d5d5d;
}
#body .blog h3 a:hover {
color: #2a4f5e;
}
#body .blog p {
color: #5d5d5d;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0;
text-align: justify;
}
#body .blog p a {
color: #5d5d5d;
}
#body .blog p a:hover {
color: #2a4f5e;
}
#body .blog div p {
padding: 15px 0;
}
#body .blog div p.article {
font-weight: bold;
}
#footer {
background: #f5f5f5 url(images/bg-footer.gif) repeat-x top left;
margin: 0;
min-width: 960px;
padding: 0;
}
#footer div {
margin: 0 auto;
overflow: hidden;
padding: 26px 0 0;
width: 960px;
}
#footer div div {
float: left;
margin: 0;
padding: 0;
text-align: center;
width: 192px;
}
#footer div div h3 {
color: #818a8c;
font-size: 12px;
font-weight: bold;
margin: 0 0 5px 0;
padding: 0;
text-transform: uppercase;
}
#footer div div ul,
#footer div div ul li {
margin: 0;
list-style: none;
padding: 0;
}
#footer div div ul li {
font-size: 12px;
line-height: 22px;
color: #818a8c;
}
#footer div a.facebook,
#footer div a.twitter {
display: block;
float: left;
height: 27px;
margin: 10px 0 0;
text-indent: -99999em;
width: 40px;
}
#footer div a.facebook,
#footer div a.twitter {
background: url(images/icons.gif) no-repeat;
}
#footer div a.facebook {
background-position: 0 0;
margin: 10px 0 0 58px;
_margin: 10px 0 0 28px;
}
#footer div a.twitter {
background-position: 0 -37px;
}
#footer div p {
color: #c1c1c1;
font-size: 12px;
margin: 0;
padding: 0 0 30px 0;
text-align: center;
text-shadow: 1px 1px 1px #fff;
}
My other CSS to overwrite.
/*
Document : login
Created on : Nov 15, 2012, 2:15:26 PM
Author : god-gavedmework
Description:
Purpose of the stylesheet follows.
*/
.overlap{
background:none;
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
table
{
position:absolute;
width: 20%;
float: left;
}
.errorMessage {
color: red;
font-size: 0.8em;
}
You could try to use the visibility hidden that way it will take the same space but will be invisible
.overlap{
background:none;
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
visibility:hidden;
}
#body .header #prodoverlap{
background:none;
height: 472px;
margin: 0 auto;
padding: 0;
width: 960px;
}
Please add this css code in your other CSS file
Thanks.