Website fout

Khaboy · 3 nov 2012

Ik ben bezig met een website aan het maken en er zit een fout ik probeerde iets aan de zijkant te zetten (DIV) maar dan krijg ik me tekst helemaal onderaan..

HTML:

<!DOCTYPE HTML>
<html><head><title>Royal Streams | Home</title><meta name="description" content="website description"><meta name="keywords" content="website keywords, website keywords"><meta http-equiv="content-type" content="text/html; charset=windows-1252"><link rel="stylesheet" type="text/css" href="style/style.css"></head><body>
  <div id="main">
    <div id="header">
      <div id="logo">
        <div id="logo_text">
       <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html">Royal Streams</a></h1>
</div>
      </div>
      <div id="menubar">
        <ul id="menu">
        <li class="selected"><a href="index.html">Home</a></li>
          <li><a href="about us.html">About us</a></li>
          <li><a href="donate.html">Donate</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul></div>
    </div>
    <div id="content_header"></div>
    <div id="site_content">
      <div id="sidebar_container">
        <div class="sidebar">
          <div class="sidebar_top"></div>
          <div class="sidebar_item">
            <!-- insert your sidebar items here -->
            <img src="logo.png" width="168" height="143">
            <h4>&nbsp;</h4>
</div>
          <div class="sidebar_base"></div>
        </div>
        <div class="sidebar">
          <div class="sidebar_top"></div>
          <div class="sidebar_item">
            <h3>&nbsp;</h3>
            <script id="sid0010000012945912602">(function() {function async_load(){s.id="cid0010000012945912602";s.src='http://st.chatango.com/js/gz/emb.js';s.style.cssText="width:250px;height:360px;";s.async=true;s.text='{"handle":"royal-streams","styles":{"b":100,"c":"666666","d":"666666","g":"333333","j":"333333","k":"FFFFFF","l":"CCCCCC","m":"FFFFFF","s":1}}';var ss = document.getElementsByTagName('script');for (var i=0, l=ss.length; i < l; i++){if (ss[i].id=='sid0010000012945912602'){ss[i].id +='_';ss[i].parentNode.insertBefore(s, ss[i]);break;}}}var s=document.createElement('script');if (s.async==undefined){if (window.addEventListener) {addEventListener('load',async_load,false);}else if (window.attachEvent) {attachEvent('onload',async_load);}}else {async_load();}})();</script></div>
          <div class="sidebar_base"></div>
        </div>
      </div>
      <div id="content">
        <!-- insert the page content here -->
        <h1>Royal Streams        </h1>
        <table width="37%" style="width:100%; border-spacing:0;">
        <tr>
          <th width="32%" height="34">Streams</th></tr><tr>
            <td height="91"><img src="spanje.jpg"> Liga BBVA<hr/></td></tr>
        <br />
        <tr>
          <td height="91"><img src="england.jpg"> Premier League<hr/></td></tr>
        <br/>
        <tr>
          <td height="91"><img src="italie.jpg"> Serie A<hr/></td></tr>
          
        <br />
        <tr>
          <td height="91"><img src="Duitsland.jpg"> Bundesliga<hr/></td></tr></table>
      </div>
    </div>
    <div id="content_footer"></div>
    <div id="footer">
      <p><a href="index.html">Home</a> | <a href="about us.html">About us</a> |<a href="donate.html"> Donate</a>| <a href="contact.html">Contact</a></p>
      <p>Copyright © Royal Streams </p>
    </div>
  </div>
</body></html>

CSS Code

Code:

html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
  background: #F5F5EE;
  color: #555;}

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;}

img
{ border: 0;}

h1, h2, h3, h4, h5, h6 
{ color: #362C20;
  letter-spacing: 0em;
  padding: 0 0 5px 0;}

h1, h2, h3
{ font: normal 170% 'century gothic', arial;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;
  color: #000;}

h2
{ font-size: 160%;
  padding: 9px 0 5px 0;
  color: #009FBC;}

h3
{ font-size: 140%;
  padding: 5px 0 0 0;}

h4, h6
{ color: #009FBC;
  padding: 0 0 5px 0;
  font: normal 110% arial;
  text-transform: uppercase;}

h5, h6
{ color: #888;
  font: normal 95% arial;
  letter-spacing: normal;
  padding: 0 0 15px 0;}

a, a:hover
{ outline: none;
  text-decoration: underline;
  color: #AEB002;}

a:hover
{ text-decoration: none;}

blockquote
{ margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF;}

ul
{ margin: 2px 0 22px 17px;}

ul li
{ list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

.left
{ float: left;
  width: auto;
  margin-right: 10px;}

.right
{ float: right; 
  width: auto;
  margin-left: 10px;}

.center
{ display: block;
  text-align: center;
  margin: 20px auto;}

#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto; 
  margin-right: auto;}

#header
{ background: #323534 url(back.png) repeat-x;
  height: 177px;}

#logo
{ width: 880px;
  position: relative;
  height: 140px;
  background: transparent;}

#logo #logo_text 
{ position: absolute; 
  top: 10px;
  left: 0;}

#logo h1, #logo h2
{ font: normal 300% 'century gothic', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0 0 0 9px;}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
{ padding: 22px 0 0 0;
  color: #FFF;
  letter-spacing: 0.1em;
  text-decoration: none;}

#logo_text h1 a .logo_colour
{ color: #E4EC04;}

#logo_text a:hover .logo_colour
{ color: #FFF;}

#logo_text h2
{ font-size: 120%;
  padding: 4px 0 0 0;
  color: #999;}

#menubar
{ width: 880px;
  height: 46px;} 

ul#menu
{ float: right;
  margin: 0;}

ul#menu li
{ float: left;
  padding: 0 0 0 9px;
  list-style: none;
  margin: 1px 2px 0 0;
  background: #5A5A5A url(tab.png) no-repeat 0 0;}

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 35px 5px 28px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #5A5A5A url(tab.png) no-repeat 100% 0;} 

ul#menu li.selected a
{ height: 20px;
  padding: 6px 35px 5px 28px;}

ul#menu li.selected
{ margin: 1px 2px 0 0;
  background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
  color: #FFF;}

ul#menu li a:hover
{ color: #E4EC04;}

#site_content
{
	width: 1000px;
	overflow: hidden;
	margin: 20px auto 0 auto;
	padding: 0 0 10px 0;
} 

#sidebar_container
{
	float: right;
	width: 260px;
}

.sidebar_top
{
	width: 350px;
	height: 14px;
	background: transparent url(side_top.png) no-repeat;
}

.sidebar_base
{
	width: 350px;
	height: 14px;
	background: url(side_base.png) no-repeat;
}

.sidebar
{
	float: right;
	width: 260px;
	padding: 0;
	margin: 0 0 16px 0;
}

.sidebar_item
{
	background: url(side_back.png) repeat-y;
	padding: 0 15px;
	width: 260px;
}

.sidebar li a.selected
{ color: #444;} 

.sidebar ul
{ margin: 0;} 

#content
{
	text-align: left;
	width: 555px;
	padding: 0 0 0 5px;
	float: left;
}
  
#content ul
{ margin: 2px 0 22px 0px;}

#content ul li, .sidebar ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 0 0; 
  padding: 0 0 4px 25px;
  line-height: 1.5em;}

#footer
{ width: 100%;
  font-family: 'trebuchet ms', sans-serif;
  font-size: 100%;
  height: 80px;
  padding: 28px 0 5px 0;
  text-align: center; 
  background: #3B3939 url(footer.png) repeat-x;
  color: #A8AA94;}

#footer p
{ line-height: 1.7em;
  padding: 0 0 10px 0;}

#footer a
{ color: #A8AA94;
  text-decoration: none;}

#footer a:hover
{ color: #FFF;
  text-decoration: none;}

.search
{ color: #5D5D5D; 
  border: 1px solid #BBB; 
  width: 134px; 
  padding: 4px; 
  font: 100% arial, sans-serif;}

.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left; 
  width: 200px; 
  text-align: left;}
  
.form_settings input, .form_settings textarea
{ padding: 5px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
  
.form_settings .submit
{ font: 100% arial; 
  border: 0; 
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #3B3B3B; 
  color: #FFF;}

.form_settings textarea, .form_settings select
{ font: 100% arial; 
  width: 299px;}

.form_settings select
{ width: 310px;}

.form_settings .checkbox
{ margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none;}

.separator
{ width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;}
  
table
{ margin: 10px 0 30px 0;}

table tr th, table tr td
{ background: #3B3B3B;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;}
  
table tr td
{ background: #E5E5DB;
  color: #47433F;
  border-top: 1px solid #FFF;}

Khaboy · 3 nov 2012

Heb het al zelf opgelost, kan opslot..

crash · 3 nov 2012

Geef je ook de oplossing? Zo hebben andere er mogelijk ook nog wat aan.

Khaboy · 3 nov 2012

Nou.. Het is niet echt een oplossing, maar ik gebruik zeg maar een template... Dus ik heb die .zip bestand van de Template opnieuw open gemaakt een gebruikte de DIV gegevens van de voorbeeld template in mijn eigen template.

Ik hoop dat ik duidelijk ben

Website fout

Khaboy

Gebruiker

Khaboy

Gebruiker

crash

Verenigingslid

Khaboy

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy