Jeg vil gerne lave en header, der tilpasser sig efter browservinduets størrelse.
Med tabeller ville jeg bare have en TD med fast størrelse og baggrundsbillede, så en TD med bgcolor="#FFFFFF" og så igen en TD med fast størrelse og baggrundsbillede, så de to yderste var fast str. - og den midterste kunne give sig.
Men hvordan omsætter jeg dét til DIV?
Her er min foreløbige HTML/CSS:
____________________________________________________
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></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="" />
<meta name="keywords" content="skruer" />
<meta name="description" content="Skruer" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css"/>
</head>
<body>
<div id="everything">
<div class="submenu blogmenu">
<div class="spacer"></div>
</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="">Kontakt</a></li>
</ul>
</div>
</div>
<div id="bodytext">
<div class="post">
<h4>Forside</h4>
<p>Velkommen til denne hjemmeside<br> hvem som helst</p>
</div>
</div>
</div>
</body>
</html>
____________________________________________________________CSS
____________________________________________________________
/*** BASICS ***/
html { height: 100%; margin-bottom: 1px; }
html * { padding: 0; margin: 0; }
body {
text-align: center;
/*background: #56585a;*/
background:url(../images/bgrund.gif);
padding: 20px 0px 40px 0px;
font-size: 62.5%;
}
#everything {
background:url(../images/leftBG.gif);
background-color:#FFFFFF;
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;
border-top: 2px solid #BBCCEE;
border-bottom: 2px solid #BBCCEE;
}
#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: #93C6F9;
}
#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: 70px;
width: 704px;
}
div.blogmenu { width:100%;background: transparent url(../images/header.gif);background-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 {
background-color:#56585a;
border-top: 2px solid #BBCCEE;
font-size: 1.2em;
color: #8a8a8a;
padding: 6px 0px 4px 20px;
text-align:center;
}
Indlæg senest redigeret d. 18.09.2007 10:24 af Bruger #9960