2017-06-02 47 views
2

我對div內容和邊欄有div編碼問題。正如你所看到的(鏈接已刪除>問題已解決)我需要Home部分下的版權部分,並且想要在右側像這樣的鏈接啓動側欄:(鏈接已刪除>問題已解決)CSS/HTML中的列與div

你知道嗎我怎麼能做到這一點?

.container { 
 
\t width:1000px; 
 
\t margin:0 auto; 
 
} 
 

 
.clearfix:after { 
 
\t content:""; 
 
\t display:table; 
 
\t clear:both; 
 
} 
 

 
#navbar { 
 
\t font-family:Ubuntu Condensed; 
 
\t font-size:16px; 
 
\t background-color:#ffff00; 
 
\t background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1)); 
 
\t height:44px; 
 
\t border-radius:4px 4px 0 0; 
 
\t margin-top:-44px; 
 
\t box-shadow:inset 0px -22px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -3px 0px 0px rgba(0,0,0,0.1),0px 0px 14px 0px rgba(0,0,0,0.5); 
 
} 
 

 
#navbar ul { 
 
\t margin:0; 
 
\t padding:12.5px 0 0 0; 
 
} 
 

 
#navbar ul li { 
 
\t list-style:none; 
 
\t display:inline; 
 
\t float:left; 
 
} 
 

 
#navbar ul .navright { 
 
\t float:right; 
 
\t position:relative; 
 
} 
 

 
#navbar ul li a { 
 
\t padding:13px 20px; 
 
\t box-shadow:1px 0px 0px 0px rgba(255,255,255,0.08),inset -1px 0px 0px 0px rgba(0,0,0,0.2); 
 
\t color:#000; 
 
\t text-shadow:0 1px #ffff00; 
 
\t text-decoration:none; 
 
} 
 

 
#navbar ul .navright a { 
 
\t box-shadow:-1px 0px 0px 0px rgba(255,255,255,0.08),inset 1px 0px 0px 0px rgba(0,0,0,0.2); 
 
} 
 

 
#navbar ul li a:hover { 
 
\t background-color:rgba(0,0,0,0.05); 
 
\t text-decoration:bold; 
 
} 
 

 
#navcollapse { 
 
\t display:none!important; 
 
} 
 

 
.open-dropmenu { 
 
\t display:block!important; 
 
} 
 

 
#nav-logo { 
 
\t background-image:url(img/logo.png); 
 
\t width:203px; 
 
\t height:77px; 
 
\t display:none; 
 
\t float:left; 
 
\t margin:-2px 0 0 10px; 
 
} 
 

 
.space { 
 
\t height: 20px; 
 
} 
 

 
#content { 
 
\t width:645px; 
 
\t background-color:#fff; 
 
\t border-radius:4px 4px 4px 4px; 
 
\t box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2); 
 
\t padding:15px; 
 
\t float:left; 
 
\t margin-right:20px; 
 
\t margin-bottom:20px; 
 
} 
 

 
#sidebar { 
 
\t width:274px; 
 
\t background-color:#fff; 
 
\t border-radius:4px 4px 4px 4px; 
 
\t box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2); 
 
\t padding:15px; 
 
\t float:right; 
 
\t margin-bottom:20px; 
 
} 
 

 
#footer { 
 
\t vertical-align: middle; 
 
} 
 

 
.side-heading { 
 
\t text-shadow:0 1px #ffff00; 
 
\t padding:5px 5px 7px 5px; 
 
\t margin:0px 0 5px 0; 
 
\t border-radius:3px; 
 
\t font-weight:normal; 
 
\t font-family:Ubuntu Condensed; 
 
\t font-size:16px; 
 
\t color:#000; 
 
\t background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1)); 
 
\t background-color:#ffff00; 
 
\t box-shadow:inset 0px -15px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -2px 0px 0px rgba(0,0,0,0.1); 
 
} 
 

 
.home-badges { 
 
\t width:275px; 
 
\t margin:0 auto; 
 
} 
 

 
.holder,.holder_hover { 
 
\t border-radius:4px; 
 
\t width:50px; 
 
\t height:50px; 
 
\t background-position:center; 
 
\t background-repeat:no-repeat; 
 
\t float:left; 
 
\t margin:2.5px; 
 
\t cursor:pointer; 
 
\t -webkit-transition:all 0.3s ease-out; 
 
\t -moz-transition:all 0.3s ease-out; 
 
\t background-color:#ebebeb; 
 
} 
 

 
.spinner { 
 
\t animation-name:rotate; 
 
\t animation-duration:10s; 
 
\t animation-iteration-count:infinite; 
 
\t animation-timing-function:linear; 
 
\t position:absolute; 
 
\t width:55px; 
 
\t height:55px; 
 
\t background:url(img/spinner.png) no-repeat center; 
 
\t background-size:cover; 
 
}
<div class="container"> 
 
\t <div id="navbar"> 
 
\t \t <a href="#" id="nav-logo"></a> 
 
\t \t <div id="navcollapse" style="font-size:16px">MENU</div> 
 
\t \t <ul id="mainnav"> 
 
\t \t <li><a href="?page=">/</a></li> 
 
\t \t <li><a href="?page=">/</a></li> 
 
\t \t <li><a href="?page=">/</a></li> 
 
\t \t <li><a href="?page=">/</a></li> 
 
\t \t <li><a href="?page=">/</a></li> 
 
\t \t <li class="hide-small-screen"></li> 
 
\t \t <li class="navright"><a href="?page=login">Login</a></li> 
 
\t \t </ul> 
 
\t </div> 
 
\t 
 
\t <div class="space"></div> 
 
\t 
 
\t \t <div id="content"> 
 
\t \t \t <div class="clearfix"></div> 
 
\t \t \t \t - 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id="content" style="font-size:12px"> 
 
\t \t \t <div class="clearfix"></div> 
 
\t \t \t © 2017 
 
\t \t </div> 
 

 
\t \t <div id="sidebar"> 
 
\t \t \t <div class="side-heading">Nieuwste badges</div> 
 
\t \t \t \t <div class="box_inside"> 
 
\t \t \t \t <div class="home-badges"> 
 
\t \t \t \t \t <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC11.gif);"></div> 
 
\t \t \t \t \t <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC10.gif);"></div> 
 
\t \t \t \t \t <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC09.gif);"></div> 
 
\t \t \t \t \t <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC08.gif);"></div> 
 
\t \t \t \t \t <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC07.gif);"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t <div style="clear:both;"></div> 
 
\t \t \t \t </div> 
 
\t \t </div> 
 
\t \t <div id="sidebar"> 
 
\t \t \t <div class="side-heading">Nieuwste meubels</div> 
 
\t \t \t \t <div class="box_inside"> 
 
\t \t \t \t <div class="home-badges"> 
 
\t \t \t \t \t <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
\t \t \t \t \t <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
\t \t \t \t \t <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
\t \t \t \t \t <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
\t \t \t \t \t <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t <div style="clear:both;"></div> 
 
\t \t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id="sidebar"> 
 
\t \t \t <div class="side-heading">Twitter</div> 
 
\t \t \t \t <div class="box_inside"> 
 
\t \t \t \t <div class="home-badges"> 
 
\t \t \t \t <a class="twitter-timeline" href="https://twitter.com/" data-tweet-limit="1" data-chrome="noheader nofooter noborders"></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t <div style="clear:both;"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t </div> 
 
\t <div class="clearfix"></div> 
 
\t 
 
</div>

+0

那豈不是容易使index.php文件的複製,重命名和更改的內容,如果它結構是否一樣? (我看到它的結構相同) – Syfer

回答

1

添加以下代碼:

#mainleft { 
    float: left; 
} 

#mainright { 
    float: right; 
} 

去除#content & #sidebar的花車,以及包裹#content#mainleft#sidebar#mainright股利。

/*Add this*/ 
 

 
#mainleft { 
 
    float: left; 
 
} 
 

 
#mainright { 
 
    float: right; 
 
} 
 

 
.container { 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
#navbar { 
 
    font-family: Ubuntu Condensed; 
 
    font-size: 16px; 
 
    background-color: #ffff00; 
 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); 
 
    height: 44px; 
 
    border-radius: 4px 4px 0 0; 
 
    margin-top: -44px; 
 
    box-shadow: inset 0px -22px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -3px 0px 0px rgba(0, 0, 0, 0.1), 0px 0px 14px 0px rgba(0, 0, 0, 0.5); 
 
} 
 

 
#navbar ul { 
 
    margin: 0; 
 
    padding: 12.5px 0 0 0; 
 
} 
 

 
#navbar ul li { 
 
    list-style: none; 
 
    display: inline; 
 
    float: left; 
 
} 
 

 
#navbar ul .navright { 
 
    float: right; 
 
    position: relative; 
 
} 
 

 
#navbar ul li a { 
 
    padding: 13px 20px; 
 
    box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.08), inset -1px 0px 0px 0px rgba(0, 0, 0, 0.2); 
 
    color: #000; 
 
    text-shadow: 0 1px #ffff00; 
 
    text-decoration: none; 
 
} 
 

 
#navbar ul .navright a { 
 
    box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.08), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

 
#navbar ul li a:hover { 
 
    background-color: rgba(0, 0, 0, 0.05); 
 
    text-decoration: bold; 
 
} 
 

 
#navcollapse { 
 
    display: none!important; 
 
} 
 

 
.open-dropmenu { 
 
    display: block!important; 
 
} 
 

 
#nav-logo { 
 
    background-image: url(img/logo.png); 
 
    width: 203px; 
 
    height: 77px; 
 
    display: none; 
 
    float: left; 
 
    margin: -2px 0 0 10px; 
 
} 
 

 
.space { 
 
    height: 20px; 
 
} 
 

 
#content { 
 
    width: 645px; 
 
    background-color: #fff; 
 
    border-radius: 4px 4px 4px 4px; 
 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 
 
    padding: 15px; 
 
    /*float:left; remove this */ 
 
    margin-right: 20px; 
 
    margin-bottom: 20px; 
 
} 
 

 
#sidebar { 
 
    width: 274px; 
 
    background-color: #fff; 
 
    border-radius: 4px 4px 4px 4px; 
 
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 
 
    padding: 15px; 
 
    /*float:right; remove this */ 
 
    margin-bottom: 20px; 
 
} 
 

 
#footer { 
 
    vertical-align: middle; 
 
} 
 

 
.side-heading { 
 
    text-shadow: 0 1px #ffff00; 
 
    padding: 5px 5px 7px 5px; 
 
    margin: 0px 0 5px 0; 
 
    border-radius: 3px; 
 
    font-weight: normal; 
 
    font-family: Ubuntu Condensed; 
 
    font-size: 16px; 
 
    color: #000; 
 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); 
 
    background-color: #ffff00; 
 
    box-shadow: inset 0px -15px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1); 
 
} 
 

 
.home-badges { 
 
    width: 275px; 
 
    margin: 0 auto; 
 
} 
 

 
.holder, 
 
.holder_hover { 
 
    border-radius: 4px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    float: left; 
 
    margin: 2.5px; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    background-color: #ebebeb; 
 
} 
 

 
.spinner { 
 
    animation-name: rotate; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    position: absolute; 
 
    width: 55px; 
 
    height: 55px; 
 
    background: url(img/spinner.png) no-repeat center; 
 
    background-size: cover; 
 
}
<div class="container"> 
 
    <div id="navbar"> 
 
    <a href="#" id="nav-logo"></a> 
 
    <div id="navcollapse" style="font-size:16px">MENU</div> 
 
    <ul id="mainnav"> 
 
     <li><a href="?page=home">Home</a></li> 
 
     <li><a href="?page=nieuws">Nieuws</a></li> 
 
     <li><a href="?page=habbo">Habbo</a></li> 
 
     <li><a href="?page=intrahabbo">IntraHabbo</a></li> 
 
     <li><a href="?page=fancenter">Fancenter</a></li> 
 
     <li class="hide-small-screen"></li> 
 
     <li class="navright"><a href="?page=login">Login</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="space"></div> 
 
    <div id="mainleft"> 
 
    <div id="content"> 
 
     <div class="clearfix"></div> 
 
     <?php 
 
\t \t \t \t \t if (!empty($_GET['page'])) 
 
\t \t \t \t { 
 
\t \t \t \t \t if (file_exists('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php')) 
 
\t \t \t \t { 
 
\t \t \t \t \t include('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php'); 
 
\t \t \t \t } 
 
\t \t \t \t else 
 
\t \t \t \t { 
 
\t \t \t \t \t include('http://www.habbo.iamcolin.nl/pages/404.php'); 
 
\t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t else 
 
\t \t \t \t { 
 
\t \t \t \t \t include('pages/home.php'); 
 
\t \t \t \t } 
 
\t \t \t \t ?> 
 
    </div> 
 

 
    <div id="content" style="font-size:12px"> 
 
     <div class="clearfix"></div> 
 
     <b>© 2017 IntraHabbo</b><br> IntraHabbo is niet verbonden aan, aanbevolen, gesponsord of specifiek goedgekeurd door Sulake Corporation Oy of aan zijn gelieerde ondernemingen. IntraHabbo kan gebruik maken van handelsmerken en andere intellectuele 
 
     eigendommen van Habbo, zoals toegestaan volgens het Habbo Fansitebeleid. 
 
    </div> 
 
    </div> 
 
    <div id="mainright"> 
 
    <div id="sidebar"> 
 
     <div class="side-heading">Nieuwste badges</div> 
 
     <div class="box_inside"> 
 
     <div class="home-badges"> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC11.gif);"></div> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC10.gif);"></div> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC09.gif);"></div> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC08.gif);"></div> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC07.gif);"></div> 
 
     </div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
    </div> 
 
    <div id="sidebar"> 
 
     <div class="side-heading">Nieuwste meubels</div> 
 
     <div class="box_inside"> 
 
     <div class="home-badges"> 
 
      <a href="#"> 
 
      <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div> 
 
      </a> 
 
      <a href="#"> 
 
      <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div> 
 
      </a> 
 
      <a href="#"> 
 
      <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div> 
 
      </a> 
 
      <a href="#"> 
 
      <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div> 
 
      </a> 
 
      <a href="#"> 
 
      <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div> 
 
      </a> 
 
     </div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
    </div> 
 

 
    <div id="sidebar"> 
 
     <div class="side-heading">Twitter</div> 
 
     <div class="box_inside"> 
 
     <div class="home-badges"> 
 
      <a class="twitter-timeline" href="https://twitter.com/intrahabbo" data-tweet-limit="1" data-chrome="noheader nofooter noborders"></a> 
 
      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
     </div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
    <div class="clearfix"></div> 
 

 
</div>

0

首先,切記id應該是唯一的,使用class代替。然後,您可以添加html5標記,例如保存主要內容的<main>,以及側邊欄<aside>,它會在您的標記中提供一些結構,這對於輔助功能非常有用。

你可以看看我是如何優化了你的代碼:

.container { 
 
\t width:1000px; 
 
\t margin:0 auto; 
 
} 
 

 
.clearfix:after { 
 
\t content:""; 
 
\t display:table; 
 
\t clear:both; 
 
} 
 

 
#navbar { 
 
\t font-family:Ubuntu Condensed; 
 
\t font-size:16px; 
 
\t background-color:#ffff00; 
 
\t background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1)); 
 
\t height:44px; 
 
\t border-radius:4px 4px 0 0; 
 
\t margin-top:-44px; 
 
\t box-shadow:inset 0px -22px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -3px 0px 0px rgba(0,0,0,0.1),0px 0px 14px 0px rgba(0,0,0,0.5); 
 
} 
 

 
#navbar ul { 
 
\t margin:0; 
 
\t padding:12.5px 0 0 0; 
 
} 
 

 
#navbar ul li { 
 
\t list-style:none; 
 
\t display:inline; 
 
\t float:left; 
 
} 
 

 
#navbar ul .navright { 
 
\t float:right; 
 
\t position:relative; 
 
} 
 

 
#navbar ul li a { 
 
\t padding:13px 20px; 
 
\t box-shadow:1px 0px 0px 0px rgba(255,255,255,0.08),inset -1px 0px 0px 0px rgba(0,0,0,0.2); 
 
\t color:#000; 
 
\t text-shadow:0 1px #ffff00; 
 
\t text-decoration:none; 
 
} 
 

 
#navbar ul .navright a { 
 
\t box-shadow:-1px 0px 0px 0px rgba(255,255,255,0.08),inset 1px 0px 0px 0px rgba(0,0,0,0.2); 
 
} 
 

 
#navbar ul li a:hover { 
 
\t background-color:rgba(0,0,0,0.05); 
 
\t text-decoration:bold; 
 
} 
 

 
#navcollapse { 
 
\t display:none!important; 
 
} 
 

 
.open-dropmenu { 
 
\t display:block!important; 
 
} 
 

 
#nav-logo { 
 
\t background-image:url(img/logo.png); 
 
\t width:203px; 
 
\t height:77px; 
 
\t display:none; 
 
\t float:left; 
 
\t margin:-2px 0 0 10px; 
 
} 
 

 
.space { 
 
\t height: 20px; 
 
} 
 

 

 
.main { 
 
    width:645px; 
 
    float:left; 
 
    margin-right:20px; 
 
} 
 

 
.aside { 
 
    width:274px; 
 
    float:right; 
 
} 
 

 
.content { 
 
\t background-color:#fff; 
 
\t border-radius:4px 4px 4px 4px; 
 
\t box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2); 
 
\t padding:15px; 
 
    margin-bottom:20px; 
 
} 
 

 
.sidebar { 
 
\t width:274px; 
 
\t background-color:#fff; 
 
\t border-radius:4px 4px 4px 4px; 
 
\t box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2); 
 
\t padding:15px; 
 
\t margin-bottom:20px; 
 
} 
 

 
#footer { 
 
\t vertical-align: middle; 
 
} 
 

 
.side-heading { 
 
\t text-shadow:0 1px #ffff00; 
 
\t padding:5px 5px 7px 5px; 
 
\t margin:0px 0 5px 0; 
 
\t border-radius:3px; 
 
\t font-weight:normal; 
 
\t font-family:Ubuntu Condensed; 
 
\t font-size:16px; 
 
\t color:#000; 
 
\t background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1)); 
 
\t background-color:#ffff00; 
 
\t box-shadow:inset 0px -15px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -2px 0px 0px rgba(0,0,0,0.1); 
 
} 
 

 
.home-badges { 
 
\t width:275px; 
 
\t margin:0 auto; 
 
} 
 

 
.holder,.holder_hover { 
 
\t border-radius:4px; 
 
\t width:50px; 
 
\t height:50px; 
 
\t background-position:center; 
 
\t background-repeat:no-repeat; 
 
\t float:left; 
 
\t margin:2.5px; 
 
\t cursor:pointer; 
 
\t -webkit-transition:all 0.3s ease-out; 
 
\t -moz-transition:all 0.3s ease-out; 
 
\t background-color:#ebebeb; 
 
} 
 

 
.spinner { 
 
\t animation-name:rotate; 
 
\t animation-duration:10s; 
 
\t animation-iteration-count:infinite; 
 
\t animation-timing-function:linear; 
 
\t position:absolute; 
 
\t width:55px; 
 
\t height:55px; 
 
\t background:url(img/spinner.png) no-repeat center; 
 
\t background-size:cover; 
 
}
<div class="container"> 
 
\t <div id="navbar"> 
 
\t \t <a href="#" id="nav-logo"></a> 
 
\t \t <div id="navcollapse" style="font-size:16px">MENU</div> 
 
\t \t <ul id="mainnav"> 
 
    \t \t <li><a href="?page=home">Home</a></li> 
 
    \t \t <li><a href="?page=nieuws">Nieuws</a></li> 
 
    \t \t <li><a href="?page=habbo">Habbo</a></li> 
 
    \t \t <li><a href="?page=intrahabbo">IntraHabbo</a></li> 
 
    \t \t <li><a href="?page=fancenter">Fancenter</a></li> 
 
    \t \t <li class="hide-small-screen"></li> 
 
    \t \t <li class="navright"><a href="?page=login">Login</a></li> 
 
\t \t </ul> 
 
\t </div> 
 
\t 
 
\t <div class="space"></div> 
 

 
    <main class="main"> 
 
\t \t <div class="content"> 
 
\t \t \t <div class="clearfix"></div> 
 
\t \t \t \t <?php 
 
\t \t \t \t \t if (!empty($_GET['page'])) 
 
\t \t \t \t { 
 
\t \t \t \t \t if (file_exists('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php')) 
 
\t \t \t \t { 
 
\t \t \t \t \t include('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php'); 
 
\t \t \t \t } 
 
\t \t \t \t else 
 
\t \t \t \t { 
 
\t \t \t \t \t include('http://www.habbo.iamcolin.nl/pages/404.php'); 
 
\t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t else 
 
\t \t \t \t { 
 
\t \t \t \t \t include('pages/home.php'); 
 
\t \t \t \t } 
 
\t \t \t \t ?> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="content" style="font-size:12px"> 
 
\t \t \t <div class="clearfix"></div> 
 
\t \t \t <b>© 2017 IntraHabbo</b><br> 
 
\t \t \t IntraHabbo is niet verbonden aan, aanbevolen, gesponsord of specifiek goedgekeurd door Sulake Corporation Oy of aan zijn gelieerde ondernemingen. IntraHabbo kan gebruik maken van handelsmerken en andere intellectuele eigendommen van Habbo, zoals toegestaan volgens het Habbo Fansitebeleid. 
 
\t \t </div> 
 
    </main> 
 

 
    <aside class="aside"> 
 
    <div class="sidebar"> 
 
     <div class="side-heading">Nieuwste badges</div> 
 
     <div class="box_inside"> 
 
     <div class="home-badges"> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC11.gif);"></div> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC10.gif);"></div> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC09.gif);"></div> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC08.gif);"></div> 
 
      <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC07.gif);"></div> 
 
     </div> 
 
      <div style="clear:both;"></div> 
 
     </div> 
 
    </div> 
 
    <div class="sidebar"> 
 
     <div class="side-heading">Nieuwste meubels</div> 
 
     <div class="box_inside"> 
 
     <div class="home-badges"> 
 
      <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
      <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
      <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
      <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
      <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a> 
 
     </div> 
 
      <div style="clear:both;"></div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="sidebar"> 
 
     <div class="side-heading">Twitter</div> 
 
     <div class="box_inside"> 
 
     <div class="home-badges"> 
 
     <a class="twitter-timeline" href="https://twitter.com/intrahabbo" data-tweet-limit="1" data-chrome="noheader nofooter noborders"></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
     </div> 
 
      <div style="clear:both;"></div> 
 
     </div> 
 
    </div> 
 
    </aside> 
 
\t 
 
</div>