Jump to content

Trouble With HTML Table Layout

holmedwa04

By holmedwa04
in HTML/XHTML

Recommended Posts

jeffman w3schools Guru

jeffman

Posted
Posted

Framing was a reasonable technology for creating templates back in the 1990s, and I did a lot with frames then. Most of us did not have access to server-side programming, and browser caching was a problem, mostly because desktop computers had so little RAM. On the downside, they create problems of their own, especially with bookmarking.Today, browser caching eliminates most problems with refreshing. As you've seen with your own pages, if the layout is basically the same, and the images especially are the same, then loading them again doesn't even cause a flicker.And server-side languages are ubiquitous today. So, no need for frames.Yes, I am discussing the PHP include() statement. I may have exaggerated the one-line quality, but it is that single statement that drives the boat. The script itself is so generic you can copy and paste it with no changes.Below, find the COMPLETE code for a couple of pages that use this template model. I kept things simple so you can see what's happening.template.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">		<title></title>		<style type="text/css">			div.content {			}			div.content table {				border-collapse: collapse;			}			div.content td {				text-align: center;				padding: .5em;				border: solid 1px #000000;			}			div.content p {				font-size: 2em;				font-family: Verdana, Arial, san-serif;				color: #ff0000			}		</style>	</head>	<body>		<div>			<ul>				<li><a href="template.php">Default</a></li>				<li><a href="template.php?c=test">Test</a></li>				<li><a href="template.php?c=table">Table</a></li>			</ul>		</div>		<div class="content"><?php	$content = 'main.php';	if (!empty($_GET['c'])) {		$content = $_GET['c'] . '.php';	}	include ($content);?>		</div>	</body></html>

main.php

<p>This is default content.</p>

test.php

<p>. . . and this is <i>test</i> content</p>

table.php

<table>	<tr>		<td colspan="3">THIS IS A TABLE</td>	</tr>	<tr>		<td>Cell 1</td>		<td>Cell 2</td>		<td>Cell 3</td>	</tr></table>

THE LESSON is that you can write (and maintain) just a single template that controls as many pages as you like. The content pages require only the content. They don't use the whole document structure. (No doctype, no <html> tags, etc.) So you can edit the content very easily, and the content documents can be small. When you load one of these pages, view the source, and all should be clear (if it isn't already).Links and bookmarks will include a query string, but everyone has seen that before. (You can of course name the pages any way you like; just be mindful of the way the links are constructed.)

Link to comment
Share on other sites
  • Replies 65
  • Created
  • Last Reply
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

Thanks, I think I get this, seems like a simple enough code. But do you know if there is any way of viewing PHP files on my computer before I upload them? Because I don't want to have to keep uploading them to view them? Or can I call main test and table with .html?

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

Ok. I have done this now, I just have to keep uploading the files before I check them. Having a few problems with how I should do a mailto link, because instead of trying to send it to my email address it tries to send to index.php.Have a look and see what you think. It seems like a simple enough idea, I just kept changing small things and then checking it all the way along just to make sure that I didn't mess anything up while I was doing it!www.goathland.co.nr/phptestI have been having trouble with the way that IE displays the page even at resolutions above 1024 768. Ever since I have been using the CSS layout. Maybe there is something that I am doing wrong in the CSS?

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

You got that template thing working pretty well. Good job.The "Contact us" mail link works fine on my end.On IE7, at 1024 x 768, the only CSS oddity I notice is the line height of some headlines, notably on the Lights page. What specifically are you noticing?

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

When I view the site in IE 6 it looks like this:40784197iw0.pngI get a scroll bar and this is even on a monitor with 1280 by whatever the other one is! Plus for some reason I get loads of space in between the top of any table and the text above it.The scrolling appears on every page and the blank space only happens when I have a table in the page such as the index and also the news archive.HTH

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Even if this doesn's solve your problem, make this piece of text a paragraph, right now it's just plain text without a tag:

As previously mentioned this site is...

Make it a paragraph:

<p>As previously mentioned this site is...</p>

There might be more issues like this one, I didn't check your HTML entirely.

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

Thanks, I have changed the width and to even 99%. The blank space disappears with this. And for some reason the scrollbars left and right have disappeared? This might be because I haven't uploaded it though, I have only testing it locally.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Okay. I think we need to switch to standards-compliant mode, which means 2 things. First, use the strict doctype, which I'm pasting below. Just use this instead of the doctype you have now.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">

Second, go 100% CSS. That means eliminating <center> tags and getting width and border definitions out of your other tags. I think that's the only old-fashioned stuff you have left. All that stuff can be done with CSS classes. Hint: give only your td classes a border and set your table to {border-collapse: collapse}. To center text, use text-align. To center divs and other boxes, play with the margins. What's happening is in IE6, your table border makes your table wider than 100%. Strange but true. You could leave it at 99% and get by, it looks like, but you're leaning towards compliance anyway--you might as well finish the job.I hope this works. IE is hard to work with, IE6 is harder than IE7, etc.

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

It hasn't been an easy decision but I have decided it is best to go completely CSS based. And like you say remove things like <center> <br> etc. I have had to change the doctype to HTML 4.01 Transistional instead of strict because it would not validate with target="_blank". And I have added character encoding as well so, so far I haven't uploaded but one of the pages validates completely!

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Most browsers (I can't remember which, but Firefox is within them) aren't going to render your page in Standards Compliant mode if you use a Transitional doctype. You're going to have to use a Strict one.Ask yourself: Is there really any disadvantage for letting the links open in the same window?Unless I'm in something like a chat application or a forum, I prefer links to open in the same window.

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

I have tested it in Chrome, Safari, Opera, IE 6 and Firefox and Firefox is the only browser that doesn't like the HTML 4.01 transistional. It doesn't center the image as it should, surely there is some sort of other code available to use for opening a link in another window? I must have it open in another window as it is a link external to the site. I have all external links open in separate window otherwise when they close the browser they lost your site, if it opens in a separate window they can go back to your site.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Play with this. It uses javascript, but if you don't do javascript, don't worry. The script is written to accomodate any links you put in the document, as long as they go inside an element called "menu". You really shouldn't have to mess with it. (Though if you don't like "menu," change the name in the doc and the script both.) The idea is that for most users, it will open your link in a new window/tab. For those very few users who don't have javascript enabled, it will open the link in the normal window. And while that creates the problem you mentioned, we're talking VERY FEW users.And -- it validates as strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">		<title></title>		<script type="text/javascript">			function init () {				links = document.getElementById("menu").getElementsByTagName("a");				for (var i = 0; links[i]; i++) {					links[i].onclick = function () {						window.open (this.href);						return false;					}				}			}			window.onload = init;		</script>	</head>	<body>		<div>			<ul id="menu">				<li><a href="http://www.yahoo.com">Yahoo</a></li>				<li><a href="http://www.google.com">Google</a></li>			</ul>		</div>	</body></html>

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

How would I put the script in something that I link to a .js file or how would I link to it? Also do I have to use a menu with a bullet? Is it possible to get it to work with a link to that any link with class="blank" maybe? Because most links are internal, it is only a limited number that are external. As for the character set I think I used UTF-8 is the one you are suggesting better?

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Sure you could put the script in an external file. There is NOTHING SPECIAL about my choice to use a list for this example. It's irrelevant to the solution.Try this revised function. It will apply the window-opener to all links of className "blank", no matter where they are located:

			function init () {				links = document.getElementsByTagName("a");				for (var i = 0; links[i]; i++) {					if (links[i].className == "blank") {						links[i].onclick = function () {							window.open (this.href);							return false;						}					}				}			}

The character sets are just different ways of saying the same thing, I think.

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

Sorry to be such a pain, I have included the code above in the head of my document and changed the file name to target.js. And this is my link code, I have used two classes this is okay isnt it?

<a class="bot" class="blank" href="http://hosting.burrawcentral.org">Burraw Central Hosting</a><BR><a title="goathland@hosting.burrawcentral.org" class="bot" href="mailto:goathland@hosting.burrawcentral.org?Subject=Contact Us">

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

I just couldn't for the life of me get it working. And then I suddenly realised that I had some code that opened a new browser window. And you could set things like scrollbars, tool bars, status bars etc. So I had a look back at the code that I used and it works great, plus it validates fine with HTML 4.01 Strict:Code in external JavaScript file, but obviously doesn't have to be linked to really. It just makes it easier for what I am doing:

function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}

And this is the code that I used for the link, I have replaced the values with what you need to include to use the code:

<a href="java script:MM_openBrWindow('www.yourlinkhere.com','Name of Site','width=value,height=value,menubar=yes/no,toolbar=yes/no,status=yes/no,scrollbars=yes/no,resizable=yes/no')">Name of Site</a>

And that is all it is, the width and height values can be set, but if you don't want to set a value the width and height attributes can be omitted. All of the other attributes take the value of yes or no. HTHI am still having problems with IE 6 and scrollbars, but I haven't done the tables yet.

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

I have worked out why I am having trouble with the scrollbars in IE6. I am using freedomain to re-direct my site from its original URL. And when you view the source code in IE6 and you are viewing the site by the re-direct it doesn't display the source code at all. It displays something totally different. So it is because of the re-direct that it is doing it. But when you view the source in any good browser you see the proper source code. I think I am going to have to use a better re-direct because I don't like the scrollbars unless you think there is a work around for this?Any advice, comments, criticism etc. is welcomed.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

It's not even really a redirect, is it? Your real page is getting stuffed inside a frame. Is that what you're talking about? An odd set-up.I've never used a free solution, but there are bound to be better ones out there.

Link to comment
Share on other sites
holmedwa04 Invested Member

holmedwa04

Posted
  • Author
Posted

Yes it is a re-direct, because it works on other browsers, I don't know what it thinks it is doing on IE6 though. As you say it seems to be putting things in frames. I really must see if I can get a better one, but it must be free, because I am not paying for it. I am on the case and think I may have one.

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