Jump to content

Body Tag


gotpinoy
 Share

Recommended Posts

To be valid, all measurements in CSS need to have unit labels (e.g. px).

<style type="text/css">body {margin: 0px;padding: 0px;border: 0px;}</style>
Link to comment
Share on other sites

To be valid, all measurements in CSS need to have unit labels (e.g. px).
Here is my code for my testing, but when see it in a browser, the table height is not all the way to the bottom screen. It only have the size of whatever value you have inside the cell. I would like to see the table 100% top and bottom, left and right.
<!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>test</title><style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px;}</style></head><body><table width="100%"  border="1"  height="100%"><tr><td colspan="2">test</td></tr><tr><td>test</td><td width="250">test</td><tr><td colspan="2">test</td></tr></table></body></html>

Link to comment
Share on other sites

Oh - you want to adjust the dimensions of the table. Something like this will do

<table style="width:100%; height:100%; "><!-- Your table data --></table>

Remember, though, that tables shouldn't be used for layout. Use divisions instead.

Link to comment
Share on other sites

I use table to set up my header, body for my contents and navigation, and footer. However, Im having issue with the table height with code below

<style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px;}</style>

I set the table with style with the code below

<table style="width:100%; height:100%; "><!-- Your table data --></table>

but it did not give me the height to fit the browser.I use

<!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">

but when I use

<html>

only, it give me the correct height.

Link to comment
Share on other sites

Please use

[code], and not [codebox] tags for adding small scripts, it takes much less space.To solve your problem, change your CSS to this:
<style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px; width:100%; height: 100%;}</style>

Link to comment
Share on other sites

Please use
[code], and not [codebox] tags for adding small scripts, it takes much less space.To solve your problem, change your CSS to this:
<style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px; width:100%; height: 100%;}</style>

Now that works fine, thanks. However, when I set the height for the header and table, it seems that its not taking the height I try to specify, Here is my 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"><head><title>test</title><style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px; width:100%; height: 100%;}</style></head><body><table border="1" cellspacing="0" cellpadding="0" style="width:100%; height:100%;"><tr><td colspan="3" bgcolor="blue" valign="top" align="middle">header</td></tr><tr><td  width="150" bgcolor="red">left column</td><td width="100%">body</td><td width="250" bgcolor="red">right column</td></tr><tr><td colspan="3" bgcolor="yellow" valign="top" align="middle">footer</td></tr></table></body></html>

Also, heres a snapshot of the table im working on. The header is blue and footer is yellow. red are the left and right column and the middle is the body. I want to set the header height to 100 and footer to 50, right and left column to 200 each, and the body should just take whatever space width available. test.gifWhen I set my header TD tag to height is to 100 pixel, it wont take it.

<td colspan="3" bgcolor="blue" valign="top" align="middle" height="100">

What Iam getting is a bigger header like the image below:test2.gif

Link to comment
Share on other sites

Any reason why you would use XHTML unless you are doing XML markups?
It opens up the possiblity for the document to be served as "application/xhtml+xml" to capable browsers (if adjusted on the server), thus enabling better standards compliance in future versions of IE that would support this MIME type. In addition, it enables XML tools to parse this document and extract data from it, or just manipulate it. Other than that, there's no real benefit.
Link to comment
Share on other sites

It opens up the possiblity for the document to be served as "application/xhtml+xml" to capable browsers (if adjusted on the server), thus enabling better standards compliance in future versions of IE that would support this MIME type. In addition, it enables XML tools to parse this document and extract data from it, or just manipulate it. Other than that, there's no real benefit.
Yes I understand that but I wanted to know if he knew that because unless you are planning on doing the above, there is no point in using XHTML.
Link to comment
Share on other sites

Yes I understand that but I wanted to know if he knew that because unless you are planning on doing the above, there is no point in using XHTML.
Well, he may do it for future's sake. You wouldn't want to one day decide to switch to the new MIME type, only to find out you had to use the form <br /> instead of <br>, would you? Then again, if you could change the MIME type that easily, you're likely to also be able to easily rewrite the old form to the new. But that too requires a certain amount of pre-planning. So the safest way to go remains serving XHTML (Strict, not Transitional as he does) as text/html until IE supports application/xhtml+xml.
Link to comment
Share on other sites

Well, he may do it for future's sake. You wouldn't want to one day decide to switch to the new MIME type, only to find out you had to use the form <br /> instead of <br>, would you? Then again, if you could change the MIME type that easily, you're likely to also be able to easily rewrite the old form to the new. But that too requires a certain amount of pre-planning. So the safest way to go remains serving XHTML (Strict, not Transitional as he does) as text/html until IE supports application/xhtml+xml.
Depending what editor you use, some will automatically convert an HTML page over to XHTML without a problem which is why I have no problem using HTML Strict even though most of my coding method is XHTML (with some exceptions such as /> closing slashes, etc.). If I am not mistaken, HTML 5 is suppose the next thing. XHTML still hasn't really caught on they way it is supposed to be used since it's inception back in 2000.Nevertheless, no matter which one you use, validation is important or else you could be pulling your hair out trying to figure where you went wrong with your codes. :)
Link to comment
Share on other sites

Yes, I plan to use xml. Im curious why the table trying to layout wont do the way it suppose to be in XHTML. I know Im missing something or doing something different in my code. I have no problem doing it in HTML. Maybe, I need to explore more what CSS can do for me with my layout.

Link to comment
Share on other sites

Yes, I plan to use xml. Im curious why the table trying to layout wont do the way it suppose to be in XHTML. I know Im missing something or doing something different in my code. I have no problem doing it in HTML. Maybe, I need to explore more what CSS can do for me with my layout.
You will not be able to make the footer stick to the bottom in all browsers but you can achieve the height to fill the screen and have the #header and #footer set at a fixed height. The footer will push down below the #content cell thus hiding the footer in IE until you scroll down.Here's the complet code you can try out:
<!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>test</title><style type="text/css">html, body {margin: 0;padding: 0;border: 0;height: 100%;}#main-table	{border-collapse:collapse;border: 1px solid black; margin: 0;padding: 0;width:100%; height:100%;}#header	{background-color:blue;text-align:center;height:100px;}#left-column {background-color:red;width:150px;}#right-column	{background-color:red;width:250px;}#main-body	{height:100%;}#footer {background-color: yellow;text-align: center;height: 50px;}</style></head><body><table id="main-table"><tr><td id="header" colspan="3">header</td></tr><tr id="footer-padding"><td id="left-column">left column</td><td id="main-body">body</td><td id="right-column">right column</td></tr><tr><td id="footer" colspan="3">footer</td></tr></table></body></html>

If you design your layout using divs, then you can achieve the sticky footer effect that will work in all browsers and keep the specified height for your #header and #footer. Let me know if you would like to know about how to do this.

Link to comment
Share on other sites

Thanks. I been reading more about DIV and been testing it with my new layout and code. I plan to develop with tableless. It's kinda challenging but I want to learn some standards to improve my coding.So here is what I done so far with DIV, Positioning, Float which some are base on sites I read online about CSS and Positioning. Although, I haven't perfected my layout. I like to test, recode, test again to see what Iam doing wrong and how I can correct it. Not only that Im learning but Im also understanding what the stuff is doing.template1.gifand here is my some of the code I done so far. Im not done yet since Im having some problem with positioning on the two columns. I need the blue and red column to reach all the way to the footer or equal heights. Also, when I type "content", you see it went all the way to the right. I wanted it to stop before the blue column.

<!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>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">*{margin:0;padding:0}html, body {height:100%}body {padding:0;margin:0;}#header  {width:100%;background-color:#fc0;position:relative;overflow:hidden;}#container  {width:100%;min-height:100%;height:100%;margin-left:0px;margin-right:-451px;margin-bottom:-55px;}#left  {width:300px;float:right;position:relative;background-color:#0000FF;right:0pxmargin-right:-299px;}#right  {width:150px;float:right;position:relative;background-color:#ff0000;right:0px;margin-right:-0px;}#footer {	width:100%;	clear:both;	height:50px;	border-top:1px solid #000;	border-bottom:1px solid #000;	background-color: #000000;	color: #ffffff;	text-align:center;	position:relative;}</style></head><body><div id="header">head</div><div id="container"><div id="right">right</div><div id="left">left</div>content   content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content  content content content </div><div id="footer">footer</div></body></html>

Link to comment
Share on other sites

Looks like you are going to easily transition from tables over to divs. The only suggestion is to check your work in at least Firefox, IE7 and IE6 which covers about 85% of the market.
Yes, Im testing my work also with Firefox. I downloaded the Firebug to check for bugs with Firefox. I think Im loving DIV than tables now so I have to do more learnings and research.thanks for help.
Link to comment
Share on other sites

All those negative margins and "right: 0px" aren't doing anything, really. You can remove them from your code.If it weren't for Internet Explorer, I'd recommend putting all the content into a third div and giving it "margin-right: 450px".

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...