Her er et svar :-)
Sti til css står i index filen, men her er begge filer, dog kun med div koden.
index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html><head>
<title>Exp test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head><body>
<div id="main">
<div class="main-div">
<div class="text">EINGANG 26.0°C</div>
<div class="knapper-top"><input type="button" value="MODUS" class="knap"> <input type="button" value="MENU" class="knap"></div>
<div class="bordertop"> </div>
<div class="text">TOILETTE DECKE</div><div class="text">EINGANG DECKE</div>
<div class="text-value">0 %</div><div class="text-value">0 %</div>
<div class="knapper-top"><input type="button" class="knap-minus"> <input type="button" class="knap-plus"></div>
<div class="knapper-top"><input type="button" class="knap-minus"> <input type="button" class="knap-plus"></div>
<div class="text">TOILETTE ROLLO</div>
<div class="text">ENIGANG BODEN</div>
<div class="knapper"><input type="submit" class="knap-hoch" value=""><br><input type="button" class="knap-runter"></div>
<div class="text-value">0%</div>
<div class="knapper-top"><input type="button" class="knap-minus"> <input type="button" class="knap-plus"></div>
<div style="clear:both;"></div>
</div>
</div>
</body></html>
stylesheet.css
#main {
margin: 20px auto;
width: 570px;
padding: 0;
color: #565e82;
font-family: Verdana, Helvetica, Arial;
font-size: 28px;
}
.main-div {
background-color:#BAE3FF;
width: 554px;
border: 10px solid #272c51;
padding: 3px 1px;
margin: 0;
}
img {
border: 0;
}
div.bordertop {
background-color:#272c51;
float: left;
width: 554px;
line-height: 2px;
}
div.text {
float: left;
width: 276px;
margin-top: 8px;
}
div.text-value {
float: left;
width: 276px;
margin-top: 8px;
text-align: center;
}
div.knapper {
float: left;
width: 276px;
margin-top: 8px;
}
div.knapper-top {
float: left;
width: 276px;
margin: 1px 0;
}
input.knap {
color:#565e82;
font: 100% Verdana, Helvetica, Arial;
background-color: #BAE3FF;
width:128px;
height:45px;
margin: 2px 0;
}
input.knap-minus {
width: 128px;
height: 88px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(minus.jpg) no-repeat center top;
cursor: pointer;
}
input.knap-plus {
width: 128px;
height: 88px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(plus.jpg) no-repeat center top;
cursor: pointer;
}
input.knap-hoch {
width: 260px;
height: 60px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(hoch.jpg) no-repeat center bottom;
cursor: pointer;
}
input.knap-runter {
width: 260px;
height: 60px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(runter.jpg) no-repeat center bottom;
cursor: pointer;
}
