This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I'm doing clone coding of Lotte World homepage in Korea.The homepage has a layout with the float elements. I gave the logo float property to the left. and I gave the .info class float property to the right. And naturally, the .gnb class becomes a central alignment. through text-align center. The problem is that there is an undefined margin on top of .gnb class. I did some experiments and deleted the logo and the problem was solved. I want to know exactly what caused the problem.
/*no reset css*/
header{
width: 100%;
height: 46px;
border-bottom: 1px solid #e1e1e1;
background: #f8f8f8;
}
#header::after{
content:"";
display: block;
clear: both;
}
#header{
position: relative;
width: 1173px;
margin: 0 auto;
}
#header .left li a{
display: inline-block;
height: 46px;
font-size: 13px;
color:#555;
}
#header .left li{
float: left;
position: relative;
padding: 0 20px;
line-height: 46px;
}
/* 첫 번째 자식 구분선 해제 */
#header .left li:first-child{
padding-left: 0;
}
#header .left li:first-child:after{
display: none;
}
/* 로고 구분선 */
#header .left li:after{
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 14px;
width: 1px;
height: 20px;
background: #e1e1e1;
}
/* 왼쪽 로고 이미지 */
#header .left li:first-child a{
padding: 0 0 0 28px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_sky_icon.png') no-repeat 0 50%;
}
#header .left li:nth-child(2) a{
padding: 0 0 0 35px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_aqua_icon.png') no-repeat 0 50%;
}
#header .left li:last-child a{
padding: 0 0 0 33px;
background: url('https://adventure.lotteworld.com/common/images/icon/header_water_icon.png') no-repeat 0 50%;
}
/* 오른쪽 */
.family,
.members,
.lang{
display: inline-block;
}
#header .right{
float: right;
}
#header .right li,
a{
float: left;
position: relative;
line-height: 46px;
}
#header .family > a:last-child{
padding-right: 30px;
}
#header .family a:hover{
color: #590fe4;
}
#header .members a:hover{
color: #000;
}
#header .members a,
#header .lang a{
font-weight: bold;
}
#header .family a,
#header .members a{
padding: 0 11px;
}
#header .family a,
#header .members a,
#header .lang a{
font-size: 13px;
color: #555;
}
#header .family li:first-child:after,
#header .members li:first-child:after{
display: none;
}
#header .family li:after,
#header .members li:after{
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 14px;
width: 1px;
height: 20px;
background: #e1e1e1;
}
#header .lang a{
padding-right: 16px;
height: 46px;
background: url('img/lang_arrow.png') no-repeat right center;
}
/* 네비게이션 */
nav{
width: 100%;
height: 99px;
border-bottom: 1px solid #e1e1e1;
}
#nav{
width: 1173px;
height: 100px;
margin: 0 auto;
text-align: center;
}
/* 왼쪽 */
#nav h1{
float: left;
margin-top: 13px;
}
/* 중앙 */
#nav .gnb::before{
content:"";
display: block;
clear: both;
}
#nav .gnb{
float: left;
height: 99px;
margin-left: 176px;
}
#nav .gnb li:first-child{
padding-left: 0;
}
#nav .gnb li{
height: 99px;
padding-left: 48px;
float: left;
}
#nav .gnb li a{
display: block;
font-size: 17px;
line-height: 95px;
}
/* 오른쪽 */
#nav .info{
height: 78px;
margin-top: 21px;
float: right;
}
#nav .info .srch, .reser, .group{
position: relative;
padding-left: 32px;
float: left;
}
#nav .info .Btn span{
display: block;
}
#nav .info .Btn span:nth-child(2){
padding-top: 13px;
}
#nav .info .txt{
position: absolute;
left: 50%;
font-size: 16px;
color: #590fe4;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>롯데월드 어드벤처</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="default.css">
</head>
<body>
<header>
<div id="header">
<ul class="left">
<li>SEOUL SKY</li>
<li>롯데월드 아쿠아리움</li>
<li>김해롯데워터파크</li>
</ul>
<ul class="right">
<div class="family">
<li>민속박물관</li>
<li>아이스링크</li>
</div>
<div class="members">
<ul>
<li>Login</li>
<li>회원가입</li>
</ul>
</div>
<div class="lang">
KOR
</div>
</ul>
</div>
</header>
<nav>
<div id="nav">
<h1>
<img src="img/logo.png" alt="롯데월드 어드벤처 로고">
</h1>
<ul class="gnb">
<li>즐길거리</li>
<li>요금/우대혜택</li>
<li>참여프로그램</li>
<li>이용가이드</li>
<li>소통서비스</li>
</ul>
<ul class="info">
<p class="srch Btn">
<span>
<img src="img/header_srch_btn.png" alt="검색하기">
</span>
<span class="txt">검색</span>
</p>
<p class="reser Btn">
<span>
<img src="img/reser_btn.png" alt="예매하기">
</span>
<span class="txt">예매</span>
</p>
<p class="group Btn">
<span><img src="img/group_btn.png" alt="단체예약"></span>
<span class="txt">단체</span>
</p>
</ul>
</div>
</nav>
</body>
</html>
Most Browsers render a default margin for ordered and unordered lists. To avoid that use reset css rules (for example this)
EDIT
actually you set the margin youself here:
#nav .gnb{
float: left;
height: 99px;
margin-left: 176px; // remove this line
}
Related
My website is working great on most browsers but for some reason Chrome is showing my navigation items outside of the header bar. I'm not sure which part of my CSS is at fault here and why it is being interpreted differently between browsers. Help would be appreciated. You need to look at it with screen size of 1100px or higher to see what I mean - lower than that and it turns into responsive navigation button.
Here's a link to show you: http://imgur.com/m5sVBww
body {
margin: 0;
line-height: 1.428;
background-color:#956396;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: #ffffff;
background: #956396;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
border-radius: 10px;
}
.show-menu:hover {
background: #9b729b;
}
#extra {
background: #ffffff;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
#extra2 {
background: #956396;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
position: relative;
top: 5px;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: white;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
position: relative;
top: 20px;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#956396;
margin-top: 28px;
padding-left: 35px;
padding-right: 35px;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
#extra {
clear: both;
}
}
<head>
<meta charset="utf-8">
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div> Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>Home</li>
<li>Customer Research</li>
<li>Business Improvement</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div>
</body>
</html>
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'm simply trying to modify the navigation bar of my site for smaller devices. The site should be remaining with a fixed design for iPads+ resolutions, and then become responsive for smaller resolutions. While the mobile-size specific codes are applying to some classes (container, main, etc.), they don't seem to apply to the navigation div. You can see how it's currently functioning here: http://moore.whiterabbitstudio.us/
Here is a fiddle for permanence: http://jsfiddle.net/ursalarose/xAp72/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<body>
<div class="container">
<div class="main-hold">
<div class="main">
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Process</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS:
body
{
display: table;
margin: 0 auto;
letter-spacing: .1em;
text-align: center;
font-size: 16px;
}
*
{
margin:0;padding:0;
}
html,body
{
height:100%;
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.main-hold {
height:600px;
width:1000px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.main {
height:540px;
width:900px;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
/* MOBILE DEVICES */
#media screen and (max-width: 950px){
.main-hold {
width:500px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px auto;
}
.main {
width:100%;
background-repeat:no-repeat;
background-position:center top;
margin-top: 0px auto;
}
#nav {
margin: 20px auto 0 auto;
float:none;
width: 100%;
}
#nav ul {
list-style:none;
}
#nav li {
width: 100%;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align:center;
width: 100%;
height: 22px;
display: inline;
background-color:#CCC;
background-image: none;
padding-right: 0px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#FFF;
}
}
/* NAVIGATION */
#nav {
float: left;
height: 250px;
width: 168px;
margin-top: 60px;
}
#nav ul {
list-style:none;
}
#nav li {
width: 168px;
height: 28px;
display: block;
margin-bottom: 8px;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align: right;
width: 148px;
height: 22px;
display: block;
padding-right: 20px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#fff;
}
Thank you for any help! I've never tried designing for mobile devices before.
Try placing the mobile CSS below the desktop CSS, as the desktop CSS is now overwriting the mobile css.
I'm having trouble putting a sticky footer onto a site I'm working on.
I've tried everything and can't think of what the problem could be.If someone could take a look at the coding id appreciate it.
As some content on the site is only going to be small paragraphs i need a sticky footer to stick to the bottom to stop it floating in the middle of the site.
I have the content in a div that over laps a image and id like the footer to float on the bottom. however when i close the divs i can't get the footer to stay at the bottom, it starts floating under the image banner. Ive tried position:fixed; but i don't want that as it overlaps the content. Thanks
HTML
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Linear Partners</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="initial-scale=1, maximum-scale=2" />
<link href="style1.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script type='text/javascript' src='js/main.js'></script>
<script>
$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="mainpage">
<div id="header">
<img src="images/Linear.Partners.Logo.png" width ="173" height="65" alt="logo">
<nav class="nav clearfix">
<a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" height="25"></a>
<ul class="simple-toggle" id="menu">
<li>Home</li>
<li>About
<ul>
<li>Team</li>
</ul>
</li>
<li>Expertise</li>
<li>Research</li>
<li>Best Practice</li>
<li>Join Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="bg-image"style="background-image:url(images/slide1.jpg); background-position:50% 50%;">
<div id="main" class="wrapper clearfix">
<left>
<h1>Privacy Policy</h1>
<p>Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</p>
</left>
<right>
<h1>Privacy Policy</h1>
Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</right>
</div>
</div>
<div class="clear"></div>
<footer>
<div id="footer-wrapper">
<div id="footer-content">
<div class="Copyright">
Copyright © 2014 Linear Partners. All rights reserved.
</div>
<div class="footer-nav">
Home Privacy Diversity Policy
</div>
</div>
</div>
</footer>
<!-- #end footer area -->
</body>
</html>
CSS
html, body {
height: 100%; margin: 0; padding: 0;
}
body
{
margin:0;
padding:0;
background: #fff;
font: 13px'helvetica', ariel, sans-serif;
color: #000;
}
/*Header*/
#header
{
position:relative;
width:autopx;
max-width:950px;
height:65px;
margin: 0 auto;
z-index:10000;
background: #fff;
padding:20px;
}
#wrap {min-height: 100%;}
#mainpage {
padding-bottom: 85px;} /* must be same height as the footer */
.footer {position: relative;
margin-top: -85px; /* negative value of footer height */
height: 85px;
clear:both;}
/* nav */
.nav
{
width:autopx;
float:right;
padding-top:22px;
}
ul.simple-toggle
{
list-style:none;
padding: 0px;
margin: 0px;
text-align: center;
}
ul.simple-toggle li {
display: inline-block;
text-align: center;
border-right: 1px solid #cfcfcf;
}
ul.simple-toggle li:last-child
{
border-right: none;
}
ul.simple-toggle li a
{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color:#000;
text-decoration:none;
}
.anchor-link
{
display: none;
background-color: #16447b;
margin-top: -10px;
float: right;
height:40px;
width:40px;
}
.anchor-link img
{
margin:9px 6px 0px 4px ;
}
#mobile-nav
{
display:none;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
nav ul
{
list-style: none;
position: relative;
display: inline-table;
}
nav ul li:hover
{
background: #16447b;
color: #fff;
}
nav ul li:hover a
{
color: #fff;
}
nav ul ul
{
background: #092a55; padding:0px; margin:0px;
position: inherit; top: 100%;
}
nav ul ul:hover a
{
background: #6689b3;
}
/*wrapper*/
#bg-image {
z-index:-5780000;
float: left;
width: 100%;
height:250px;
background-size:cover;
margin-top:2px;
border: 2px solid #16447b;
border-width: 2px 0;
border-color: #fff;
box-shadow: 0 2px 0px #16447b, 0 -2px 0px #16447b;
}
.wrapper
{
width:90%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:150px;
}
#main left{
background-color: #fff;
width: 62.5%;
float: left;
}
#main right
{
background-color:#fff;
width: 35%;
float: right;
}
/*Footer*/
#footer-wrapper
{
height:65px;
margin: 0 auto;
background: #000;
padding:20px;
}
#footer-content
{
height:65px;
max-height:120px;
position:relative;
width:100%;
max-width:950px;
margin: 0 auto;
margin-top:20px;
color: #fff;
}
.Copyright
{
margin-top:5px;
float:left;
color: #fff;
text-decoration:none;
}
.footer-nav
{
margin-top:5px;
float:right;
color: #fff;
text-decoration:none;
margin-right:-6px;
}
.footer-nav a
{
color: #fff;
padding-left:6px;
padding-right:5px;
border-right: 1px solid #fff;
text-decoration:none;
float: left;
}
.footer-nav a:last-child
{
border:none;
}
.footer-nav a:hover
{
text-decoration:underline;
}
.clear {
clear:both;
}
/*media*/
#media (max-width:750px){
ul.simple-toggle
{
display: none;
}
.anchor-link, #mobile-nav
{
display: block;
}
ul.open
{
background-color: #16447b;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 20px;
top: 100%;
width: 175px;
z-index: 50000;
opacity:0.90;
}
ul.open ul
{
background-color: #092a55;
display: none;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 100%;
width: 175px;
z-index: 50000;
}
ul.open li
{
display: block;
list-style: none;
text-align: center;
border: none;
}
ul.open li a
{
display: block;
padding: 10px 5px;
border-bottom: 0px solid #5578a4;
color: #fff;
}
ul.open li a:hover
{
background-color: #375d8f;
color: #fff;
}
.wrapper
{
width:85%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:250px;
}
#main left{
background:#fff;
width: 62.5%;
float: left;
}
#main right
{
background:#fff;
width: 35%;
float: right;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
#media (max-width:480px){
img[src*="images/Linear.Partners.Logo.png"]
{
margin-top:13px;
height:40px;
width:106px;
}
.bg-image {
float: left;
width: 100%;
height:150px;
background-size:cover;
}
.wrapper{
width:80%;
height:200px;
margin-top:75px;
}
#main right
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
#main left
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
To avoid the footer to overlap the content add a margin to the content corresponding to the footer's height
.footer-nav{
//...
position:fixed;
bottom;0;
height:50px; // just an example
//...
}
.wrap{
margin-bottom:50px;// same as .footer-nav height
}
FIDDLE
Try this for footer div:-
#footer-wrapper {
background: none repeat scroll 0 0 #000000;
height: 65px;
margin: 0 auto;
padding: 20px;
bottom: 0;/*add from here*/
left: 0;
position: fixed;
width: 100%;/*to here*/
}
Check out this code
it may help youjust wirte the footer tag inside the wrap div
<div id="wrap"> <footer></footer> </div>
It seems that everything alright but you missed somewhere 2 closing DIVs.
Try to add them before
<div class="clear"></div>
http://jsfiddle.net/wF9UL/
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.