2 Replies - 320 Views - Last Post: 29 June 2012 - 03:31 AM

#1 saSBH2  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 02-March 10

Problem with footer width

Posted 29 June 2012 - 01:47 AM

Hi everyone
I must design a web page, and I have some problems.
this is my hmtl code:

<!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" dir="rtl">
<head>
<link rel="stylesheet" type="text/css" href="global.css"/>
<script language="javascript" src="validation.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> SignIn Form </title>
</head>

<body>
<div id="head">
	<h1>Web Languages</h1>
</div>
<div id="nav">
	<ul id="navlist">
		<li class="leftNav"><a class="navLI"href="LearningHTML.html">HTML</a></li>
		<li class="leftNav"><a class="navLI"href="cssL.html">CSS</a></li>
		<li class="leftNav"><a class="navLI"href="JSL.html">Javascript</a></li>
		<li class="leftNav"><a class="navLI"href="JAL.html">Java Applet</a></li>
		<li class="leftNav"><a class="navLI"href="domL.html">DOM</a></li>
		<li class="rightNav"><a class="navLI"href="default.html">HOME</a></li>
		<li class="rightNav"><a class="navLI"href="signIn.html">SIGN IN</a></li>
		<li class="rightNav"><a class="navLI"href="Game.html">Game</a></li>
	</ul>
</div>
<table>
<tr>
	<td id="td">
	<a href="default.html">first page</a>
	</td>

	<td width=70%>
	<br/>
	<form action="" method="get" name="signInForm" onsubmit="set()">
	<fieldset>
	<legend>sign in</legend>
	<label>username:</label><input type="textbox" name="user"/><br/>
	<label>password:</label><input type="password" name="pass"/><br/>
	<input type="checkbox" name="remember"/><label>remember me</label><br/>
	<input type="Submit" name="enter" value="signIn" />
	<input type="button" name="register" value="register" onclick="gopage();"/>
	</fieldset>
	</form>

	</td>
</tr>
<tr>
	<td colspan=2 class="last">
	<p class="center">&copy;WebTutorial</p>
	</td>
</tr>
</table>
</body>
</html>


And this is global.css.
According to my questions "td.last" and "td#td" are important in this .css file.

td.last{width:100%;font-size:10px;text-align:center;height:20px; border: 1px solid #00008B;
-moz-border-radius: 10px;
 -webkit-border-radius: 10px;background-color:#FFFAFA;}

td#td {border-left:2px solid #8B008B;width:30%;padding-left:150px;font-size:14px;vertical-align:text-top;}

p { padding-right:10px;padding-left:10px;text-align:justify;text-justify:inter-word;}
H4 { padding-right:10px;padding-left:10px;}
.beside { padding-right:5px;}
div#head { border: 4px solid #00008B; padding: 25px; background-color:#FFFAFA; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; width: 95%; height:100px; }
div#register {border-style:none;background-color:#ADD8E6;width:98.5%;height:40px;padding-right:10px;padding-top:10px;}
hr { color:#DDA0DD;}
body{font-family:Tahoma;}
h1{text-align:center;}
ul.red{color:red;}
ul.other{color: #C780D8;}
div.next{ direction:ltr;font-weight:bold;}
div.pre{font-weight:bold;}
div.last{width:100%;font-size:10px;text-align:center;height:20px; border: 1px solid #00008B;
-moz-border-radius: 10px;
 -webkit-border-radius: 10px;background-color:#FFFAFA;vertical-align:text-top;margin:0 auto;padding-bottom:1px;}
p.center{text-align:center;}
p.color{color:#70705c;}
table.table{direction:ltr;width:100%;}
p.indent{text-indent:10px;}
td.right{text-align:right;}
th.one{width:85%;}
h5.green{color:green;}
b.blue{color:blue;}
td#two{width:70%; vertical-align:text-top;}
a{text-decoration:none;}
a:link{color:black;}
a:visited{color:blue;}
a:active{color:red;}
#nameInput{margin-right:60px;}
#passInput{margin-right:35px;}
#rpassInput{margin-right:5px;}
#mailInput{margin-right:13px;}	
#buttonPlace{margin-left:30px; float:left;}
#nav {padding-top:5px;padding-right:2px;padding-left:2px;background-color:#0099ff;width:99%;}
ul#navlist{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li.leftNav{display:inline;float:right; }
li.rightNav {float:left;}
a:link.navLI , a:visited.navLI {display:block;font-weight:boldfont-size:12px;width:100px;color:#ffffff;
background-color:#0099ff;text-align:center;padding:4px;margin-top:2px;margin-bottom:2px;
text-decoration:none;text-transform:uppercase;}
a:hover.navLI {background-color:#003399;}



1. I want the footer to be 100% width. When I open it in my browser its width is not 100%. It is about 50% and equal to the fieldset of the signIn form. How can I fix it?

2. In the right I have 'first page' that is a link. but I don't want it to be:
first
page

It must be:
first page
I tried to change its 'padding-left' value. But there were other problems. Is there any solution?

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Problem with footer width

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: Problem with footer width

Posted 29 June 2012 - 02:06 AM

0. Don’t use tables for Layout!

1. works for me as intended

2. use less padding. if that is not an option, don’t use a table in the first place or make the cell’s width bigger or the font-size smaller.

This post has been edited by Dormilich: 29 June 2012 - 02:11 AM

Was This Post Helpful? 1
  • +
  • -

#3 saSBH2  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 02-March 10

Re: Problem with footer width

Posted 29 June 2012 - 03:31 AM

View PostDormilich, on 29 June 2012 - 02:06 AM, said:

1. works for me as intended


I tested in on various computers and with different browsers. It hasn't worked as I wanted.

View PostDormilich, on 29 June 2012 - 02:06 AM, said:

0. Donít use tables for Layout!


Thanks.
I changed it and use <div> instead of <table>
Everything is correct now.

Thank you again!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1