2013-06-08, 06:00 PM
Well im tring to code in html and css file is not in use of the forum software is just an html and css file which im trying to make by my own because i think if i make it first in html and css files external of it and then if i know to convert and apply them into them it would be faster for me to learn on making themes.
So whats wrong with the code?why does it explodes like this on page?it shouldht be there i guess it needs some overflow or clear both and i dont know where shall i put it.
[spoiler]![[Image: O6m3wWV.png]](https://camo.mybb.com/554b3f89e7b12bad7f4e8578376eff930e628b45/687474703a2f2f692e696d6775722e636f6d2f4f366d337757562e706e67)
[/spoiler]
Html code:
[spoiler]
css code:
[spoiler]
So whats wrong with the code?why does it explodes like this on page?it shouldht be there i guess it needs some overflow or clear both and i dont know where shall i put it.
[spoiler]
Html code:
[spoiler]
<html>
<head>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="12re.css">
</head>
<body>
<div class="container_12">
<header>
<h1><a href="#">
<img src="images/logo.gif" alt="logo">
</a></h1>
<div class="menu">
<ul>
<li><a href="#">
<img src="images/search.gif" alt="">
Search</a></li>
<li><a href="#">
<img src="images/memberlist.gif" alt="">
Member List</a></li>
<li><a href="#">
<img src="images/calendar.gif" alt="">
Calendar</a></li>
<li><a href="#">
<img src="images/help.gif" alt="">
Help</a></li>
</ul>
</div>
</header>
<div class="panel grid_12">
<div class="grid_9"><span class="welcome">Welcome back, Manos</span> You last visited: Yesterday, 02:21am(<a href="#" class="selected">UserCP</a>-
<a href="#">ModCP</a>-
<a href="#">AdminCP</a>-
<a href="#">LogOut</a>)
</div>
<br>
<div class="floatl">
<a href="#">View New Posts</a>|
<a href="#">View Today Posts</a>|
<a href="#">Private Messages</a>(Unread 0,Total 1)
</div>
<div class="floatr">
Current time: 11-10-2009, 09:36PM
<br>
<a href="#">Open Buddy List</a></div>
</div>
<nav>
<h3>Forums</h3>
</nav>
<!-- Start table of category -->
<div class="category">
<table class="grid_12"cellspacing="1px" cellpadding="2px">
<tr>
<td colspan="5"><div class="thead"><h3>My Category</h3></div></td>
</tr>
<tr class="tcat">
<td colspan="2" style="width: 381px;">Myforum</td>
<td style="width: 100px;text-align:center;">Threads </td>
<td style="width: 100px;text-align:center;">Posts</td>
<td colspan="2" style="text-align:center">Last Post</td>
</tr>
<tr class="trow1">
<td style="text-align:center;width:17px;">
<img src="images/off.gif" alt="">
</td>
<td class="padleft"><h4><a href="#">Forum</a></h4>
<div class="smalltext">Description is over here guys!</div>
</td>
<td style="text-align:center;">2</td>
<td style="text-align:center;">3</td>
<td style="text-align:right;"><a href="#">Test Thread</a>
<div class="smalltext">Today 12:52 PM</div>
<p class="movup">by <a href="#">Ferron</a></p>
</td>
</tr>
<tr class="trow1">
<td style="text-align:center;">
<img src="images/off.gif" alt="">
</td>
<td class="padleft"><h4><a href="#">Forum</a></h4>
<div class="smalltext">Description is over here guys!</div>
</td>
<td style="text-align:center;">2</td>
<td style="text-align:center;">3</td>
<td style="text-align:right;"><a href="#">Test Thread</a>
<div class="smalltext">Today 12:52 PM</div>
<p class="movup">by <a href="#">Ferron</a></p>
</td>
</tr>
</table>
</div>
<!-- End of table of category -->
<div class="boardstats">
<table>
<tr>
<td><h3>Board Statistics</h3></td>
</tr>
<tr class="tcat">
<td>Who's Online <span><a href="#">[Complete List]</a></span></td>
</tr>
<tr class="trow1">
<td>1 users active in the past 15 minutes (25 members, 5 of whom are invisible, and 334 guests).
<a href="#">Xenos</a></td>
</tr>
<tr class="tcat">
<td>Board Statistics</td>
</tr>
<tr class="trow2">
<p>Our Members have made a total of 6 posts in 2 threads</p>
<p> We Currently have 2 members registered.</p>
<p>Please welcome our newest member, <a href="#">Ferron</a></p>
<p>The most users online at one time was on 06-05-2013 at 02:39pm</p>
</tr>
<tr class="tfoot">
<a href="#">Log Out</a>
<a href="#">Mark All Forums as Read</a>
<a href="#">Forum Team</a>
<a href="#">Forum Statistics</a>
</tr>
</table>
</div>
<footer>
<div1>Forum</div1>
<div2>Footer Panel</div2>
<div3>copyright</div3>
</footer>
</div>
</body>
</html>css code:
[spoiler]
body{
background:#ededed;
font-size: 13px;
font-family: sans-serif;
text-align: left;
}
.container_12{
background:white;
}
/*=header*/
header{
overflow: hidden;
}
header h1{
float:left;
}
.menu{
float:right;
margin-top: 55px;
}
.menu a{
color:black;
font-weight: bold;
text-decoration: none;
}
.menu li{
display: inline;
}
/* =panel */
.welcome{
font-weight: bold;
}
.panel {
background: #EDEDED;
padding-left: 10px;
border-radius: 5px;
line-height: 17px;
padding: 6px 0;
}
.floatl{
float:left;
}
.floatr{
float: right;
line-height: 16px;
margin-top: -18px;
}
.panel a{
padding-left: 5px;
padding-right: 6px;
color:#006dc7;
text-decoration: none;
}
.selected{
color:#006dc7;
font-weight: bold;
}
/* =nav */
nav {
margin-top: 64px;
padding-left: 14px;
padding-bottom: 3px;
}
/* category */
.thead{
background:#026CB1;
}
.tcat{
background: #ADCBE7;
font-weight: bold;
}
table {
border: 1px solid #ADCBE7;
background: #026CB1;
font-size: 13px;
}
table a{
text-decoration: none;
color:#026CB1;
}
table a:hover{
text-decoration: underline;
color:#026CB1;
}
h4{
padding: 0;
margin: 0;
}
.movup{
margin-top:-10px;
}
.trow1{
line-height: 23px;
background:white;
border:1px solid #ADCBE7;
}
table h3 {
font-size: 17px;
margin-bottom: 2px;
color: #FFF;
font-style: normal;
}
.smalltext {
margin-top: -5px;
}
.padleft {
padding-left: 5px;
}