Jump to content

Formatting a table

music_fan01

By music_fan01
in CSS Help

 Share

Recommended Posts

music_fan01 Member

music_fan01

Posted
Posted

    http://starr05.comule.com/guestbook.php

 

 

I am trying to get my tables that I have before and after some signs my guestbook centered and below where I have my "Guestbook" header. Right now, its centerd, but its up where my links are. I've tried making a div for my table 

#table{margin-top:2cm;}

but that didnt work so I went ahead and took it out. Not too sure what else I can try.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>


    <!-- header -->
    <div id="header">
        <div id="logo"><a href="index.html">Header</a></div>
        <ul id="menu">
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Contact</a></li>
        <li><a href="guestbook.php">Guestbook</a></li>
                  </ul>
<div id="icon"><a href="twitter.com/">
<img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
</a></div>

   
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
<div id="text">
                <h1><strong>Guestbook</strong></h1>


<table width="400" border="0" align="left" cellpadding="3" cellspacing="0">
<tr>
<td align="center"><strong>Guestbook</strong>
<p>Please leave your comments.</p>
<p>* Required field</p></td>

</tr>
</table>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<form id="form1" name="form1" method="post" action="addguestbook.php">
<td>
<table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr>
<td width="117">* Name</td>
<td width="14">:</td>
<td width="357"><input name="name" type="text" id="name" size="40" /></td>
</tr>
<tr>
<td valign="top">* Comment</td>
<td valign="top">:</td>
<td><textarea name="comment" cols="40" rows="3" id="comment"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" /> <input type="reset" name="Submit2" value="Reset" /></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="400" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td align="center"><strong><a href="viewguestbook.php">View Guestbook</a> </strong></td>
</tr>
</table>
</div>

</div>


           
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>

    </div>
    </div>
    <!-- end footer -->
</div>
    <!-- end main -->



</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>


    <!-- header -->
    <div id="header">
        <div id="logo"><a href="index.html">Header</a></div>
        <ul id="menu">
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="contact.php">Contact</a></li>
        <li><a href="guestbook.php">Guestbook</a></li>
            
                  </ul>
<div><a href="twitter.com/">
<img border="0" src="http://www.000webhost.com/forum/images/twitter.png" alt="twitter" width="58px;" height="53px;" />
</a></div>

  
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
<div id="text">
                <h1><strong>Guestbook</strong></h1>


<table width="400" border="0" align="center" cellpadding="-" cellspacing="0"  >
<tr>
<td><strong>View Guestbook | <a href="guestbook.php">Sign Guestbook</a> </strong></td>
</tr>
</table>
<br>

<?php
$mysql_host = "mywebhost";
$mysql_database = "a7560006_guest";
$mysql_user = "a7560006_hoku";
$mysql_password = mypassword";
$tbl_name="guestbook"; // Table name

// Connect to server and select database.
mysql_connect("$mysql_host", "$mysql_user", "$mysql_password") or die("cannot connect server ");
mysql_select_db("$mysql_database") or die("cannot select DB");

$sql="SELECT * from $tbl_name";
$result=mysql_query($sql);

while($rows=mysql_fetch_array($result)){
?>

<table width="400" border="0" align="center" cellpadding="0" cellspacing="1" >
<tr>
<td><table width="400" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>Comment Number</td>
<td>:</td>
<td><? echo $rows['comment_id']; ?></td>
</tr>
<tr>
<td width="117">Name</td>
<td width="14">:</td>
<td width="357"><? echo $rows['name']; ?></td>
</tr>
<tr>
<td valign="top">Comment</td>
<td valign="top">:</td>
<td><? echo nl2br($rows['comment']); ?></td>
</tr>
<tr>
<td valign="top">Date/Time </td>
<td valign="top">:</td>
<td><? echo $rows['datetime']; ?></td>
</tr>
</table></td>
</tr>
</table>
<BR>

<?php
}
mysql_close(); //close database
?>



</div>

</div>
           
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>

    </div>
    </div>
    <!-- end footer -->
</div>
    <!-- end main -->

</body>
</html>

Link to comment
Share on other sites
music_fan01 Member

music_fan01

Posted
  • Author
Posted

Oops! Heres my css. Sorry about that.

 

/* body */

body {
margin:114px 0 0 0; 
line-height:15px; 
font-family: Tahoma, Arial; 
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
color:#bed7e6; 
font-size:11px;
}

a { 
color:#018BC1;
}
a:hover { 
text-decoration:none;
}
#header {}
#logo { 
padding:30px 0 120px 0;
color:#fff; 
text-align:center;
}


/* logo */
#logo a{ 
color:#fff; 
text-decoration:none; 
font-weight:bold; 
font-size:24px; 
text-transform:uppercase; 
}

/* Menu */
#menu {
color:#fff; 
text-align:center; 

}
#menu ul {
text-align:center;
list-style:none; 
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a { 
font-weight:bold; 
font-size:14px; 
text-decoration:none; 
color:#fff; 
background-color:#445d6c; 
padding:0 10px 2px 10px;
}
#menu ul a:hover 
{ 
background-color:#f26513;
}

/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;

}
#content {
width: 780px; 
margin:0 auto;
overflow:hidden;
margin-bottom:3cm;



}

/ * Text */
#text {
    float: left;
width: 760px;
margin-top:1cm;
}
#text p {
margin:7px 0 7px 0;
}

#text li {
background:url(images/li.gif) no-repeat 0px 7px;
}

h1 {
margin:30px 0 0 0; 
padding:5px 0 7px 45px; 
text-transform:uppercase; 
font-size:25px; color:#fff; 
background:url(images/h1_bckg.jpg) no-repeat;
float:left;
}

/* Footer */

#footer {
background:url(images/footer_bckg.jpg) no-repeat top center; 
height:102px; clear:both; 
width:780px; 
margin:0 auto; 
}
#left_footer {
float:left;
padding:60px 0 0 30px; 
color:#fff; font-size:12px;
}
#left_footer a { 
color:#fff;
}
#left_footer a:hover { 
text-decoration:none;
}
#right_footer { 
float:right;  
padding:60px 30px 0 0; 
color:#fff;  
font-size:12px; text-align:right;
}
#right_footer a { 
color:#fff;
}
#right_footer a:hover { 
text-decoration:none;
}

#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px

}


/* Floats */

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

/* gallery */
.row img {
    margin: 2px;
    border: 1px solid #0000ff;
    clear: both;
    width: 100px;
    height: 90px;
    margin-left:3px;
}

.first
{
    float: right;
    text-align: center;
} 
     
.last {
    border: 1px solid #ffffff;
    float: right;
}

.desc
{
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 10px;
}


/* image */
#image {

margin-top:1cm;
width: 400px;
margin-top:2cm;
}

/* paragraphs */
#p {
    float: left;  
    margin-right: 4px;
padding-left: 20px;
    font-size:12pt;
}

/* Divider */
#div {
float: right; 
width: 20px; 
margin-right: 1px;
height: 200px;
}

/* Icon */
#icon {
text-align:center;
}

Link to comment
Share on other sites
sunfighter Newbie

sunfighter

Posted
Posted

When I started to work on this I was running into something weird. I traced it to this line in your css file: / * Text */.  There is a space between the first / and the *.

Little thing but it does bring things to a halt.

 

Although you set your tables to 400px the largest one is 420, so I changed all that. Also renamed #text to #inside and changed the sub p and li accordingly.

 

You used two tables to do your form. Not needed so eliminated one. - also took the <h1> out of #inside.

 

In your css file you use padding to center things and set relationships so I just followed suite for centering. You may want to change the vertical spacing.

 

Your CSS:

/* body */
body {
margin:114px 0 0 0;
line-height:15px;
font-family: Tahoma, Arial;
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20;
color:#bed7e6;
font-size:11px;
}

a {
color:#018BC1;
}
a:hover {
text-decoration:none;
}
#header {}
#logo {
padding:30px 0 120px 0;
color:#fff;
text-align:center;
}

/* logo */
#logo a{
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:24px;
text-transform:uppercase;
}

/* Menu */
#menu {
color:#fff;
text-align:center;
}
#menu ul {
text-align:center;
list-style:none;
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a {
font-weight:bold;
font-size:14px;
text-decoration:none;
color:#fff;
background-color:#445d6c;
padding:0 10px 2px 10px;
}
#menu ul a:hover
{
background-color:#f26513;
}

/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width: 440px;
margin:0 auto;
overflow:hidden;
}

/* Text */
#inside {
width: 420px;
margin:0 auto;
}
#inside p {
margin:7px 0 7px 0;
}

#inside li {
background:url(images/li.gif) no-repeat 0px 7px;
}

h1 {
padding:5px 0 7px 150px;
text-transform:uppercase;
font-size:25px;
color:#fff;
background:url(images/h1_bckg.jpg) no-repeat;
}

/* Footer */
#footer {
background:url(images/footer_bckg.jpg) no-repeat top center;
height:102px; clear:both;
width:780px;
margin:0 auto;
}
#left_footer {
float:left;
padding:60px 0 0 30px;
color:#fff; font-size:12px;
}
#left_footer a {
color:#fff;
}
#left_footer a:hover {
text-decoration:none;
}
#right_footer {
float:right;
padding:60px 30px 0 0;
color:#fff;
font-size:12px; text-align:right;
}
#right_footer a {
color:#fff;
}
#right_footer a:hover {
text-decoration:none;
}

#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px
}

/* Floats */

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

/* gallery */
.row img {
    margin: 2px;
    border: 1px solid #0000ff;
    clear: both;
    width: 100px;
    height: 90px;
    margin-left:3px;
}

.first
{
    float: right;
    text-align: center;
}

.last {
    border: 1px solid #ffffff;
    float: right;
}

.desc
{
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 10px;
}

/* image */
#image {

margin-top:1cm;
width: 400px;
margin-top:2cm;
}

/* paragraphs */
#p {
    float: left;
    margin-right: 4px;
padding-left: 20px;
    font-size:12pt;
}

/* Divider */
#div {
float: right;
width: 20px;
margin-right: 1px;
height: 200px;
}

/* Icon */
#icon {
text-align:center;
}

 

And your HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license,
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- header -->
<div id="header">
<div id="logo"><a href="index.html">Header</a></div>
    <ul id="menu">
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Contact</a></li>
    	<li><a href="guestbook.php">Guestbook</a></li>
    </ul>
<div id="icon">
	<a href="twitter.com/">
	<img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
	</a>
</div>
</div>
<!--end header -->

<!-- main -->
<div id="main">
<div id="content">
		<h1><strong>Guestbook</strong></h1>
	<div id="inside">
<table width="420" border="1" cellpadding="3" cellspacing="0">
		<tr>
		<td><strong>Guestbook</strong>
		<p>Please leave your comments.</p>
		<p>* Required field</p></td>

		</tr>
		</table>

		<table width="420" border="1" cellpadding="3" cellspacing="1" style="background-color: #000000;">
		<form id="form1" name="form1" method="post" action="test.php">  <!--addguestbook-->
		<tr>
		<td style="width: 117px;">* Name</td>
		<td style="width: 14px;">:</td>
		<td style="width: 357px;"><input name="name" type="text" id="name" size="40" /></td>
		</tr>
		<tr>
		<td valign="top">* Comment</td>
		<td valign="top">:</td>
		<td><textarea name="comment" cols="40" rows="3" id="comment"></textarea></td>
		</tr>
		<tr>
		<td> </td>
		<td> </td>
		<td><input type="submit" name="Submit" value="Submit" /> <input type="reset" name="Submit2" value="Reset" /></td>
		</tr>
		</form>
		</table>

		<table width="420" border="1" cellpadding="3" cellspacing="0">
		<tr>
		<td align="center"><strong><a href="viewguestbook.php">View Guestbook</a> </strong></td>
		</tr>
		</table>
	</div>
</div>



<!-- footer -->
<div id="footer">
<div id="left_footer">© Copyright 2011<strong> Author </strong></div>
	<div id="right_footer">
		<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
		Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>
	</div>
</div>
<!-- end footer -->
</div>
<!-- end main -->
</body>
</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.