Quick HTML Question

MotherMayI

MotherMayI

MotherMayI

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.
 
In my CSS file I have
Code: 
table {
width: 800px;
color: white;
}
and
Code: 
td, th {
border: 1px solid white;
padding: 0.1em 1em;
text-align: center;
}

Where you have
Code: 
body,td,th {
	color: #333333;
}
body {
	background-color: #adadad;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
add something like the table code.
 
MotherMayI said:
<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.
Click to expand...

Does this help?
Code: 
<td width="522" style="word-wrap: break-word ">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</td>
 
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.
 
Last edited:
furnace said:
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.
Click to expand...

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:
Dreamweaver did this bit for me:

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>
</head>
<body>
</body>
</html>

The only reason that I let it do that for me is because it's what's already there when you go "File->New->HTML->Blank". The rest is done by hand. *Always* write your code by hand - editors are unreliable and very bad at generating decent code.

In the code I showed you, you have the <div>'s. Each div has an ID. In the CSS (at the header of the document) I've given a bunch of attributes to each ID. These attributes say things like where the postion of the DIV is, if it has a set height, the colour of the text in it, what happens with links... etc.

In a nutshell, an ID is for something that only appears ONCE in the HTML document. Like the header. A class is for something that might appear multiple times in an HTML page - like a certain set of attributes for a <div> that you want to put images in.

To give attributes to a class (e.g. <div class="className">) in CSS you say
Code: 
.className {
     /* attributes */
}

To an id (e.g. <div id="idName">)
Code: 
#idName {
     /* attributes */
}

You can also use CSS to add attributes to a HTML tag (e.g. <body>)
Code: 
body {
     /* attributes */
}

You can also put all of the CSS in a different file. As a matter of fact, definitely do this...

Grab the CSS code (the stuff in between <!-- and -->) and put it in "main.css" (use notepad or something).

Then use this to link the CSS to the page:
Code: 
<link rel="stylesheet" type="text/css" href="main.css" />
That goes in the <head></head> where your CSS currently is.

Then if you want to change something across the whole site, if all pages link to that CSS file, you only need to change that once CSS file to change all of the pages.

Behold the beauty of CSS :p

Also, ALWAYS run your code through the CSS Validator and HTML Validator. I haven't done this with the code I wrote for you, so you might want to check it :o
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom