HTML Forum

**anwipr** · 02-07-2007, 01:22 PM

What I'm describing is at www.anwipr.com/templates/a/ .

You can see how the top header does not extend all the way to the right. What can I do to fix this? Here are the HTML and CSS files:

HTML:

HTML Code:

<HTML>
<HEAD>
</HEAD>
<TITLE>
template
</TITLE>
<HEAD>
<link rel="stylesheet" type="text/css"
href="css.css" />
</HEAD>
<BODY>
<center>
<table width="700" cellspacing="0">
<tr>
<td class="header" height="100" width="700" colspan="2" valign="top">
Big Title<br>
<font size="4" color="#FFFFFF"><i>
Your Company Slogan Goes Here
</i></font>
</td>
</tr>
<tr>
<td width="550" class="content" height="500" bgcolor="#FFFFFF" valign="top">

Here is some of the main content. Here is some of the main .........

</td>
<td>
<td width="150" class="nav" bgcolor="#359ACC" valign="top">
<p>
<li><a href="">Home</a>
<li><a href="">About</a>
<li><a href="">Company</a>
<li><a href="">Purchase</a>
<li><a href="">More</a>
<li><a href="">Contact</a>

</td>
</tr>
<tr>
<td class="copyright" colspan="2">
Copyright &copy; 2007 www.anwipr.com
</table>
</center>










</BODY>
</HTML>

Here is the CSS that has anything to do with the header:

HTML Code:

td.header {
	background-image: url(img/header.gif);
	background-repeat: repeat-x; 
	background-color: #A3D1E8; 
	font-family: Tahoma;
	color: #359ACC; 
	font-size: 30px; 
	padding: 10px 20px; 
	width: 700px; }

Thanks in advance!

**Learning Newbie** · 02-07-2007, 03:34 PM

I think the problem is that you've set height and width in your CSS and HTML, and it isn't sure which to take this information from.

**gooor** · 02-07-2007, 04:09 PM

I think it could be a problem here:
<td>
<td width="150" class="nav" bgcolor="#359ACC" valign="top">
<td> tag opens two times...
Btw, I recommend to set every dimensions, colors etc. with CSS.

**anwipr** · 02-07-2007, 05:32 PM

Thanks gooor! The second <td> tag was causing the problem- I must have overlooked that mistake.

Yeah, LearningNewbie, I plan to clean up the code a little bit, too. It's not completely finished.

Thanks for your help! *adds Talkupation*

**Learning Newbie** · 02-07-2007, 05:42 PM

Well it looks like I was wrong.

I hate tables, personally. All the repeated td and tr tags, open and close, and ones that are supposed to be next to each other, it's hard to spot problems. And when you do, it's even harder to figure out what's causing them and what to do about it.

Glad you found a solution.

Maybe some kind of graphical html editor, you know, the kind "for dummies" that you can switch back and forth, would help? Usually if there's an error like this, they'll tell you they can't draw what your page should look like because of an error at such and such a place in the file.

**LadynRed** · 02-08-2007, 10:39 AM

I don't see the point of using CSS when you're still using old deprecated HTML and nested tables.

**gooor** · 02-08-2007, 01:55 PM

Using tables isn't bad; sometimes it's the only way to make some things, and using CSS makes it easier. Remove center tag and place text-align: center; in body selector for IE and margin: 0 auto; in table selector, and you'll center whole table etc. I hope you'll understand what I mean

**Learning Newbie** · 02-08-2007, 02:23 PM

Quote:

Originally Posted by LadynRed

I don't see the point of using CSS when you're still using old deprecated HTML and nested tables.

I thought the point of CSS was to shorten your files and your maintenance, not to avoid certain tags and structures?

**RanaD** · 02-08-2007, 02:25 PM

Quote:

...sometimes it's the only way to make some things...

Such as? I'm busy recoding my whole site, and there is nothing I couldn't do in CSS that I did in tables before. It may take a little bit of searching and learning, but it's not impossible.

Prove me wrong

**RanaD** · 02-08-2007, 02:39 PM

You posted while I was looking away, so allow me a double-post

Quote:

I thought the point of CSS was to shorten your files and your maintenance, not to avoid certain tags and structures?

The point of CSS is to separate content from presentation. HTML is the content, CSS gives the presentation.

In fact, you are not avoiding certain tags or structures, you are using HTML and CSS as it is intended.

Quote:

I don't see the point of using CSS when you're still using old deprecated HTML and nested tables.

I believe the Lady is referring to webstandards. Why separate your content from your presentation if you don't give a **** about standards? HTML has evolved, and some tags have become obsolete (or deprecated). Tables for layout has never been a good practice (though it was an easy one), but tables are intended for tabular data, comparing x to y as such, and all other layout can be (and should be) done in CSS.

**gooor** · 02-08-2007, 03:02 PM

RanaD: Of course CSS gives you substitute for old tables, I agree. But imagine this forum coded using CSS and DIV's only without any table,td etc. tags. It's can be done but will this be the best solution. How would the code and stylsheet file look? Tons of div's and every "table div" need to have "display: table..." along with other style ( hope you know what I mean

). So the only way to make This forum "good" ( for now ). Such as? - answered

**McBone** · 02-08-2007, 03:32 PM

some data does need tables, its near unavoidable, as for web standards if you use div's instead if table you wont have a problem

**RanaD** · 02-08-2007, 03:41 PM

gooor: I'll e-mail you a copy once I'm finished with it

The contention is not whether it is the most suitable way; the contention lies in that you said it's the only way to make some things. This forum can in fact be done in CSS with no tables, as I have demonstrated to myself by recoding a PHPBB template file. Size with tables: 5.19kb. Size without tables: 5.19kb. No difference in the CSS either.

Such as? remains open

**Learning Newbie** · 02-08-2007, 04:02 PM

Quote:

Originally Posted by RanaD

The point of CSS is to separate content from presentation. HTML is the content, CSS gives the presentation.

But all those divs with IDs are presentation, not content.

**RanaD** · 02-08-2007, 04:14 PM

Have it your way

<div id="id"> with CSS saying the font colour is pink and the div goes top right is HTML telling the CSS to tell it how to present it. Would you rather do it in a table? Be my guest

**gooor** · 02-08-2007, 04:26 PM

RanaD: You got me, I'm waiting for the e-mail as I want to see how you do it, because when I did it CSS file was 150% size of table version. Also I want to know how did you do it on IE, because I had to make float:left for every table-cell div in IE only stylesheet ( it looks like IE does not know what display: table-cell means or I don't really know how to use it )

**Learning Newbie** · 02-08-2007, 05:41 PM

Quote:

Originally Posted by RanaD

Have it your way

<div id="id"> with CSS saying the font colour is pink and the div goes top right is HTML telling the CSS to tell it how to present it. Would you rather do it in a table? Be my guest

But the fact that this text should go in a division called "id" while that text should go in a different division called "container," even if using pink text is somewhere else, the divisions and layout are all still part of the html - there's a lot more than content going on here, a lot of it is still presentation.

Tables versus divs ought to be irrelevant to CSS - you can apply the benefits to either.

**anwipr** · 02-09-2007, 09:38 PM

Thank you for clearing that up... I know I didn't ask this question but I was wondering what the deal with web standards is. I'd like to update my code and become compliant with all the new XHTML and everything and I didn't even know that tables were outdated! Does anybody know of a good tutorial or set of tutorials where I can learn to use CSS instead of tables? Thanks!

(The code for the whole page that I posted was a combination of different files. I've been using a PHP include for every bit of code above the main content and another for everything below so that my presentation and content actually were seperated. I've been thinking of this as easy, but if there's a better way to go about organizing my code, I'm all for it and ready to learn!)

**LadynRed** · 10:53 AM

There are TONS of resources for learning CSS on the web. Top choice is from the W3C itself - www.w3schools.com

I'd also highly recommend this book:
http://www.sitepoint.com/books/html1/

As for web standards.. more info:
http://www.webstandards.org/learn/
http://webstandardsgroup.org/
http://www.maxdesign.com.au/presentation/checklist.htm
http://www.456bereastreet.com/lab/de...web_standards/

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!