Jump to content

Table width expandes, despite the set 'width'-value

NoUser2U

By NoUser2U
in CSS

Recommended Posts

NoUser2U Newbie

NoUser2U

Posted
Posted

Hi,for practice i'm trying to create a simple site featuring a login system (MUCH thnx to users: Dreidre's dad, dsonesuk, dilated & shadowmage for helping me out setting up the basic scripts!)Anyway, the layout of the site i have created with css, that is, giving the table some simple attributes like width, height, borders, etc. etc.The site has 3 links:- home- register- loginWhen viewing the home page (which contains no additional info), the site displays as it should be.But when viewing the register page, the site (table) expands, despite the fact i have set table, and cell widths. The registerpage contains a table though.The login page (contains only the text: "LOGINTEST") also displays normal.(btw i used screenshots because i don't know how to set up my laptop in order to have the site online, so sorry for that).HOME pagehomeb.th.jpgLOGIN pageloginc.th.jpgREGISTER pageregisterbq.th.jpgThe HTMLcode is:

<?php$title="";$file="";// check if $_GET['page'] is setif(isset($_GET['page'])){	// if it is set, check if it exists	if(file_exists($_GET['page'] . '.php')){		$title=ucfirst(strtolower($_GET['page']));		$file=$_GET['page'] . '.php';	} else {		$title="ERROR: file does not exist!";	}}?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	<html xmlns="http://www.w3.org/1999/xhtml"><head>	<title><?php echo $title;?></title>	<link rel="stylesheet" type="text/css" href="mainpage.css" /></head><body><table id="maintable">	<tr id="header">		<td colspan="100%">HEADER</td>	</tr>	<tr>		<td id="links"><!--LINKS--> <?php include("C:/wamp/www/project_02_login2/scripts/links.php"); ?></td>		<td id="main"><!--MAIN--> <?php 										if(isset($_GET['page'])){											include('C:/wamp/www/project_02_login2/' . $file);										}										?></td>											</tr>	<tr id="footer">		<td colspan="100%"><!--FOOTER--> <?php include("C:/wamp/www/project_02_login2/scripts/footer.php"); ?></td>	</tr></table></body></html>

This is the code that the register-page (=script) contains:

<?phpif(!$_POST || isset($_POST['revise'])){	// register form	echo "<form method=\"POST\" action=\"\">";	echo "<table border=\"1\">";	echo "<tr>";	echo "<td>First name:</td>";	echo "<td>" . "<input type=\"text\" name=\"name_first\">" . "</td>";	echo "</tr>";	echo "<td>Last name:</td>";	echo "<td>" . "<input type=\"text\" name=\"name_last\">" . "</td>";	echo "</tr>";	echo "<tr>";	echo "<td>Submit?</td>";	echo "<td>" . "<input type=\"submit\" name=\"preview\" value=\"Preview\">" . "</td>";	echo "</tr>";	echo "</form>";	echo "</table>";} elseif(isset($_POST['preview'])){	// Preview	echo "<table border=\"1\">";	echo "<form method=\"POST\" action=\"\">";	echo "<tr>";	echo "<td>Name:</td>";	echo "<td>" . $_POST['name_first'] . "<input type=\"hidden\" name=\"hname_first\" value=\"" . $_POST['name_first'] . "\">" . "</td>";	echo "<td>" . $_POST['name_last'] . "<input type=\"hidden\" name=\"hname_last\" value=\"" . $_POST['name_last'] . "\">" . "</td>";	echo "</tr>";	echo "<tr>";	echo "<td>Correct?</td>";	echo "<td>" . "<input type=\"submit\" name=\"complete\" value=\"Accept\">" . 		"<input type=\"submit\" name=\"revise\" value=\"Edit\">" . "</td>";	echo "</tr>";	echo "</form>";	echo "</table>";} elseif(isset($_POST['complete'])){	// Complete	echo "complete!";	$username_f=$_POST['hname_first'];	$username_l=$_POST['hname_last'];		// WRITE USERINPUT TO FILE	$txtfile="C:/wamp/www/project_02_login2/files/users.txt";	$fh=fopen($txtfile, 'a');	fwrite($fh, $username_l . ";" . $username_f . "\r\n");	fclose($fh);}?>

And Finally, the .css file:

table{margin-left:auto;margin-right:auto;border-collapse:collapse;border:1px solid black;height:800px;width:600px;}tr, td {border:1px solid black}td#links {width:120px; vertical-align:top}td#main {width:480px; vertical-align:top}tr#header {height:150px;}tr#footer {height:30px; text-align:center; font-size:12px}

What confuses me is the following: I have the main table of the page set to a width of width=600px.There are also 2 cells in the second row of the table, the cell contain the links (td#links) and the cell which contains the 'main info' (td#main). Since the total width of the table is 600px, i gave the links-cell a width of 120px, and the main-td a width of 480px. The sum is 600px, so i don't understand why the main table still expands in width after visiting the register page??Also, i have the following problem:I use wamp. When i edit the css file and save it, and then view the site in the browser, i see NO effect. Let's say i change the width of the maintable to 900px instead of 600px, then when i view the site in the browser, i don't see an increase in tablewidth. When i look at the source code, i see the unedited version of the css file. It looks like the file does not get saved, despite me saving it.Other things do get saved and updated (for example, changing text in the table or editing the .php scripts).Anybody know why this is?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

From what i can make out from your css, ALL tables will be 600px wide, included the nested tables, so the td will have to accomodate this set size.you have given your parent table an id <table id="maintable"> use it to target that table only.table{margin-left:auto;margin-right:auto;border-collapse:collapse;border:1px solid black;}table#maintable{height:800px;width:600px;}

Link to comment
Share on other sites
NoUser2U Newbie

NoUser2U

Posted
  • Author
Posted

Thnxx!!!That seemed to do the trick. I tried it before though but somehow my .css did not update while previewing in the browsers. I don't know why but i just did what you said and it worked!I have another small question, and that is the following:The 'Home'-page currently contains no additional info inside the 'main' tablecel (the main table cell is the cell (td) with id="main". See above html-code).I noticed that when i change from Home page to any of the other 2, then the line between the 2 cells shifts by a very small margin, by a pixel or so. I think this is because the 'Home'-page does not contain any data/text or whatever in the 'main'-cell, while the 2 other pages do.I tried this and the problem got solved, but i don't know why that is:Now when i, for example, change the code so that when clicking the 'Home'-link, you see the text "HOMETEST" (or any other text/value), the line that splits the 2 cells is at exactly the same place when changing pages. That is...the line shifts no more by a pixel. I don't know whý this is though.Is this something normal with cells containing NO data/text, and if not, how do i correct for this? (if this is normal due to the nature of html/css, then i'll leave it as it is).*when referring to 'the 2 cells', i mean the cells with ID="links" and ID="main"

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

you are going to have to provide content for home page (should be your index.php) anyway, which shows when first loaded by typing http://mydomain.com/, or when the user wants to return to the home page by linking to http://mydomain.com/index.php or just index.php, which we can do by using else condition on the if(isset(....)) condition, if the querystring is not set, it will show index.php content instead

<td id="main"><!--MAIN--><?php   if(isset($_GET['page']))	  {	  include('C:/wamp/www/project_02_login2/' . $file);	  }else	 {?><h1>This will show as my index.php home page content when no querystring for page is used<h1>  <p>In reprehenderit in voluptate excepteur sint occaecat duis aute irure dolor. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, ullamco laboris nisi mollit anim id est laborum. Duis aute irure dolor ut labore et dolore magna aliqua.</p>  <p>Lorem ipsum dolor sit amet, sunt in culpa cupidatat non proident. Excepteur sint occaecat mollit anim id est laborum. Eu fugiat nulla pariatur.</p>  <p>Ullamco laboris nisi. Velit esse cillum dolore excepteur sint occaecat duis aute irure dolor. Cupidatat non proident, lorem ipsum dolor sit amet, quis nostrud exercitation. Ut enim ad minim veniam, mollit anim id est laborum. Ut aliquip ex ea commodo consequat.</p>  <hr />  <p>Qui officia deserunt lorem ipsum dolor sit amet, sunt in culpa. Excepteur sint occaecat cupidatat non proident, velit esse cillum dolore. Eu fugiat nulla pariatur. Ut enim ad minim veniam.</p>  <p>In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Consectetur adipisicing elit, ullamco laboris nisi excepteur sint occaecat. Quis nostrud exercitation ut labore et dolore magna aliqua. Mollit anim id est laborum. Sunt in culpa in reprehenderit in voluptate ut enim ad minim veniam.</p>  <p>Consectetur adipisicing elit, eu fugiat nulla pariatur. Mollit anim id est laborum. Sunt in culpa quis nostrud exercitation. Eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, velit esse cillum dolore consectetur adipisicing elit.</p><?php	  }?></td>

Link to comment
Share on other sites
NoUser2U Newbie

NoUser2U

Posted
  • Author
Posted
you are going to have to provide content for home page (should be your index.php) anyway, which shows when first loaded by typing http://mydomain.com/, or when the user wants to return to the home page by linking to http://mydomain.com/index.php or just index.php, which we can do by using else condition on the if(isset(....)) condition, if the querystring is not set, it will show index.php content instead
So i guess i have to leave it as it is since indeed when adding content to the 'Home'-page (which is indeed the index.php file), the alignment of the lines is correct?Thnx for the post, i won't bother with the line anymore and leave it as it is (after all, when adding content, the lines do align perfectly on each page) :).
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

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