Text über dem Design:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<meta name="author" content="Chaad - FansiteDB" />
<title>index</title>
<link href="css/global.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="navigator">
<center><ul>
<li><a href="URL von Seite"> Startseite </a></li>
<li><a href="URL von Seite"> Gästebuch </a></li>
<li><a href="URL von Seite"> Community </a></li>
<li><a href="URL von Seite"> News </a></li>
<li><a href="URL von Seite"> Fancenter </a></li>
<li><a href="URL von Seite"> Forum </a></li>
</ul>
</div>
<div id="main">
<div id="left">
<div class="content">
<div class="content-header"></div>
<div class="content-mid">
<h1>ON!</h1>
Wir sind bald wieder ON! </div>
<div class="content-footer"></div>
</div>
</div>
<div id="right">
<div class="contentbox">
<div class="contentbox-header"></div>
<div class="contentbox-mid">
<h2>BAU!</h2>
Wir bauen grade um!</div>
<div class="contentbox-footer"></div>
</div>
<div id="footer"> <br />
Pixel your life @ Habbo Hotel </div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
CSS - Code ohne Style Tags:
@charset "utf-8";
/* GLOBAL */
html, body {
background: #F19494
;
border: 0;
font-family: Verdana;
font-size: 11px;
height: 100%;
margin: 0;
}
*, form, img, p, tr, td, th, ul, li{
margin: 0;
padding: 0;
border: 0;
}
h1 {
background: url(http://s12.directupload.net/images/091225/3t8ineh5.png);
color: #FF6B6B;
font-family: Verdana;
font-size: 11px;
height: 20px;
margin: auto;
padding: 5px 0 0 0;
text-align: center;
text-transform: uppercase;
text-shadow: #FFF 1px 1px 1px;
width: 551px;
}
h2 {
background: url(http://s12.directupload.net/images/091225/r4ntq6xi.png);
color: #FF6B6B;
font-family: Verdana;
font-size: 11px;
height: 20px;
margin: auto;
padding: 5px 0 0 0;
text-align: center;
text-transform: uppercase;
text-shadow: #FFF 1px 1px 1px;
width: 237px;
}
/* CUSTOM */
#container{
background: url(http://s7.directupload.net/images/091225/79tr8d8y.png);
width: 885px;
margin: auto;
min-height: 100%;
position: relative;
overflow: hidden;
}
#banner {
background: url(http://s7.directupload.net/images/091225/2m66bms9.png);
height: 97px;
margin: auto;
width: 845px;
}
#navigator {
background: url(http://s4.directupload.net/images/091225/uarkmjjb.png);
color: #FFF;
font-size: 13px;
font-weight: bold;
height: 31px;
margin: 12px auto 12px auto;
padding: 13px 0 0 8px;
text-transform: uppercase;
width: 875px;
}
#navigator li {
display: block;
float: left;
margin: 0 5px 0 5px;
}
#navigator li a:link, a:active, a:visited {
color: #FFF;
text-decoration: none;
}
#navigator li a:hover {
text-decoration: underline;
}
#main {
margin: auto;
width: 845px;
}
#left {
float: left;
width: 571px;
}
.content {
width: 571px;
}
.content-header {
background: url(http://s7.directupload.net/images/091225/qqznfvhf.png);
height: 10px;
width: 571px;
}
.content-mid {
background: url(http://s4.directupload.net/images/091225/ha8by6c5.png);
overflow: hidden;
padding: 0 10px 1px 10px;
width: 551px;
}
.content-footer {
background: url(http://s5.directupload.net/images/091225/8u3upsqs.png);
height: 9px;
width: 571px;
}
#right {
float: left;
margin: 0 0 0 17px;
width: 257px;
}
.contentbox {
margin: 0 0 15px 0;
width: 257px;
}
.contentbox-header {
background: url(http://s7.directupload.net/images/091225/2363qbfq.png);
height: 10px;
width: 257px;
}
.contentbox-mid {
background: url(http://s12.directupload.net/images/091225/5wvvmhk6.png);
overflow: hidden;
padding: 0 10px 1px 10px;
width: 237px
}
.contentbox-footer {
background: url(http://s12.directupload.net/images/091225/yeuywank.png);
height: 7px;
width: 257px;
}
#footer {
background: url(http://s5.directupload.net/images/091225/t8ouhbij.png);
height: 64px;
padding: 7px;
width: 243px;
}
.clear {
clear: both;
}
h1, h2 {
margin: 0 auto 0 auto;
}
