Jag har hittat en lysande mall på design/css här på wF som någon varit snäll och hjälpt till med. Jag försöker nu ändra lite så den blir så som jag vill ha den. Men det fungerar inte riktigt som jag vill.
background-color: transparent; fungerar inte. Jag har även testat background:transparent; men fungerar inte det heller. Varför syns inte bilden bakom som jag lagt i #background?
<!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="sv" lang="sv">
<head>
<title>Ett exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0;} /* nollställ marginaler och indrag för alla element */
html,body {
color: #000;
background-color: #fff;
height: 100%; /* se till att vi kan utnyttja hela visningsytan */
text-align: center; /* centrera #container a'la bluerobot.com del 1 */
}
p {
font-family: arial, sans-serif;
font-size: 12px; line-height: 18px;
background-color: transparent;
padding: 5px 10px 5px 10px;
}
#container {
width: 740px; /* innehållets totala bredd */
min-height:100%; /* ta upp hela sidan (se MISIE-hack nedan) */
background-color: transparent;
/*background-image: url(images/bild2.jpg);*/ /* Se alistapart.com "faux columns" */
margin:0 auto; /* centrera #container a'la bluerobot.com del 2 */
text-align: left; /* ... och del 3 */
}
#background{
z-index: 1;
background-image: url(images/bild2.jpg);
background-repeat: no-repeat;
}
#header{
height: 80px;
background-color: transparent;
padding-top: 15px;
/*background-color:#c44;*/
}
#menu {
height: 23px;
background-color: #cc8;
}
/* tvåspaltad lösning a'la realworldstyle.com del 1*/
#sidebar {
width: 370px; /* skall vara mindre än margin-left på #main (med marginal) */
float: left;
/*background-color: #ce9;*/
background-color: transparent;
padding-top: 50px;
padding-bottom: 15px;
}
/* tvåspaltad lösning a'la realworldstyle.com del 2*/
#main {
width: 310px; /* width+margin-left skall vara < width på #container, med marginal */
margin-left: 420px; /* något mer än bredden på #sidebar */
/*background-color: #739dc7;*/
background-color: transparent;
padding-top: 50px;
}
/* sidfotsmek */
#belowthebottom {
height: 28px; /* samma som #bottom */
clear: both;
}
#bottom{
width: 740px;
height: 28px; /* height = p height + p margin-top + p margin-bottom */
background-color: #002d56;
color: #FFF;
margin-top: -28px; /* samma som height */
margin-left: auto;
margin-right: auto;
}
#bottom a:link{
color: #FFFFFF;
}
#bottom a:visited{
color: #FFFFFF;
}
#bottom a:hover{
color: #FFFFFF;
}
#bottom a:active{
color: #FFFFFF;
}
</style>
<!--[if IE]>
<style type="text/css">
/* fulhack - nödvändigt bl.a. pga att MSIE inte förstår min-height */
#container {height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="background"> </div>
<div id="header">
<img src="images/logga.jpg"/>
</div>
<div id="menu"><p>menu</p></div>
<div id="sidebar">
<p>sidebar</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique
tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et,
orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel
purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra
risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat.
Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend,
arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat
dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum,
diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse
platea dictumst.</p>
</div>
<div id="main">
<p><img src="images/bild1.jpg"/></p>
<p>main</p>
</div>
<div id="belowthebottom"> </div>
</div>
<div id="bottom">
<p>
© AB FÖRETAG |
Kungsgatan 20, 123 45 Stockholm |
Tel: 08-123 45 67 |
Fax: 08-123 45 67 |
<a href="mailto:office@foretag.se">office@företag.se</a>
</p>
</div>
</body>
</html>
Det enda som syns av bilden i bakgrunden är de 15px som jag har som padding-top i #header, konstigt tycker jag. Det hoppas jag att inte ni tycker... :)