Layout gebouwd in html. Op welke site hosten?

Status
Niet open voor verdere reacties.
T

tonnyroad

Gebruiker
Lid geworden
30 jan 2011
Berichten
83
Ik heb een layout gebouwd in html.
alleen ik wou hem hosten op http://woelmuis.nl maar hij laat de zelfde code weer zien?
het gaat om deze code.
PHP: 
body {
    background-image: url("../Images/web/background2.gif");
    background-position: 0 348px;
    background-repeat: repeat;
    margin: 0;
    padding: 0;
    text-align: center;
}
#background_head {
    background-image: url("../Images/web/background-head.gif");
    background-repeat: repeat-x;
    height: 348px;
    position: absolute;
    width: 100%;
    z-index: -10;
}
#admincp {
    background-image: url("../Images/web/admincp_background.png");
    background-repeat: repeat-x;
    border-bottom: 1px solid #60A7DF;
    display: none;
    height: 167px;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 2;
}
#admincp-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: left;
    width: 903px;
}
#admincp-logo {
    position: absolute;
    right: 20px;
    top: 20px;
}
#admincp-subcontainer {
    background-image: url("../Images/web/admincp_menu.png");
    float: left;
    font-family: Tahoma;
    font-size: 13px;
    height: 122px;
    margin-left: 12px;
    margin-top: 14px;
    padding-left: 10px;
    padding-top: 14px;
    text-align: left;
    width: 177px;
}
#admincp-note {
    background-image: url("../Images/web/admincp_reports.png");
    color: #777777;
    float: left;
    font-family: Tahoma;
    font-size: 11px;
    height: 103px;
    margin-left: 12px;
    margin-top: 14px;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 33px;
    text-align: left;
    width: 161px;
}
#admincp-subcontainer a {
    color: #777777;
    display: block;
    padding-bottom: 5px;
    padding-left: 7px;
}
#admincp-subcontainer a:hover {
    color: #FF9000;
    text-decoration: underline;
}
#admincp-link-admin {
    background-color: #EEEEEE;
    color: #555555;
}
#admincp-reports-new {
    color: #FF0000;
    font-weight: bold;
}
#admincp .admincp-button {
    background-image: url("../Images/web/admincp_button_collapse.png");
    left: 0;
    position: absolute;
    top: 125px;
}
#cp-buttons {
    left: 0;
    position: fixed;
    top: 0;
    z-index: 1;
}
#cp-buttons div {
    display: inline-block;
    margin-right: 4px;
}
.admincp-button {
    background-image: url("../Images/web/admincp_button_expand.gif");
    cursor: pointer;
    height: 42px;
    width: 42px;
}
.modcp-button {
    background-image: url("../Images/web/modcp_button_expand.gif");
    background-position: center top;
    cursor: pointer;
    height: 42px;
    width: 42px;
}
#modcp .modcp-button {
    background-image: url("../Images/web/modcp_button_collapse.gif");
    bottom: 0;
    left: 46px;
    position: absolute;
}
.modcp-button.flashing {
    background-position: center bottom;
}
#modcp {
    background-image: url("../Images/web/modcp_background.png");
    background-repeat: repeat-x;
    border-bottom: 2px solid #FF9000;
    display: none;
    font-family: Tahoma;
    font-size: 11px;
    height: 294px;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 2;
}
#modcp-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: left;
    width: 903px;
}
#modcp-topics {
    height: 37px;
    margin-left: 5px;
    padding-top: 10px;
    width: 1e+7px;
}
#modcp-topics div.topic {
    -moz-border-radius: 8px 8px 8px 8px;
    background-image: url("../Images/icons/forumtitle.gif");
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid #BBBBBB;
    cursor: pointer;
    float: left;
    line-height: 30px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding-left: 35px;
}
#modcp-topics div.topic.selected {
    -moz-border-radius: 8px 8px 0 0;
    background-color: #EEEEEE;
}
#modcp-topics div.topic.taken {
    opacity: 0.25;
}
#modcp-topics div.topic.yours {
    border-color: #555555;
    font-weight: bold;
    opacity: 1;
}
#modcp-topics span.amount {
    -moz-border-radius: 0 7px 7px 0;
    background-color: #EEEEEE;
    color: #555555;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    height: 35px;
    margin-left: 10px;
    padding-right: 2px;
    text-align: center;
    width: 33px;
}
#modcp-methods {
    height: 37px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-top: 9px;
    padding-top: 7px;
    width: 903px;
}
#modcp-methods a {
    -moz-border-radius: 8px 8px 8px 8px;
    background-color: #FFFFFF;
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid #DDDDDD;
    color: #666666;
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px 10px 10px 32px;
}
#modcp-methods a[href]:hover {
    border-color: #AAAAAA;
    color: #000000;
}
#modcp-method-take {
    background-image: url("../Images/icons/zoekenicon.gif");
}
#modcp-method-release {
    background-image: url("../Images/icons/aanbiedenicon.gif");
}
#modcp-method-fixed {
    background-image: url("../Images/icons/completed.gif");
}
#modcp-method-takenby {
    background-color: #F4F4F4 !important;
    background-image: url("../Images/icons/forumalerts.gif");
}
#modcp-reports {
    height: 192px;
    position: absolute;
    width: 1e+7px;
}
#modcp-reports div.report {
    -moz-border-radius: 8px 8px 8px 8px;
    background-color: #FFFFFF;
    border: 1px solid #BBBBBB;
    display: inline-block;
    float: left;
    height: 160px;
    margin: 10px 27px 15px 5px;
    position: relative;
    width: 267px;
}
#modcp-reports div.report-content {
    float: left;
    height: 136px;
    margin: 2px;
    overflow: auto;
    padding: 5px 10px 10px;
    width: 210px;
}
#modcp-reports div.report-author {
    -moz-border-radius: 0 7px 7px 0;
    background-color: #EEEEEE;
    float: left;
    height: 150px;
    padding: 5px;
    width: 64px;
}
#modcp-reports img.habbo {
    bottom: 0;
    position: absolute;
    right: -30px;
}
#modcp-reports span.label {
    color: #888888;
}
#modcp-reports a.go {
    background-image: url("../Images/web/modcp-button-go.gif");
    background-position: left top;
    background-repeat: no-repeat;
    display: inline-block;
    height: 145px;
    position: absolute;
    right: 7px;
    top: 7px;
    width: 15px;
}
#modcp-reports a.go:hover {
    background-position: right top;
}
#modcp-reports hr {
    background-color: #EEEEEE;
    border: 0 none;
    color: #EEEEEE;
    height: 1px;
    margin-bottom: 4px;
    margin-top: 4px;
    width: 100%;
}
#container_top {
    background-image: url("../Images/web/container_top.gif");
    font-family: Verdana;
    font-size: 1px;
    height: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    position: relative;
    text-align: center;
    top: 2px;
    width: 899px;
}
#container {
    background-image: url("../Images/web/container_content.gif");
    font-family: Tahoma;
    font-size: 13px;
    margin-left: auto;
    margin-right: auto;
    width: 903px;
}
#container_bottom {
    background-image: url("../Images/web/container_bottom.gif");
    font-size: 1px;
    height: 7px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 899px;
}
.subcontainer_top {
    background-image: url("../Images/web/subcontainer_top.gif");
    font-size: 1px;
    height: 4px;
    margin-left: auto;
    margin-right: auto;
    width: 889px;
}
.subcontainer {
    background-image: url("../Images/web/subcontainer_content.gif");
    margin-left: auto;
    margin-right: auto;
    padding-left: 1px;
    padding-right: 1px;
    position: relative;
    text-align: left;
    width: 889px;
}
.subcontainer_bottom {
    background-image: url("../Images/web/subcontainer_bottom.gif");
    font-size: 1px;
    height: 4px;
    margin-left: auto;
    margin-right: auto;
    width: 889px;
}
.subcontainer_bottom.huge {
    background-image: url("../Images/web/subcontainer_bottom_huge.gif");
}
.subcontainer_bottom.huge2 {
    background-image: url("../Images/web/subcontainer_bottom_magazine.gif");
}
.subcontainer_bottom.big {
    background-image: url("../Images/web/subcontainer_bottom_big.gif");
}
.subcontainer_bottom.normal {
    background-image: url("../Images/web/subcontainer_bottom_normal.gif");
}
.spacer {
    font-size: 3px;
}
.bar {
    color: #FFFFFF;
    display: inline-block;
    font-family: Tahoma;
    font-size: 11px;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 4px;
    width: 861px;
}
.bar_grey {
    background-image: url("../Images/web/bar_grey.gif");
    color: #999999;
}
.bar_grey b {
    color: #777777;
}
.bar_blue {
    background-image: url("../Images/web/bar_blue.gif");
    color: #0098C5;
}
.bar_blue a {
    color: #FFFFFF;
    font-weight: bold;
}
#headers-forum {
    background-image: url("../Images/web/header_background_small.gif");
    background-position: center bottom;
    background-repeat: repeat-x;
    color: #FFFFFF;
    height: 75px;
    padding-bottom: 9px;
    padding-top: 8px;
    position: relative;
    text-align: center;
    width: 903px;
}
#forum-header {
    background-image: url("../Images/web/header_forum.gif");
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    width: 879px;
}
#forum-header-content {
    display: inline-table;
    height: 28px;
    margin-left: 772px;
    padding-left: 4px;
    padding-top: 40px;
    position: relative;
    text-align: left;
    width: 103px;
}
#forum-header-content img {
    padding-left: 5px;
    padding-right: 5px;
}
#headers-krant {
    background-image: url("../Images/web/header_background_xsmall.gif");
    background-position: center bottom;
    background-repeat: repeat-x;
    color: #FFFFFF;
    height: 54px;
    padding-bottom: 9px;
    padding-top: 12px;
    position: relative;
    text-align: center;
    width: 903px;
}
#krant-header {
    background-image: url("../Images/web/header_krant.gif");
    height: 48px;
    margin-left: auto;
    margin-right: auto;
    width: 877px;
}
#krant-header-content {
    display: inline-table;
    float: left;
    height: 48px;
    margin-left: 674px;
    position: relative;
    text-align: left;
    width: 203px;
}
#krant-header-content img {
    cursor: pointer;
    margin-left: 31px;
}
#headers-hdam {
    background-image: url("../Images/web/header_background_large.gif");
    background-position: center bottom;
    background-repeat: repeat-x;
    color: #FFFFFF;
    height: 188px;
    padding-bottom: 9px;
    padding-top: 12px;
    position: relative;
    text-align: center;
    width: 903px;
}
#hdam-header {
    background-image: url("../Images/web/header_hdam.gif");
    border-bottom: 1px solid #2E96CC;
    border-top: 2px solid #8AD3F9;
    height: 176px;
    margin-left: auto;
    margin-right: auto;
    width: 874px;
}
#headers {
    background-image: url("../Images/web/header_background.gif");
    background-position: center bottom;
    background-repeat: repeat-x;
    color: #FFFFFF;
    height: 129px;
    padding-bottom: 8px;
    padding-top: 8px;
    position: relative;
    text-align: center;
    width: 903px;
}
#headers.content-big {
    background-image: url("../Images/web/header_background_content_big.gif");
}
#headers b {
    color: #2E96CC;
}
#headers img {
    border-bottom: 1px solid #2E96CC;
    border-top: 2px solid #8AD3F9;
    margin-left: 5px;
    margin-right: 5px;
}
#header_slideshow {
    cursor: pointer;
    display: inline-block;
    height: 126px;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    width: 472px;
}
#headers a.header_2 {
    border-bottom: 1px solid #2E96CC;
    border-top: 2px solid #8AD3F9;
    left: 0;
    position: absolute;
}
#headers a.header_2, div.slideshow-header {
    display: block;
    height: 113px;
    padding: 5px 5px 5px 17px;
    text-align: left;
    width: 450px;
}
#headers span.header_title, div.slideshow-header span.header_title {
    font-size: 18px;
    font-weight: bold;
}
#headers span.header_categorie, div.slideshow-header span.header_categorie {
    font-family: Verdana;
    font-size: 11px;
}
#headers span.header_content, div.slideshow-header span.header_content {
    font-family: Verdana;
    font-size: 11px;
}
#headers img:hover {
    border-bottom: 2px solid #2E96CC;
    border-top: 1px solid #8AD3F9;
    cursor: pointer;
    margin-top: -1px;
}
#navbuttons {
    border-bottom: 1px solid #2E96CC;
    display: inline-block;
    float: left;
    margin-bottom: -100px;
    margin-left: 2px;
    padding-right: 30px;
    position: relative;
    top: -24px;
    width: 869px;
}
#navbuttons a {
    background-image: url("../Images/web/navbutton.gif");
    color: #FFFFFF;
    display: inline-block;
    float: left;
    font-family: Tahoma;
    font-size: 11px;
    height: 17px;
    line-height: 15px;
    margin-left: 10px;
    margin-right: -5px;
    margin-top: 2px;
    padding-top: 4px;
    text-align: center;
    width: 63px;
}
#navbuttons a#navigation_float {
    float: right;
}
#navbuttons a.navbuttons_red {
    background-image: url("../Images/web/navbutton_red.gif");
}
#navbuttons a:hover {
    background-image: url("../Images/web/navbutton_selected.gif");
    height: 19px;
    margin-top: 0;
    position: relative;
    top: 1px;
}
#navbuttons a.selected {
    background-image: url("../Images/web/navbutton_selected.gif");
    font-weight: bold;
    height: 19px;
    margin-top: 0;
    position: relative;
    top: 1px;
}
.navspacer {
    font-size: 19px;
}
.content {
    background-image: url("../Images/web/content_background.gif");
    display: inline-block;
    margin: 0;
    padding: 0 0 3px;
    position: relative;
    width: 100%;
}
.content.huge {
    background-image: url("../Images/web/background_forum.gif");
}
.content.huge2 {
    background-image: url("../Images/web/background_krant.gif");
}
.content.big {
    background-image: url("../Images/web/content_background_big.gif");
}
.content div.content-small {
    color: #FFFFFF;
    display: block;
    width: 200px;
}
.content div.content-big {
    display: block;
    width: 489px;
}
.content div.content-large {
    color: #2E96CC;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    width: 679px;
}
.content div.content-huge {
    color: #2E96CC;
    padding-bottom: 17px;
    padding-left: 5px;
    padding-right: 5px;
    width: 879px;
}
.content > div {
    display: block;
    float: left;
    text-align: center;
}
.content > div > * {
    margin-left: auto;
    margin-right: auto;
}
.contentspacer {
    font-size: 12px;
}
#header_container {
    position: relative;
}
#header {
    background-image: url("../Images/web/header.gif");
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 891px;
    z-index: 0;
}
#search_and_stats {
    color: #A2E3FA;
    display: block;
    float: left;
    font-family: Verdana;
    font-size: 12px;
    height: 30px;
    margin-left: 7px;
    padding-right: 20px;
    padding-top: 22px;
    position: relative;
    text-align: right;
    width: 658px;
}
#search_and_stats b {
    color: #FFFFFF;
}
#userlogin a, #userdetails a {
    text-decoration: none;
}
#userlogin a:hover, #userdetails a:hover {
    color: #808080;
}
#userlogin, #userdetails {
    background-image: url("../Images/web/login_background.gif");
    color: #494949;
    font-family: Tahoma;
    font-size: 11px;
    height: 149px;
    position: absolute;
    right: 6px;
    text-align: left;
    top: 1px;
    width: 200px;
}
#userdetails {
    background-image: url("../Images/web/userdetails-background.gif");
}
#userdetails-mood {
    height: 25px;
    left: 68px;
    position: absolute;
    top: 6px;
    width: 68px;
}
#userdetails-mood a {
    background-color: #808080;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    overflow: hidden;
    text-indent: -100px;
    width: 17px;
}
#userdetails-mood a:hover {
    background-color: #333333;
}
#userdetails-mood a.selected {
    background-color: #808080;
    cursor: default;
    opacity: 0.5;
}
#userdetails-mood-1 {
    background-image: url("../Images/web/mood-1.gif");
}
#userdetails-mood-2 {
    background-image: url("../Images/web/mood-2.gif");
}
#userdetails-mood-3 {
    background-image: url("../Images/web/mood-3.gif");
}
#userdetails-mood-4 {
    background-image: url("../Images/web/mood-4.gif");
}
#userdetails-options {
    background-image: url("../Images/web/userdetails-options.gif");
    background-position: center top;
    display: block;
    height: 25px;
    left: 144px;
    overflow: hidden;
    position: absolute;
    text-indent: -100px;
    top: 6px;
    width: 50px;
}
#userdetails-options:hover {
    background-position: center bottom;
}
#userdetails-habbo {
    left: 5px;
    position: absolute;
    top: 5px;
}
#userdetails-name {
    left: 74px;
    position: absolute;
    top: 43px;
}
#userdetails-name > span {
    display: block;
    font-size: 12px;
}
#userdetails-inbox, #userdetails-friendrequests {
    background-position: left top;
    color: inherit;
    display: block;
    font-weight: bold;
    height: 25px;
    line-height: 22px;
    position: absolute;
    text-align: center;
    top: 89px;
    width: 59px;
}
#userdetails-inbox.new, #userdetails-friendrequests.new {
    background-position: center bottom;
}
#userdetails-inbox {
    background-image: url("../Images/web/userdetails-inbox.gif");
    left: 135px;
    padding-right: 23px;
    width: 36px;
}
#userdetails-friendrequests {
    background-image: url("../Images/web/userdetails-friendrequests.gif");
    left: 70px;
    padding-right: 21px;
    width: 38px;
}
.userlogin_subcontainer {
    line-height: 14px;
    margin-bottom: 13px;
    margin-top: 6px;
    padding-left: 13px;
    padding-right: 14px;
    padding-top: 8px;
    position: relative;
}
#userlogin-go-register {
    -moz-border-radius: 3px 3px 3px 3px;
    background-color: #EEEEEE;
    border: 1px solid #DDDDDD;
    color: #555555;
    float: right;
    height: 20px;
    line-height: 10px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 6px;
}
#userlogin-go-register:hover {
    background-color: #FFFFFF;
}
#userlogin-fields {
    float: right;
    width: 103px;
}
#userlogin-fields input {
    width: 87px;
}
#userlogin-fields .checkbox, #userlogin-fields .checkbox-checked {
    margin: 4px 0 0;
}
#userlogin-labels {
    float: left;
    text-align: right;
}
#userlogin-labels span {
    display: block;
    height: 20px;
}
.krant_artikel {
    display: inline-table;
    float: left;
    padding: 10px 10px 10px 20px;
    text-align: left;
    width: 314px;
}
.krant_artikel img {
    margin-left: 3px;
    margin-right: 3px;
}
.krant_artikel span.krant_title {
    color: #16CBFF;
    display: block;
    font-family: Trebuchet MS;
    font-size: 20px;
    font-weight: bold;
}
.krant_artikel span.krant_author {
    color: #888888;
    display: block;
    font-size: 10px;
    font-style: italic;
    text-align: left;
}
.krant_artikel span.krant_text {
    color: #555555;
    display: block;
    font-size: 11px;
    text-align: justify;
}
.ads {
    float: left;
    width: 445px;
}
.ads div.ads_small {
    background-image: url("../Images/web/trade_ads_small.gif");
    float: left;
    height: 43px;
    margin-bottom: 5px;
    padding-left: 2px;
    padding-top: 5px;
    width: 46px;
}
.ads div.ads_large {
    background-image: url("../Images/web/trade_ads_large.gif");
    float: right;
    height: 43px;
    margin-bottom: 5px;
    padding-left: 5px;
    padding-right: 3px;
    padding-top: 5px;
    width: 386px;
}
.headline_content {
    height: 70px;
    padding-bottom: 20px;
    padding-left: 120px;
    padding-top: 20px;
}
.headline_content span.headline_category {
    color: #A8A7A7;
    float: left;
    width: 70%;
}
.headline_content span.headline_category a {
    color: #A8A7A7;
}
.headline_content span.headline_category a:hover {
    text-decoration: underline;
}
.headline_content span.headline_count {
    float: right;
    text-align: right;
    width: 30%;
}
.headline_content div.headline_title {
    color: #16CBFF;
    font-size: 14px;
    font-weight: bold;
}
.headline_content div.headline_info {
}

Ik snap niet waar heet fout gaat, want ik heb deze code al 3 keer bekeken en ik kan er niet zo snel een fout in vinden...

Hulp? alvast bedankt :).
 
layout

de code die jij laat zien hier is een css code
deze code kun beste is css map plaatsen en er een style.css aan mee geven

waneer je index.php of .htlm maakt plaats deze code
in je html op php
Code: 
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
is maar om je een idee te geven hoe het werkt
sla je html of php pagina op en ga kijken naar het voor beeld
 
aha, ik snap je.
maar ik heb 2 layouts.
het zijn zoals jij zegt allebij css layouts.
maar deze vindt ik toch mooier.
PHP: 
<!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">
<meta http-equiv="Content-Language" content="en-gb">
<base target="I1">
<title>HabboTime - Wij Hebben Onze Eigen Tijd!</title>
<style type="text/css">
p
{
font: 900 12px verdana
}
</style>
<style type="text/css">
body {
	font: 10px verdana;
	text-align:left;
	color: #000000;
	margin:10px auto 10 auto;
}

a {	font: 10px verdana; }
a:link    { color: #24C2FF; }
a:visited { color: #24C2FF; }
a:hover   { text-decoration: none; color: #D8FF00; }
a:active  { color: #24C2FF; }

body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}

.style5 {font-size: 9px}

.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:left;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
margin-left: 1em;
text-align:left;
}
</style>
</head>

<body id="layout" background="images/bg.gif" topmargin="2" bottommargin="1" style="text-align: center" leftmargin="1" rightmargin="1" marginwidth="1" marginheight="1">
<table width="953" height="625" border="0" align="center" cellpadding="0" cellspacing="0" id="HFFM_v6">
<tr>
		<td class="img_01" colspan="3"><img border="0" src="images/index.2.gif"></td>
  </tr>
<tr>
		<td class="img_01" colspan="3">
		<div align="center">
			<table border="0" width="909" cellspacing="0" cellpadding="0" height="27">
				<tr>
					<td background="images/index.4.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000" width="910" height="28">
					<table border="0" width="100%" cellspacing="0" cellpadding="0">
						<tr>
							<td width="76"><b><font color="#FFFFFF">&nbsp; DJ 
							Says:</font></b></td>
							<td><b><font color="#FFFFFF">
							<marquee>DJ Says here :D</marquee></font></b></td>
						</tr>
					</table>
					</td>
				</tr>
			</table>
		</div>
		</td>
  </tr>
	<tr>
	  <td class="img_02" rowspan="4" width="5"></td>
	</tr>
	<tr>
	  <td align="center" valign="top" class="img_09" width="206">
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>
				<TABLE id="Table_03" cellSpacing="0" cellPadding="0" border="0">
					<TR>
						<TD width="170" height="35" background="index.5.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left"><font size="1">&nbsp; </font>
						<font size="1" color="#FFFFFF">Navigation</font></TD>
					</TR>
					<TR>
						<TD vAlign="top" align="middle" background="images/index.6.gif" height="26" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left">
				<!-- Keep all menus within masterdiv-->
						</TD>
					</TR>
					<TR>
						<TD style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<img border="0" src="images/index.7.gif"></TD>
					</TR>
					<TBODY>
					</TBODY>
				</TABLE></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>
				<TABLE id="Table_4" cellSpacing="0" cellPadding="0" border="0">
					<TR>
						<TD width="170" height="35" background="index.5.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left"><font size="1">&nbsp; </font>
						<font size="1" color="#FFFFFF">Radio Box</font></TD>
					</TR>
					<TR>
						<TD vAlign="top" align="middle" background="images/index.6.gif" height="26" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left">
				<!-- Keep all menus within masterdiv-->
						</TD>
					</TR>
					<TR>
						<TD style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<img border="0" src="images/index.7.gif"></TD>
					</TR>
					<TBODY>
					</TBODY>
				</TABLE></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
		</table>
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
				<TABLE id="Table_5" cellSpacing="0" cellPadding="0" border="0">
					<TR>
						<TD width="170" height="35" background="index.5.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left"><font size="1">&nbsp;
						<font color="#FFFFFF">Featured Content</font></font></TD>
					</TR>
					<TR>
						<TD vAlign="top" align="middle" background="images/index.6.gif" height="26" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left">
				<!-- Keep all menus within masterdiv-->
						</TD>
					</TR>
					<TR>
						<TD style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<img border="0" src="images/index.7.gif"></TD>
					</TR>
					<TBODY>
					</TBODY>
				</TABLE></td>
			</tr>
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">&nbsp;</td>
			</tr>
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
				<TABLE id="Table_6" cellSpacing="0" cellPadding="0" border="0">
					<TR>
						<TD width="170" height="35" background="index.5.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left"><font size="1">&nbsp;
						<font color="#FFFFFF">Poll</font></font></TD>
					</TR>
					<TR>
						<TD vAlign="top" align="middle" background="images/index.6.gif" height="26" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left">
				<!-- Keep all menus within masterdiv-->
						</TD>
					</TR>
					<TR>
						<TD style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<img border="0" src="images/index.7.gif"></TD>
					</TR>
					<TBODY>
					</TBODY>
				</TABLE></td>
			</tr>
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">&nbsp;</td>
			</tr>
		</table>
		<p>
		  <br>
          </td>
	  <td height="485" rowspan="3" valign="top" width="754" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
		<div align="right">
		<table border="0" width="94%" cellspacing="0" cellpadding="0" align="right">
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">&nbsp;</td>
			</tr>
			<tr>
				<td background="index.8.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000" height="36">
				<p align="left"><font size="1">&nbsp; </font>
				<font size="1" color="#FFFFFF">Content</font></td>
			</tr>
			<tr>
				<td background="images/index.9.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">&nbsp;</td>
			</tr>
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
				<img border="0" src="images/index.10.gif"></td>
			</tr>
		</table>
		</div>
		</td>
	</tr>
	</table>
</body>
</html>

en deze heb ik op een een of andere manier makkelijker kunnen plaatsen dan die andere? css heeft toch geen verschil van bestanden>
 
regel 13 tot 44 kun je css gooien
blijft jou pagina lekker slank bij en als je iets aan gepast wil hebben kun je
dat doen in css
 
maar eigenlijk bedoel ik, ik zoek een website die html en css ondersteunt :S..
maar kan er geen een vinden!
 
Hoi tonnyroad,
css heeft toch geen verschil van bestanden?
Klik om te vergroten...
Toch wel!
Je moet het zo zien: de html-code en de css-code vormen één geheel, en sluiten op elkaar aan:
  • In de html-code van de <body> staat de structuur van de pagina-opbouw (blokken voor de kop-afbeelding, een linkerkolom, de navigatie binnen de linkerkolom, de inhoud met koppen en paragrafen, enz.)
  • In de html van de <body> moeten ook de aangrijpingspunten voor de css-opmaak staan.
    Als je alle paragrafen <p> dezelfde opmaak wilt geven, is de tag <p> het aangrijpingspunt.
    Maar als de paragrafen <p> in de linkerkolom bv. een andere kleur moeten krijgen dan de paragrafen in de inhoud, dan is er een extra aangrijpingspunt nodig, dat de css kan herkennen. Dit is een class="..." of een id="..." die in de html van een element wordt toegevoegd. Bijvoorbeeld <p class="groen">groene tekst!</p>.
  • In de css komen die aangrijpingspunten terug, en staan bij elk aangrijpingspunt de voorschriften van hoe de opmaak er uit moet zien (een linkerkolom moet links geplaatst worden, de letterkleur van een paragraaf met class="groen" moet groen worden, enz.
    Daarnaast kunnen er algemene styles zijn, die geen speciaal aanknopingspunt nodig hebben. Bv. alle <p>'s moeten een bepaald lettertype krijgen, enz.
Nu staan er in de 911 regels css-code die je wilt gebruiken een heleboel opmaakvoorschriften voor een heleboel aangrijpingspunten met eigen namen (classes of id's).
  • Maar als de aangrijpingspunten niet in de html-code staan, verandert de opmaak van de html helemaal niet!
  • Ook de structuur van de html (de volgorde en indeling van de html-elementen) moet kloppen op wat in de css staat - en omgekeerd.
In de lange lijst css staat bijvoorbeeld ergens:
Code: 
#background_head {
    background-image: url("../Images/web/background-head.gif");
    background-repeat: repeat-x;
    height: 348px;
    position: absolute;
    width: 100%;
    z-index: -10;
}
Maar in de html van je laatste post staat helemaal geen element met id="background_head". :shocked:
Dan kan die achtergrondfiguur "background-head.gif" ook nooit getoond worden.

Conclusie!
Waar je het css-sjabloon vandaan gehaald hebt, moet je ook kijken naar het bijbehorende model van de html-pagina (waar dezelfde aangrijpingspunten in staan). Anders kan het nooit werken.

O ja, in principe heeft dit helemaal niets te maken met waar je site gehost is. Als je de pagina kunt uploaden (en een stylesheet, en de plaatjes), is het genoeg.
En als je een gemaakte pagina thuis (lokaal) via de Verkenner in een browser goed kunt zien, zou het in orde moeten zijn. Als dat niet zo is, ligt het aan je html of css of de combinatie daarvan. *)

Succes!
Met vriendelijke groet,
CSShunter
____________
*) Voorwaarde: als de pagina geen onderdeel uitmaakt van een CMS (Content Management Systeem) en daarvoor speciale php-code bevat. Dan kan het lokaal niet werken (zonder speciale maatregelen). Maar aan je code te zien is dat hier niet het geval.
 
Laatst bewerkt:
Aha, ik snap je,
maar deze heb ik zelf in elkaar gezet?
Maar als ik hem nu via kladblok in : index.html - alle bestanden zet.
dan laat hij zien wat ik gemaakt heb?
maar gek genoeg kan ik hem niet openen in een site.
Dus, misschien klinkt dit onbeschoft. maar als je er een keer tijd voor hebt,
kunt u dan de fouten herschrijven?
alle afbeeldingen staan in mijn computer die ik gebruikt heb,
en als het nodig is, wil ik het bestand wel even naar u toe mailen?
maar je moet het wel openen met winrar, want ik kon de code niet direct openen dus moest hem eerst op mediafire zetten en daar weer opnieuw vanaf downloaden, anders kon ik hem helemaal niet openen. maar zoals ik al zei, als je het wilt, kun je je e-mail even doorgeven en dan verstuur ik het bestand naar je toe die ik heb gebruikt om de layout te bouwen.

Mvg, tonny.
 
Hoi Tonny,
Even nadenken ...
(denk)
(denk)
(denk)
...
Vraag 1: De pagina die je wilt maken heeft de code van reactie nr. #3?
Vraag 2: Die code heb je in Kladblok opgeslagen met als Type: "Alle bestanden", met als Codering: "utf-8", en met de naam index.html?
Vraag 3: Wat gebeurt er als je die pagina in de Verkenner opent met Internet Explorer of Firefox? Zie je iets, of blijft het een witte pagina?
 
Probeer het eens als volgt:

1. maak een nieuwe map aan op je bureaublad geef deze de naam (habbotime).
2. maak in deze map (habbotime) een nieuwe map aan en noem deze css
3. maak nog een map aan in de map (habbotime) en noem deze images
4. kopieer alles wat tussen de

HTML: 
<style type="text/css">
</style

staat.

5. maak een nieuw bestand aan via kladblok of een editor maakt niet uit. kopieer de css code hierin. (als je m in kladblok pakt vergeet dan niet.css er achter te typen)
6. sla dit bestand op in de map (habbotime -> css) als layout.css
7. ga naar je index.html verwijder de

HTML: 
<style type="text/css">
</style

tag tussen de

HTML: 
<head></head>

8. plaats nu in je head het volgende stukje code:

HTML: 
<link type="text/css" rel="stylesheet" href="css/layout.css" />
dit stukje code linkt naar de map css naar het bestand layout.css

9. sla je index.html op in de map (habbotime)
10. plaats al je gebruikte afbeeldingen in de map images
11. zet de boel online

als ik je een tip mag geven: probeer je volgende layout in <div> op te bouwen.
 
Pum, Als ik in kladblok ga opslaan als css dan blijft het nogsteets kladblok toch?
want dan verandert het icoontje alleen, dan komt er een soort van tandwiel bij te staan toch? als dit zo is, dan snap ik het wel zon beetje,
maar nu heb ik nog een vraag, Ik heb al naar verschillende menu's gezocht. en heb ook bij verschijnende sites de sites met firebug geinspecteerd, maar alle menu's zijn opgebouwd met <div>,
kan ik deze div menu's alsnog in mijn layout plaatsen?
en de tip die je gegeven hebt, lijkt mij wel te werken! ik ga er direct er mee aan de slag als ik antwoord heb op mijn vraag.
BVD
 
csshunter zei:
Vraag 1: De pagina die je wilt maken heeft de code van reactie nr. #3?
Vraag 2: Die code heb je in Kladblok opgeslagen met als Type: "Alle bestanden", met als Codering: "utf-8", en met de naam index.html?
Vraag 3: Wat gebeurt er als je die pagina in de Verkenner opent met Internet Explorer of Firefox? Zie je iets, of blijft het een witte pagina?
Klik om te vergroten...

vraag 1: ja , die gebruik ik.
vraag 2: Ik heb hem niet met een codering opgeslagen, alleen , alle bestanden, en dan index.html ja.
vraag 3: Als ik index.html wil openen dan zie ik alleen witte pagina ja, maar dan selecteer ik alles en an zie ik alleen de text. en het bestand dat ik in winrar heb staat, die laat wel de afbeeldingen zien enzo. maar als ik index.html uit winrar haal, op bureaublad zet, dan is wittepagina.
 
Juistem,
Dan ziet het er naar uit, dat het een mapjes-probleem is.
Als je de pure html-code neemt zonder de goede verwijzing naar het mapje van de images komt er inderdaad een mooie witte pagina op scherm:
De pagina zit hier in een mapje csshunter, en de pagina verwijst naar een onderliggend mapje images als vindplaats voor de afbeeldingen. Maar in mijn mapje csshunter/images staan niet de images!
Omdat zonder achtergrond-plaatje de background wit is, en in je css ook "wit" voor de tekstkleur is opgegeven, krijg je dan een blanco pagina te zien: wit op wit = wit. Als je de broncode via de browser bekijkt (menu Beeld: Bron, of Beeld: Paginabron), zie je dat de pagina wel bestaat: de code is er gewoon!

Vervolgens heb ik een serie plaatjes gemaakt met de namen die in jouw code staan en die in een mapje csshunter/tests/images gezet.
Als ik nu precies dezelfde pagina in het mapje csshunter/tests/ zet, dan gaat de browser op zoek naar het onderliggende mapje images, en in dat mapje zitten ze nu wel.
Conclusie.
Als je de pagina op je bureaublad hebt staan, moeten de images in een mapje "images" zitten, dat ook op het bureaublad staat.
:)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Okee, maar nu heb ik de layout mooi en prachtig op : http://tonnyroad.woelmuis.nl staan.
Maar nu is mijn probleem, hoe zet ik het menu erin?
en de rest? zoals de tekst, en een nieuwe kolom, en hoe laat ik de hele pagina scrollen?
 
... nog een vraag, Ik heb al naar verschillende menu's gezocht. en heb ook bij verschijnende sites de sites met firebug geïnspecteerd, maar alle menu's zijn opgebouwd met <div>,
kan ik deze div menu's alsnog in mijn layout plaatsen?
Klik om te vergroten...
Ja, in principe kan je zo'n uit <div>'s opgebouwd menu kopiëren en het in de html-code invoegen.
Maar het kan niet zonder meer: er hoort ook de bijbehorende css-code bij, want die zorgt dat de opmaak van die <div>'s op de goede manier plaatsvindt. (Zie hierboven: html en css moeten één geheel vormen!).

Conclusie.
Je moet dus op zoek naar het stylesheet van de pagina waarin die menu-<div>'s staan. In dat stylesheet moet je de opmaak zien terug te vinden van die <div>'s, maar dat kan best nog wel eens een lastig karwei zijn...

Waarschijnlijk is het makkelijker om zelf een menu met <div>'s te bouwen, en daar zelf de css bij te maken.
Gelukkig zwerven er op internet een heleboel menu-voorbeelden met handleiding rond. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Maar nu is mijn probleem, hoe zet ik het menu erin?
en de rest? zoals de tekst, en een nieuwe kolom, en hoe laat ik de hele pagina scrollen?
Klik om te vergroten...
Whoei!
Hier vraag je eigenlijk hoe een webpagina werkt, en hoe je die moet bouwen. :rolleyes:

Ik ben bang dat je dan eerst de basisbeginselen van html en css moet leren, anders gaat het niet lukken. (zoals de pagina nu is, is het nog lang geen goede html).

Ken je deze online (gratis) cursus al? Erg de moeite waard:

Succes!
CSShunter
 
je snapt me niet.
ik hoef geen beginners cursus, ik heb de layout zelf gebouwd dus waarom zou ik geen verstand van html en css hebben?
En heb al naar stylesheet gekeken, maar staat nergens een <div> waar ik het menu kan plaatsen. en als ik hem plaats, dan loopt hij meestal horizontaal en nooit verticaal,
dus heb nu een standaard menutje gebouwd en er in geplaats, werkt wel maar niet de verwachtingen die ik had verwacht. maar ik zal toch wel even op die cursus kijken of er ergens staat hoe ik pagina laat scrollen + menu plaatsen. :).
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan