Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Table top and bottom line - Simple

    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:



    My CSS for that class currently looks like this:

    Code:
    	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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you post your html please?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    PHP
    Code:
    <!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
    Code:
    @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;
    }

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Preferably WITHOUT the php. Do a view source of the generated page and post that here.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Code:
    <!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>

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Here is how I would do it.
    Code:
    <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.
    Code:
    .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;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ah, worked perfectly, thank you.

  • #8
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    A div is NOT a table. Get that through your head.
    Code:
    			<div class="tborder">
    				<h1>Recruitment</h1>
    				<p> Our recruitment status is currently: <span class="open">Open</span> </p>
    			</div>
    Code:
    .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
    Code:
    .tborder ul {
    margin:0;
    padding:0 3px;
    list-style:none;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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:

    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

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    .tborder ul {
    margin:0;
    padding:0 3px 0 18px;
    list-style:circle;
    }
    Again stop calling it a table. Its NOT. Its a div.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •