Designe stimmt nich wieso?

Hallo habe mal ein Designe angefangen....doch es zeigt es nicht richtig an....
Sie sollte so aussehen :
http://www.metamorphozis.com/free_templates/free_css_templates/metamorph_darkside/

Hier der CSS code:
************************************************************************

/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
margin: 0px;
padding: 0px;
}

body {
background: #000000 url(http://img.webme.com/pic/h/handy-designez/back_all.jpg) no-repeat center top;
}

body, th, td, input, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}

p, ol
{
margin-top: 10px;
}

h1, h2, h3 {
color: #449BC7;
}

h1 {
font-size: 3em;
}

h2 {
text-transform: uppercase;
font-size: 1.1em;
font-weight: bold;
color: #449BC7;
}


h3 {
font-size: 1em;
}


ul, ol {
margin-left: 3em;
}

a {
text-decoration: underline;
color: #449BC7;
}

a:hover {
border: none;
text-decoration: none;
}

h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #449BC7;
}

h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #449BC7;
}

hr {
display: none;
}

#main
{
width: 642px;
margin: 0 auto;
}


/* Header */

#header {
width: 642px;
margin: 0 auto;
height: 134px;
}

#menu {
float: left;
height: 41px;
width: 612px;
padding-left: 30px;
background: url(http://img.webme.com/pic/h/handy-designez/menu.png) no-repeat;

}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
}

#menu a {
display: block;
float: left;
height: 31px;
width: 115px;
margin-right: 1px;
text-decoration: none;
font-size: 1.1em;
font-weight: bold;
color: #ffffff;
padding-top: 10px;
text-align: center;
}

#menu a:hover {
color: #ffffff;
background: url(http://img.webme.com/pic/h/handy-designez/menu_r.gif) repeat-x;
}



/* Logo */

#logo {
width: 642px;
height: 93px;
margin: 0 auto;
text-align: right;
background: url(http://img.webme.com/pic/h/handy-designez/header.jpg) no-repeat left top;
}


#logo h1 {
padding-right: 20px;
color: #ffffff;
padding-top: 20px;
font-size: 24px;
}

#logo h2 {
font-style: italic;
font-size: 10px;
padding-right: 20px;
}


#logo a {
color: #FFFFFF;
}

/* Page */

#page {
width: 642px;
margin: 0 auto;
background: #ffffff url(http://img.webme.com/pic/h/handy-designez/back.gif) repeat-y top;
border-top: none;

}

#top
{
background: url(http://img.webme.com/pic/h/handy-designez/top.png) no-repeat;
height: 10px;
margin-top: 15px;
width: 642px;
}

#bottom
{
background: url(http://img.webme.com/pic/h/handy-designez/bottom.gif) no-repeat;
height: 19px;
width: 642px;
}

#box
{
background: url(http://img.webme.com/pic/h/handy-designez/intro_text_box.gif) no-repeat;
height: 142px;
color: #ffffff;
margin-left: 10px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}

#box H1 a
{
font-size: 18px;
color: #ffffff;
}

/* Content */

#content {
float: left;
width: 413px;
padding-left: 10px;
padding-top: 0px;
}

#content H2
{
background: url(http://img.webme.com/pic/h/handy-designez/h2.gif) no-repeat;
height: 63px;
padding-top: 10px;
padding-left: 15px;
width: 400px;
font-size: 16px;
color: #ffffff;
}

#content H2 a
{
color: #ffffff;
}

#content .entry
{
padding: 10px;
width: 390px;
}

/* Sidebars */

.sidebar {
float: left;

}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 10px;
}

.sidebar {
margin-bottom: 2em;
}


.sidebar li {
margin: 0;
}


#sidebar2 {
width: 200px;
margin-left: 10px;
}

#sidebar2 h2 {
background: url(http://img.webme.com/pic/h/handy-designez/title.gif) no-repeat left top;
height: 26px;
color: #FFFFFF;
padding-left: 20px;
padding-top: 10px;
}

#sidebar2 ul {
line-height: normal;
}

#sidebar2 li {
padding: 5px;
background: url(http://img.webme.com/pic/h/handy-designez/img04.gif) repeat-x left bottom;
font-size: .8em;
}

#sidebar2 a {
border: none;
padding-left: 10px;
}

#sidebar2 a:hover {
border: none;
padding-left: 10px;
}

.back_title
{
background: url(http://img.webme.com/pic/h/handy-designez/title_back.gif) no-repeat;
}

#sidebar2 .top {
padding-top: 20px;
}



/* Footer */
#footer
{
padding: 20px;
background: url(http://img.webme.com/pic/h/handy-designez/footer.gif) repeat-x
}

#footer p {
text-align: center;
font-size: 9px;
color: #ffffff;
margin: 0px;
padding: 0px;
}
#footer a
{
color: #FFFFFF
}

**************************************************************************

Weiss jemand was das sein könnte?

vieleicht sind sie ja im hpbk nicht nutzbar Meine meinung..
______________


http://fanpage-habbo-36.de.tl/Vote-For-Us.htm"
Votet Bitte Für Uns Als Danke Schön.

Ja ich weiß wieso

Erstmal musst du das Design "CSS" nehmen weiß ja nicht ob du das schon getan hast.
Viele dieser Klassen gibt es nicht im Hpbk,deshalb müsste man diese bei Text über dem Design ergänzen z.b so <div id="Klassenname"> </div>

Wenn du noch nicht viel mit CSS/HTML gearbeitet hast lass es lieber sein und such dir ein Design das für den Hpbk gemacht ist : )

verschoben nach CSS
______________

Das Forum ohne Zensur ,hier könnt ihr die Wahrheit lesen !