...

View Full Version : Table top and bottom line - Simple



spadez
07-28-2007, 05:56 AM
Hey guys,

Ive got a table with a black border. It has a top tread bar and a bottom content section and they both have the same background colour with a different text style. What im trying to do with the thead bar is have a bottom 1px horizontal line, and have a 1px horizontal line at the top. To show you what i mean, this should explain it better:

http://img118.imageshack.us/img118/5606/codinghtmlbq6.jpg

My CSS for that class currently looks like this:


background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;

How can i get the two horizontal lines on there? Any help would be much appreciated.

James

_Aerospace_Eng_
07-28-2007, 06:01 AM
Can you post your html please?

spadez
07-28-2007, 06:03 AM
PHP


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hive MOTD</title>
<link href="./css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="shell">
<div id="header">
<img src="http://www.hiven.net/server/header.jpg">
</div>
<div id="main">
<div id="side">
<table cellspacing="0" cellpadding="3" border="0" class="tborder" width="100%">
<tr>
<td class="thead">Recruitment</td>
</tr>
<tr>
<td>
Our recruitment status<br />
is currently: <b><FONT COLOR="#80ff80">Open</font></b><br />


</td>
</tr>
</table>

<table cellspacing="0" cellpadding="3" border="0" class="tborder" width="100%">
<tr>
<td class="thead">Server</td>
</tr>
<tr>
<td>
Hi-Def Custom<br />
100TICK 333FPS<br />
Internap Connection<br />
Chicago<br />
</td>
</tr>
</table>


<table cellspacing="0" cellpadding="3" border="0" class="tborder" width="100%">
<tr>
<td class="thead">Threads</td>
</tr>
<tr>
<td>
<?php
$db_host = "x"; // Change this if your MySQL database host is different.
$db_name = "x"; // Change this to the name of your database.
$db_user = "x"; // Change this to your database username.
$db_pw = "x"; // Change this to your database password.
$db_prefix = ""; //Change this to the prefix of the forum database.

$forum_url = "x"; // Change this to reflect to your forum's URL.
$limit = "7"; // Number of posts displayed.
$txtlimit = "18"; // This is the character limit.

// Connecting to your database
mysql_connect($db_host, $db_user, $db_pw)
OR die ("Cannot connect to your database");
mysql_select_db($db_name) OR die("Cannot connect to your database");

if ($limit) {
$limited = "LIMIT $limit";
}

$thread_sql = mysql_query("select threadid,title,lastpost,firstpostid from $db_prefix thread where visible=1 $wheresql and open=1 $forumid order by lastpost desc $limited");

while($thread_get = mysql_fetch_array($thread_sql))
{
$lastpost = $thread_get['lastpost'];
$tid = $thread_get['threadid'];
$psql = mysql_query("SELECT postid from $db_prefix post where threadid=$tid order by postid desc");
$getp = mysql_fetch_array($psql);
$pid = $getp['postid'];
$title = $thread_get['title'];
$title = substr($title,0,$txtlimit);

echo "<li class=\"item\"><a href=\"$forum_url/showthread.php?p=$pid#post$pid\"><span>$title</span></a></li>";
}
?>
</td>
</tr>
</table>
</div>
<div id="content">
<p>
Work In Progress
</p>

</div>
<div id="clear"></div>
</div>
</div>
</body>
</html>


CSS


@charset "utf-8";

/* Style Sheet */

body {
padding: 0;
margin: 15px 0 15px 0;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #1f1f1f;
color: #EDEDED;
}


#shell {
margin: 0 auto;
width: 100%;
background: #FFFF00;
}

#header {
width: 90%;
margin: 0 auto;
height: 30px;
background: #252525;
border: 1px solid #000000;
}

#main {
width: 90%;
margin: 0 auto;
padding-top: 5px;
border: 1px solid #000000;
border-top: 0;
background: #2D2D2D;
}

#side {
width: 150px;
padding-right: 5px;
float: right;
}

#content {
margin: 0 160px 5px 5px;
padding: 5px;
border: 1px solid #000000;
}

.tborder {
border: 1px solid #000000;
background: #1f1f1f;
margin-bottom: 10px;
}

.thead {
background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
}


#clear {
clear: both;
}

_Aerospace_Eng_
07-28-2007, 06:10 AM
Preferably WITHOUT the php. Do a view source of the generated page and post that here.

spadez
07-28-2007, 06:11 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hive MOTD</title>
<link href="./css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="shell">
<div id="header">
<img src="http://www.hiven.net/server/header.jpg">
</div>
<div id="main">
<div id="side">
<table cellspacing="0" cellpadding="3" border="0" class="tborder" width="100%">
<tr>
<td class="thead">Recruitment</td>
</tr>
<tr>
<td>
Our recruitment status<br />
is currently: <b><FONT COLOR="#80ff80">Open</font></b><br />


</td>
</tr>
</table>

<table cellspacing="0" cellpadding="3" border="0" class="tborder" width="100%">
<tr>
<td class="thead">Server</td>
</tr>
<tr>
<td>
Hi-Def Custom<br />
100TICK 333FPS<br />
Internap Connection<br />
Chicago<br />
</td>
</tr>
</table>


<table cellspacing="0" cellpadding="3" border="0" class="tborder" width="100%">
<tr>
<td class="thead">Threads</td>
</tr>
<tr>
<td>
<li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19201#post19201"><span>New Serverz</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19200#post19200"><span>New Fork!!</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19199#post19199"><span>omg T_T</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19198#post19198"><span>Afroclown's applyi</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19197#post19197"><span>The Hive Empire - </span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19188#post19188"><span>Steam, internet or</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19178#post19178"><span>&quot;kaniho LUL&q</span></a></li> </td>
</tr>
</table>
</div>
<div id="content">
<p>
Work In Progress
</p>

</div>
<div id="clear"></div>
</div>
</div>
</body>
</html>

_Aerospace_Eng_
07-28-2007, 06:21 AM
Here is how I would do it.

<div class="tborder">
<h1>Recruitment</h1>
Our recruitment status<br />
is currently: <span class="open">Open</span> </div>
Remember tables aren't for page layout. You should also look up the term "semantics in html".

As for the CSS this is what I did.

.tborder {
border: 1px solid #000000;
background: #1f1f1f;
margin-bottom: 10px;
padding-bottom:15px;
}

.tborder h1 {
background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
margin:0 0 5px 0;
padding:0;
border-top:1px solid #828282;
border-bottom:1px solid #828282;
}
.open {
font-weight:bold;
color:#80ff80;
}

spadez
07-28-2007, 06:26 AM
Ah, worked perfectly, thank you.

spadez
07-28-2007, 06:30 AM
Actually, is there any way to keep the padding inside the table with your method?

http://www.hiven.net/server/motd3.php

As you can see the recruitment box on the right has you code and the others have mine, and the top one is missing the inside padding.

_Aerospace_Eng_
07-28-2007, 06:37 AM
A div is NOT a table. Get that through your head.

<div class="tborder">
<h1>Recruitment</h1>
<p> Our recruitment status is currently: <span class="open">Open</span> </p>
</div>

.tborder h1 {
background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
margin:0 0 5px 0;
padding:0 3px;
border-top:1px solid #828282;
border-bottom:1px solid #828282;
}
.tborder p {
margin:0;
padding:0 3px;
}
On the one with the list, don't put the list inside of a paragraph. Just apply the padding directly to the list

.tborder ul {
margin:0;
padding:0 3px;
list-style:none;
}

spadez
07-28-2007, 07:07 AM
I surrounded my list in <ul> tags and this gave it the spacing, but i no longer have the bullet point next to each thread. I tried using this code:



.tborder ul {
margin:0;
padding:0 3px;
list-style-type: circle;
}


But although i still have the padding, it doesnt add the bulletin points. Also would you mind telling me how to get a 2px padding on the bottom of the 'table'. Thank you for the help, its much appreciated.

James

_Aerospace_Eng_
07-28-2007, 07:27 AM
Just change the bottom padding on .tborder. I suggest you do more HTML/CSS tutorials as these are very simple questions that can be answered by yourself if you just tried to learn it on your own.

.tborder ul {
margin:0;
padding:0 3px 0 18px;
list-style:circle;
}
Again stop calling it a table. Its NOT. Its a div.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum