MyBB Community Forums

Full Version: fix this code? why it explodes like that?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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][/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>
[/spoiler]


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;
}
[/spoiler]
First of all, <td>s should have class="tcat" etc. not <tr>s to keep it like styled like (almost) all plugins etc.

Secondly, You forgot to wrap some paragraphs in <td>.
 <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>
Should be:
 <tr>
<td 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>
             </td>
            </tr>

EDIT: Same goes for this:
 <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>

(this is based on given code, looks different in template ofc, share it next time)
well my mistakes was that i did not include the td and someone else told me but hey thanks m8te you are the best:d i have no words to say if you need anything just shoot me a pm!