So my CSS layout was all fine until I wanted to add some into the content area of my web page.
What I'm trying to add into the content section is a wrapper box which contains a graph on the left and a bunch of little info boxes on the right, and potentially an info area underneath those two with 100% width of the content box.
But as soon as I add that in, it pushes my User Info div down below Content. =/ So I guess what's asking is how to create containers of divs within my content section that won't affect things like my sidebar?
Here's my code:
<div id="wrapper">
<div id="header"> </div><!-- #header-->
<div id="nav"> </div>
<div id="middle">
<div id="container">
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div></div>
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
User info
</div><!-- .sidebar#sideLeft -->
</div><!-- #middle-->
</div><!-- #wrapper -->
And the css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
margin-left: -100%;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
You didn't close a div and your CSS had errors as well:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="A short description." />
<meta name="keywords" content="put, keywords, here" />
<title>CraftLink</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">HEADER CONTENT</div><!-- #header-->
<div id="nav">
Nav item 1
Nav item 2
Nav item 3
Nav item 4
</div>
<div id="middle">
<div id="container">
<div class="sidebar" id="sideLeft">USER INFO GOES HERE.</div><!-- .sidebar#sideLeft -->
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div>
</div>
</div><!-- #content-->
</div><!-- #container-->
</div><!-- #middle-->
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
<h1>Footer Stuff</h1>
</div>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
a {
color: white;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 100px;
background: #999999;
text-align: center;
font-size: 200%;
}
#nav {
height: 25px;
background: #555555;
text-align: center;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
}
/* Progress bar
----------------------------------------------------------------------------*/
.meter-wrap{
position: relative;
}
.meter-wrap, .meter-value, .meter-text {
/* The width and height of your image */
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #3D352A url(/path/to/your-image.png) top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 5px;
color: #fff;
text-align: center;
width: 100%;
}
Related
I wanted to make a parallax effect but I try lots of ways still can't do it. now I have half of the parallax effect which is the background image are fixed, without moving and the next image will cover the previous image, but now I want it to become when I scrolling down the background image will move down too but just slower than the original speed.
My code here
<!DOCTYPE html>
<html>
<style>
html, body
{
height: 100%;
width: 100%
}
html
{
overflow:hidden;
}
body
{
color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
overflow-x:hidden;
overflow-y:scroll;
}
*
{
margin:0;
padding:0;
font-family: Century Gothic;
}
.top
{
background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)), url('../image/Kinkis-Bottomless-Brunch-Lead-Image.jpg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.bottom
{
background-image:url('../image/AdobeStock_80592193.jpeg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.main{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.main2{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.nav
{
float:left;
list-style-type: none;
margin-top:55px;
margin-left:65px;
}
.account
{
font-size: 25px;
font-family:"Times New Roman", Times, serif;
}
ul li
{
display: inline-block;
}
ul li a
{
text-decoration:none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover
{
background-color: #fff;
color:#000;
}
ul li .active a
{
background-color: #fff;
color: #000;
}
.logo img
{
float: left;
width: 150px;
height: auto;
margin-top: 40px;
}
.title
{
position: absolute;
top: 45%;
left: 34%;
}
.title h1
{
color:#fff;
font-size:70px;
font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}
.title2
{
position: absolute;
top: 110%;
left: 23%;
}
.title2 h2
{
color: black;
font-size:70px;
font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}
</style>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Home Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top">
<div class="main">
<div class="logo">
<img alt="" src="TAO_LOGO1.jpg">
</div>
<ul class="nav">
<li>Gallary</li>
<li>Account</li>
</ul>
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
<div class="bottom">
<div class="main">
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
</body>
</html>
Here's a very simple example of a parallax effect using jQuery:
$(document).scroll(function() {
var scroll = $(window).scrollTop();
$("img").css("top", "0" + (scroll / 1.8) + "px");
});
body {
margin: 0;
}
img {
position: absolute;
top: 0;
z-index: -1;
}
.block {
background: #ffffff;
position: relative;
margin-top: 100px;
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<img src="https://placeimg.com/640/480/any">
<div class="block">Some text</div>
</div>
and here the same approach is specifically applied to your case:
$(document).scroll(function() {
var scroll = $(window).scrollTop();
$("#header").css("background-position", "0%" + (scroll / -1.8) + "px");
});
html,
body {
height: 100%;
width: 100%
}
html {
}
body {
color: #fff;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
font-family: Century Gothic;
}
.top {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url('https://placeimg.com/640/640/any');
height: 500px;
background-size: cover;
background-position: 0 0;
background-attachment: fixed;
}
.bottom {
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.main {
max-width: 1500px;
margin: auto;
margin-left: 80px;
}
.main2 {
max-width: 1500px;
margin: auto;
margin-left: 80px;
}
.nav {
float: left;
list-style-type: none;
margin-top: 55px;
margin-left: 65px;
}
.account {
font-size: 25px;
font-family: "Times New Roman", Times, serif;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover {
background-color: #fff;
color: #000;
}
ul li .active a {
background-color: #fff;
color: #000;
}
.logo img {
float: left;
width: 150px;
height: auto;
margin-top: 40px;
}
.title {
position: absolute;
top: 45%;
left: 34%;
}
.title h1 {
color: #fff;
font-size: 70px;
font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}
.title2 {
position: absolute;
top: 110%;
left: 23%;
}
.title2 h2 {
color: black;
font-size: 70px;
font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="top">
<div class="main">
<div class="logo">
<img alt="" src="TAO_LOGO1.jpg">
</div>
<ul class="nav">
<li>Gallary</li>
<li>Account</li>
</ul>
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
<div class="bottom">
<div class="main">
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
This is Html page and I can't make the image .loader centered and at the bottom of .please-wait. How to make it centered and at the bottom?
HTML File
<div id="container">
<main id="main" class="welcome">
</main>
<aside id="aside-right">
<img alt="Welcome" src="../images/panel.png" />
<div class="please-wait">
<h3>Please Wait</h3>
<img class="loader" src="../images/loading.gif" alt="Loading">
</div>
</aside>
</div>
</body>
CSS File
#container
{
/* border: 2px solid black; */
width: 100.6%;
margin: 5px;
white-space: nowrap;
overflow: hidden;
position:relative;
}
#main
{
Position:absolute;
/* border: 2px solid blue; */
float: left;
margin: 3px;
width: 65%;
display: block;
top: 25%;
}
#main.welcome
{
test-align: center;
}
#main.welcome h2
{
width: 58%;
margin: 0 auto;
text-align: center;
word-break: normal;
word-wrap: break-word;
white-space: pre-line;
/* border: 2px solid red; */
}
#aside-right
{
position:relative;
max-height:200px;
height:200px;
border: 2px solid green;
float: right;
width: 27%;
}
#aside-right img
{
position:relative;
width:100%;
float:right;
}
.please-wait
{
position:absolute;
border:2px solid red;
height: 100%;
width: 100%;
}
.please-wait h3
{
position: relative;
/* border:2px solid blue; */
margin: 15px;
top:30px;
text-align: center;
}
.please-wait img
{
position: relative;
margin: 15px;
text-align: center;
max-width: 20%;
border:2px solid blue;
}
Can you please help me to center it and make it at the bottom of .please-wait
JSFiddle
Can you please help me to center it and make it at the bottom of .please-wait
CSS3 Flex can be good idea for manipulate image and flexible layout....
html,
body {
height: 100%;
margin: 0;
}
.main {
height: 100%;
border: 1px dotted blue;
position: relative;
min-height: 500px;
}
.container {
height: 100%;
padding: 0 20px;
}
.image {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.image img {
align-self: flex-end;
}
<div class="main">
<div class="container">
<div class="image">
<img src="http://unsplash.it/300/220?random">
</div>
</div>
</div>
Use this fiddle
Added another class for panel image and this...
.please-wait img {
position: relative;
margin: 15px;
text-align: center;
padding: 0 50px;
margin-top: 110px;
padding-bottom: 0;
border: 2px solid blue;
}
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I have two divs featureText and skillsText one right after the other, I am trying to get the second one to float right of the next one instead of stacking, I have tried position relative on the second one with float left to no avail, the container itself is positioned relative. When I inspect the first div it shows to be super wide yet I have a width set and margins and paddings have been set to 0 to see if that was the problem. This is such a noob problem, but I need help.
live site
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<div id="featureText">
<h1>Recent Works</h1>
</div>
<div id="skillsText">
<h1>Super hero skills</h1>
</div>
<div id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<div id="springmethod">
<h1 class="springmethod">Springmethod.com</h1>
</div>
<div id="goodmorning">
<h1 class="goodmorning">goodmorningmoon.ca</h1>
</div>
</div>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto;
position: relative; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#featureText {
margin-top: 70px;
margin-bottom: 20px;
width: 24%;
background: red; }
#featureText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700; }
#skillsText {
width: 28%;
background: aqua;
position: relative;
float: left; }
#skillsText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700;
margin-top: -10px; }
#siteThumbs {
position: relative;
float: left;
width: 960px; }
#siteThumbs .springmethod {
background: url("../images/springmethod.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs .goodmorning {
background: url("../images/goodmorning.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover .springmethod {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
#siteThumbs a:hover .goodmorning {
background: url("../images/goodmorning.jpg") 0 -241px no-repeat; }
#springmethod {
width: 318px;
position: relative;
float: left; }
#goodmorning {
width: 318px;
position: relative;
float: left; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
Remove margin-top: 70px; from #featureText and float left #skillsText
#featureText {
margin-bottom: 20px;
width: 24%;
background: red;
float: left;
}
#skillsText { float:left; }
The main idea is to have a color-specific menu throughout the whole site. In order to do this I've made a different style for each of the 6 main pages. On every main page there is a submenu.
Here's what I want it to look like:
And here is what it looks like:
As you can see I'm having a hard time setting the submenu in place. It seems that there is some weird gap between that and the main menu. I placed the * margin/padding/border 0 rule at the beginning of the css so i'm still at a loss.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DDS / Om skolen</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!--BODY-->
<body>
<!--WRAPPER-->
<div id="wrapper">
<!--HEADER-->
<div id="header">
<div id="headlogo">
<h1>Den Demokratiske Skole</h1>
</div>
</div>
<!--MENUER-->
<div id="menu">
<!--NAV ABC-->
<div id="navbara">
</div>
<!--NAV ZXY-->
<div id="navbary">
</div>
<ul id="nav">
<!--INBOUND-->
<li>OM SKOLEN</li>
<li>OPTAGELSE</li>
<li>KONTAKT</li>
<li>MERE INFO</li>
<!--OUTBOUND-->
<li>FOREDRAG</li>
<li>PRESSE</li>
</ul>
</div>
<div id="navmarka">
</div>
<div id="subnav">
<ul>
<li>SKOLEN</li>
<li>VÆRDIER</li>
<li>ANSATTE</li>
<li>BESTYRELSEN</li>
<li>VENNEKREDS</li>
<li>INTRANET</li>
</ul>
</div>
<!--CONTENT-->
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
/*OVERALLS*/
* {
margin: 0px;
border: 0px;
padding: 0 px;
}
h1 {
font-size: 10px;
text-indent: -99999px;
}
/*SINGLES*/
#wrapper {
margin-right: auto;
margin-left: auto;
width: 780px;
margin-top: 20px;
height: auto;
}
#header {
width: 780px;
height: 84px;
float: left;
margin-bottom: 10px;
}
#headlogo {
background-image: url(../images/headerlogo.png);
height: 84px;
width: 215px;
float: left;
}
#menu {
height: 30px;
width: 780px;
float: left;
}
#bars {
float: left;
height: 10px;
}
/*navbarABC*/
#navbara {
height: 10px;
width: 381px;
float: left;
margin-right: 26px;
background-color: #3FA9F5;
}
#navbarb {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbarc {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbard {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbare {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
/*navbarZXY*/
#navbarz {
height: 10px;
width: 154px;
float: left;
background-color: #3CF;
}
#navbarx {
height: 10px;
width: 154px;
float: left;
background-color: #3CF;
}
#navbary {
height: 10px;
width: 154px;
float: left;
background-color: #000;
}
#nav {
float:left;
padding: 0px;
width: 780px;
font-size: 14px;
font-weight: 100;
height: 10px;
margin-top: 5px;
}
#nav ul{
list-style-type:none;
}
#nav li{
display:inline;
margin-right: 21px;
}
#nav li a{
text-decoration: none;
font-family: Helvetica;
color: #000;
}
#navmarka {
height: 1px;
width: 83px;
background-color: #3FA9F5;
float: left;
margin-right: 697px;
}
/*subnav*/
#subnav {
float:left;
width: 200px;
font-size: 12px;
height: 100px;
margin-top: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #3CF;
}
#subnav ul{
list-style-type:none;
}
#subnav li a{
padding: 0px;
}
#subnav li a{
text-decoration: none;
font-family: Helvetica;
color: #000;
}
#footer {
clear: both;
height: 20px;
width: 780px;
}
Your <div id="subnav">...</div> has a margin-top: 20px; set
Remove that, the gap disappears.
EDIT;
Just noticed on your image you have a gap between the top line and the sub navigation too, you can achieve this by adding padding-top: 20px;
Remove the margin-top:20px in #subnav. It overrides the margin:0px.
It's because of your margin-top. Try margin-top:10px, or 5px to suit your need.