Jump to content

Formatting Layout With Tables, Included External Css

v8n3t

By v8n3t
in HTML/XHTML

Recommended Posts

v8n3t Newbie

v8n3t

Posted
Posted

Hello everyone,I have a question that deals both with CSS and HTML. The biggest part of this question is related to HTML though.I am trying to position tables to section off pieces of my website. For example, in my CSS I use the following:

@charset "utf-8";/* CSS Document */body {background-color:#D5D5D5}table.one {table-layout:fixed}table.two {table-layout:fixed}table.three {table-layout:fixed}

This is what I am using in my index.html for setting each table. I am trying to position the Top table for a Header/Banner feature. The Left Table will be the navigation pane, and the Center Table will be the BODY or CONTENT display of the website.So now that you know what I am doing, here is the rest of the code which isn’t much.:

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>IOFreaks</title><link href="css1.css" rel="stylesheet" type="text/css" /></head><body><table width="100%" border="0" class="one"><tr><td width="100%">TOP TABLE</td></tr></table><hr /><table width="20%" height="361" border="1" align="left" class="two"><tr><td width="100%" height="100%">LEFT TABLE</td></tr></table><table width="100%" height="100%" border="1" align="center" class="three"><tr><td width="100%" height="100%">CENTER TABLE</td></tr></table></body></html>

Thank you all to help me with this.PS *If there is a way to set each of the tables Width and Height in the CSS document, can you please provide an example? I looked online for a good bit and did not find what I was looking for.* Thank you again.V/RRob

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

seems to me like it would just be easier to replace your tables with div's, and then by way of CSS position them accordingly. after all, that is primarily what CSS was intended to do. if you google "column based layouts with CSS" im sure there are plenty of sample codes you could use to help get you going.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

See how clean this is:

	<head>		<meta http-equiv="content-type" content="text/html;charset=UTF-8">		<title></title>		<style type="text/css">			* {				margin: 0;				padding: 0;			}			div.banner {				background-color: #bbb;				height: 100px;			}			div.left {				width: 20%;				background-color: #faa;				height: 361px;				float: left;			}			div.content {				background-color: #afa;				height: 361px;			}		</style>	</head>	<body>		<div class="banner">Banner</div>		<div class="left">Left</div>		<div class="content">Content</div>	</body>

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

That is referred to as the "universal reset" t reet the margins and padding for all elements on the page.The reason it is required is because the various Browsers use padding and margin differently. Example: IE uses padding and FF uses margin for indenting <li> items in a list ( or vice versa ). So, by using the universal reset, the <li>'s have no addingor margins. The down side is that the page author now needs to specify the paddings oo margins n the <li>'s as required for the page. It makes for easier Cross Browser layouts.*** and it should be margin: 0; padding: 0, otherwise the "1" needs a unit measurement, like px or em ***

Link to comment
Share on other sites
v8n3t Newbie

v8n3t

Posted
  • Author
Posted

Ok, this is what I have whipped up in the past hour.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}div.banner {background-color: #A9A9A9;height: 100px;}div.left {width: 10%;background-color: #000080;height: 700px;float: left;}div.content {background-color: #C0C0C0;height: 700px;}div.footer {background-color: #A9A9A9;height: 40px;}p {color: #ffffff;font: arial 12px}</style></head><body><div class="banner">Banner</div><div class="left"><table width="100%" height="10px" border="0"><tr><td width="10%" height="10%"><a href="index.html"><p>Home</p></a></td></tr></table><hr /><table width="100%" height="10px" border="0"><tr><td width="10%" height="10%"><a href="programming.html"><p>Programming</p></a></td></tr></table><hr /><table width="100%" height="10px" border="0"><tr><td width="10%" height="10%"><a href="c.html"><p>C/C++</p></a></td></tr></table><hr /><table width="100%" height="10px" border="0"><tr><td width="10%" height="10%"><a href="asp.html"><p>ASP</p></a></td></tr></table><hr /><table width="100%" height="10px" border="0"><tr><td width="10%" height="10%"><a href="net.html"><p>.NET</p></a></td></tr></table><hr /><table width="100%" height="10px" border="0"><tr><td width="10%" height="10%"><a href="aboutus.html"><p>About Us</p></a></td></tr></table><hr /><table width="100%" height="10px" border="0"><tr><td width="10%" height="10%"><a href="contactus.html"><p>Contact Us</p></a></td></tr></table><hr /></div><div class="content">Content<table width="100%" height="682px" border="1"><tr><td width="10%" height="10%">Welcome to IOFreaks</a></td></tr></table></div><div class="footer">Footer</div></body>

What do yall think?I also want to include a search button in bottom of the left div, but have no idea how to relay it to a search feature on my website yet. I am more worried about the foundation of the website first. Kind of like programming, everything should be done in a sequential matter or the watterfall model. But I am at a computer with limited access and I have just been doing this in notepad. What recomendations to the source would you recommend? Is there a way I can take the intenral CSS source and put it into an external CSS? What would be the purpose of this?

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted
Is that elements for the page layout?
The * character in CSS is the universal selector. It applies the definition that follows to every element on the page. Per the usual rules of cascading, any definitions that follow will override the universal ones.
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

You can totally put the internal CSS definitions in an external style sheet. You might do this if you wanted one style sheet to apply to multiple documents. Saves space. You might also do this to keep so that the style sheet remains in the browser's memory cache. Subsequent downloads/reloads of the page would not require downloading the style sheet. So only the base document needs to be downloaded. The net effect will be faster rendering, especially if the stylesheet is long.An external style sheet contains style definitions formatted just as you've got them. An external sheets DOES NOT have <style> tags. Instead of <style> tags in your base document's <head> section, you put this in the <head> section:<link href="my.css" type="text/css" rel="stylesheet">

Link to comment
Share on other sites
v8n3t Newbie

v8n3t

Posted
  • Author
Posted

Ok I have another question.If you look at the very last source I provided, where it says "Welcome to IOFreaks!" , the information I will be putting in here I need to be at the very top.How do I get my text to the very top of the screen, and justified to the left?Thank you again for your help.

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...