Quick HTML Question

Associate
Joined
9 Dec 2007
Posts
2,408
I have not made a web page for years, and recently got asked to by my WoW guild so I thought I'd give it a whirl - I used to love doing it.

However, I have encounter a ridiculously simple problem that I just cant seem to be able to fix, any help would be much appreciated.

The page I am working on is this:
www.annodominiguild.co.uk/index.php

The content text is meant to display, using tables, in the bottom box of this website. However, the tables will not stick to the cell sizes that I have set. As soon as the text hits the end of the cell instead of breaking line it just carries on, enlarging the cell.

http://www.annodominiguild.co.uk/wtf.php

How do I make the text stay in the cell sizes I have stated?

Thanks a lot.
 
I know nothing about div's, but used to use tables for this all the time.. Partially why its so dam frustrating.

I jut tried reading up on div's but tbh, it just confused me.

I know it is a really simple solution, I jut cant bloody find what it is.
 
<tr>
<td width="127">&nbsp;</td>

<td width="522">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</td>
<td width="151">&nbsp;</td>
</tr>

Is the offending code. The 'ssssssssssssss' does not line break at the end of the 522 pixels.
 
Nope, neither of them appear to make it work either :(

This is frustrating me so much, I have made hundereds of websites in the past and always been able to over come problems like this.. However, I have completely and utterly forgotten how to.

Has anybody else got any suggestions? Getting desperate now :(
 
Use CSS. Don't just give up and use tables...

(copy this into a html doc)
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	background-color: #ADADAD;
}
#header{
	background-image:url('http://www.yetanotherimagehost.com/image/1143117197/img.jpg');
	background-position: left;
	background-repeat: repeat-y;
	width: 800px;
	padding-top: 380px;
	text-align: center;
	height: 47px;
	margin: 0px auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #333333;
}
#header a {
	color: #333333;
	text-decoration: none;
}
#header a:hover {
	text-decoration: underline;
}
#main{
	background-image:url('http://www.yetanotherimagehost.com/image/1135835151/img.gif');
	background-position: left;
	background-repeat: repeat-y;
	padding: 0px 135px;
	width: 530px;
	margin: 0px auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #333333;
}
#footer{
	background-image:url('http://www.yetanotherimagehost.com/image/1148588556/img.gif');
	background-position: left;
	background-repeat: no-repeat;
	width: 800px;
	height: 27px;
	margin: 0px auto;
}
-->
</style>
</head>

<body>
<div id="header"><a href="#">This</a> is <a href="#">menu</a> text and it is a <a href="#">lovely lovely</a> menu for <a href="#">you</a>.</div>
<div id="main">
This is the main body text, is is very very lovely and i love it very much. It is so lovely that it does the same job as a table, just without all the gayness!
</div>
<div id="footer">&nbsp;</div>
</body>
</html>

TBH that's a bit ugly and there are nicer ways of doing it, it's not validated, I haven't tried it in IE, etc etc... but yeah.

You are my new god. Very, very much appreciated for that - Going to take a look now and try and work out how it works. Out of interest, did you write that by hand or use an editor of some sort? At a glance I see roughly how it works, just confuses me slightly as to how/where the actual layout is specified.. Ill have a further look though :)

Thanks again.
 
Last edited:
Back
Top Bottom