Dum afstand - web site lavet med DIV-tags
Jeg har prøvet at lave en hjemmeside i div-tags fremfor tabeller, bare for at prøve det ... og nu driller det så jeg er ved at blive skør!Jeg har baseret det på et andet layout og så har jeg rettet en hel masse til .. og pludselig havde jeg denne afstand og kunne ikke genskabe hvordan det var før.
Mellem menuen øverst og den hvide div der skal indeholde hovedindholdet på siden, er der en afstand i samme farve som baggrundsfarven - hvordan får jeg den væk, så de "mødes"
HTML:
<!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" lang="da">
<head>
<title>Jensen Skruer</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="Jensen Skruer" />
<meta name="keywords" content="skruer" />
<meta name="description" content="Test" />
<meta name="robots" content="all" />
</head>
<body>
<div id="everything">
<div class="submenu blogmenu">
</div>
<div id="headmenu">
<div class="inner">
<ul id="menu">
<li><a href="">Forside</a></li>
<li><a href="" title="">Profil</a></li>
<li><a href="" title="">Produkter</a></li>
<li><a href="" title="">Priser</a></li>
<li><a href="" title="">Kontakt</a></li>
</ul>
</div>
</div>
<div id="bodytext">
<div class="post">
<h4>Forside</h4>
<p>Velkommen til min hjemmeside.</p>
<p>Vi sælger skruer til private bla-bla-bla</p>
<p>Vi sælger skruer til private bla-bla-bla</p>
<p>Vi sælger skruer til private bla-bla-bla</p>
<p>Vi sælger skruer til private bla-bla-bla</p>
<p>Vi sælger skruer til private bla-bla-bla</p>
<p>Vi sælger skruer til private bla-bla-bla</p>
<p>Vi sælger skruer til private bla-bla-bla</p>
</div>
</div>
<p class="promo">Dette er min hjemmeside. Vi sælger alle slags skruer til alle slags fjolser.</p>
<div id="footer">
<p>Copyright © 2006 AK</p>
</div>
</div>
</body>
</html>
CSS:
/*** BASICS ***/
html { height: 100%; margin-bottom: 1px; }
html * { padding: 0; margin: 0; }
body {
text-align: center;
background: #56585a;
padding: 20px 0px 40px 0px;
font-size: 62.5%;
}
#everything {
text-align: left;
margin: 0 auto;
width: 70%;
height:100%;
font-family: "Trebuchet MS", Arial, sans-serif;
}
a:hover {
color: #76B900;
}
/*** HEADER ***/
/*** MAIN MENU ***/
ul#mainmenu {
position: absolute;
top: 53px; left: 357px;
width: 363px; height: 30px;
list-style-type: none;
background: #3b3f43 url(images/menu.gif) no-repeat;
}
#headmenu, #footmenu {
background: #8A92B1;
color: #000;
border-top:1px solid #8A92B1;
border-bottom:1px solid #8A92B1;
}
#headmenu .inner, #footmenu .inner {
padding:0px 5px 0px 20px;
margin: 0;
}
#headmenu a, #footmenu a {
font-size:9pt;
color: #FFFFFF;
font-weight: bold;
text-transform : uppercase;
text-decoration : none;
}
#headmenu a:hover, #headmenu a:active, #headmenu a:focus, #footmenu a:hover, #footmenu a:active, #footmenu a:focus {
color: red;
}
#headmenu ul {
margin: 0; padding: 0;
padding-bottom:2px;
list-style: none;
}
#headmenu li {
text-transform: uppercase;
display: inline;
margin: 0; padding: 0;
padding-right:1em;
}
/*** HOME PAGE ***/
div#mainpromo {
height: 213px;
background: transparent url(images/home/2006-10.jpg) no-repeat;
margin: 0; padding: 0;
}
div#mainpromo p {
text-indent: -4040px;
margin: 0; padding: 0;
display: none;
}
div#mainpromo p.moreinfo {
text-indent: 0px;
display: block;
}
div#mainpromo p.moreinfo a {
display: block;
height: 213px;
text-indent: -4040px;
text-decoration: none;
margin: 0; padding: 0;
}
/*** SUBMENU ***/
div.submenu {
height: 30px;
width: 700px;
}
div.blogmenu { width:100%;background: transparent url(../images/Star_5x80_x.jpg);repeat:no-repeat; }
/*** BODY TEXT ***/
div#bodytext {
background-color: #ffffff;
color: #444;
}
div#bodytext a:link,
div#bodytext a:visited,
div#bodytext a:active {
text-decoration: none;
color: #545258;
border-bottom: 1px solid #e7f4c3;
}
div#bodytext a:hover {
background-color: #F2F7FA;
}
div#bodytext strong {
color: #555;
}
div#bodytext strong.highlight {
font-weight: normal;
background-color: #ffffbb;
color: #444;
}
div#bodytext strong.subtle {
font-weight: normal;
color: #111;
}
div#bodytext h2 {
color: #9D6C3C;
font-size: 1.8em;
padding: 20px 0px 0px 0px;
margin: 0px 20px 0px 20px;
}
div#bodytext h3 {
font-weight: normal;
font-size: 1.6em;
color: #c0a782;
border-bottom: 1px solid #c0a782;
padding: 0px 0px 20px 0px;
margin: 0px 20px 20px 20px;
}
div#bodytext h4 {
font-size: 2em;
color: #56585A;
padding: 0px 0px 0px 0px;
margin: 10px 10px 20px 20px;
}
div#bodytext p {
font-size: 1.5em;
margin: 0px 20px 0px 20px;
padding: 0em 0em 1em 0em;
}
div#bodytext ul {
margin: 0px 20px 0px 60px;
padding: 0 0 1em 0;
font-size: 1.5em;
}
div#bodytext ul li {
padding: 0px 0px 3px 10px;
}
div#bodytext div.sidebar {
width: 250px;
margin: 0px 20px 0px 0px;
}
div#bodytext div.starboard {
float: left;
}
div#bodytext div.sidebar div {
/*border: 1px solid #56585A;*/
background-color: #8A92B1;
color: #d1be9e;
margin: 0px 0 0px 0;
}
div#bodytext div.sidebar div h4 {
padding: 0px 0px 0px 0px;
font-size: 1.4em;
color: #56585a;
margin: 0 0 0 0;
}
div#bodytext div.sidebar div p {
font-size: 1.3em;
padding: 0px 0px 0px 0px;
margin: 0 0 0 0;
line-height: 1.1em;
color: #FFFFFF;
}
div#bodytext blockquote {
font-family: Georgia, "Times New Roman";
padding-left: 40px;
padding-right: 40px;
color: #777777;
font-size: 1.1em;
line-height: 1.7em;
}
div.double {
display: inline-table;
}
div.double:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*** OTHER BOXEN ***/
p.promo {
padding: 6px 20px 6px 20px;
background-color: #8A92B1;
color: #FFFFFF;
margin: 0 0 0 0;
font-size: 1.3em;
clear: both;
}
p.promo a:link,
p.promo a:visited,
p.promo a:active {
text-decoration: none;
border-bottom: 1px solid #aabb00;
color: #FFFFFF;
}
p.promo a:hover {
color: #ffffff;
border-bottom: 1px solid #ffffff;
background: transparent;
}
/*** BLOG ***/
div#bodytext div.blog div.post h4 {
font-size: 1.8em;
padding: 0px 0px 0px 0px;
margin: 0px 20px 0px 20px;
}
div#bodytext div.blog div.post h4 a {
text-decoration: none;
}
div#bodytext span.meta {
display: block;
font-size: 0.8em;
color: #c0a782;
}
div#bodytext span.meta a:link {
color: #c0a782;
}
div#bodytext span.meta a:hover {
background-color: #F4EEE6;
}
div#bodytext span.meta strong {
color: #c0a782;
}
/*** FOOTER ***/
div#footer {
border-top: 2px solid #BBCCEE;
font-size: 1.2em;
color: #8a8a8a;
padding: 6px 0px 4px 20px;
}
div#footer a:link,
div#footer a:active,
div#footer a:visited {
color: #8a8a8a;
}
div#footer a:hover {
color: #ffffff;
}
