homepage Welcome to WebmasterWorld Guest from 54.226.93.128
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Trim your code -- table-o-holic 12 steps
linking js and css file
stuntdubl




msg:1187631
 10:41 pm on Oct 16, 2002 (gmt 0)

Hi....my name is Todd....
and I was a table-o-holic

I am getting better though, and slowly
migrating my sites to CSS.

I get frustrated, and often tempted
to use nested table 'work-a-rounds',
but I am trying to stop that now.

My new endeavour is trying to trim and clean up my code,
by linking style sheets and javascript files.

I am not having much luck yet, and wondering if someone can point me in the right direction.

When I am doing mouseover images (specifically in DW), I get all kinds of javascript that I would LOVE to link off-page. Not quite sure if this is possible but I would be ecstatic if it was. I am FAR from a java programmer, so in many cases this code baffles me, and I try not to touch it, or quickly press CNTRL+Z if I accidently do.

Please help me continue my resistance of tables.

 

Birdman




msg:1187632
 11:57 pm on Oct 16, 2002 (gmt 0)

Resistance is futile...

Kidding;) It's not as tough as it seems. Here is how I link to external .js and .css files:
<link rel="stylesheet" href="../newstyle4.css" type="text/css" />

<script type="text/javascript" src="../rollover.js">
</script>


martinibuster




msg:1187633
 1:26 am on Oct 17, 2002 (gmt 0)

Seems like it's time I got off my butt and started doing external js, too.

mack




msg:1187634
 1:31 am on Oct 17, 2002 (gmt 0)

I have to admit I use tables extensivly in my page layout. I think it's perhaps time I moved along.

[edited by: mack at 3:41 am (utc) on Oct. 17, 2002]

Edouard_H




msg:1187635
 1:44 am on Oct 17, 2002 (gmt 0)

You can turn DW's JavaScript into an external file easily. Build your nav bar, for instance, first before DW soups it with any other script. Copy between the beginning and end script tags, paste it into notepad, name it whatever.js, and use Birdman's example to call it externally.

Hagstrom




msg:1187636
 1:58 pm on Oct 17, 2002 (gmt 0)

and I was a table-o-holic

I would like to kick to habit myself, but it's hard to do as long as people are using NS4. (it's always somebody else's faults with us table-o-holics :) )

creative craig




msg:1187637
 2:02 pm on Oct 17, 2002 (gmt 0)

Tables are so easy to put together though, takes a few minutes to bang out a complete table.

I always find it more time consuming with CSS, but I am starting to move towards CSS layouts with minimal tables!

Craig

Birdman




msg:1187638
 3:16 pm on Oct 17, 2002 (gmt 0)

Tables are so easy to put together though, takes a few minutes to bang out a complete table.

I'm to the point I where I can bang out a page with divs pretty fast, but it always looks terrible in nn4 :(

I guess I'll have to learn that @import hack for the %3 of nn4 users sometime.

creative craig




msg:1187639
 3:22 pm on Oct 17, 2002 (gmt 0)

I'm to the point I where I can bang out a page with divs pretty fast

Thats what I am aiming for my good man

Andrew Thomas




msg:1187640
 3:27 pm on Oct 17, 2002 (gmt 0)

Is there a big difference in using layers rather than tables?

Im just getting into external .js and css, but still use tables, mainly because i know it works in most browsers, whereas layers im not sure.

Should i change, and will i see a big difference in SEO and download speed if i do?

Also, not knowing much about layers, what can layers do that tables cant, or vice versa.

thanks

Birdman




msg:1187641
 3:35 pm on Oct 17, 2002 (gmt 0)

Should i change, and will i see a big difference in SEO and download speed if i do?

It can definetly help in SEO by allowing the meat of the content to appear at, or near, the top of the html page. With tables, you have to stick to a certain order, which usually puts the good stuff much lower on the page.

It should also reduce download time, depending on the amount of tables you use.

stuntdubl




msg:1187642
 5:40 pm on Oct 17, 2002 (gmt 0)

>Should i change, and will i see a big difference in SEO and download speed if i do?

This is what I'm really hoping for.....

I seemed to have noticed that very 'simple' pages have been ranking high in G lately....

If not, then purely for the joy of something new, and having 'cleaner' code...

Woohoo! <does cabbage page dance>

I just finished uploading an update to my 150+ page site.....I was able to convert the table-based mess into a nice 3 layer style sheet.

I am very happy because I also discovered (for the first time) how to externally link the .js and .css files so my content is close to the top. It works....it really works!

Next step.....any suggested appreciated.....
getting rid of all my outdated <font> and other formatting tags in the 'content' section of my pages.....

Andrew Thomas




msg:1187643
 8:12 am on Oct 18, 2002 (gmt 0)

Layers only work in certain browsers, so how do you get around using a tabled site for Netscape 3 etc, what code is required to replace the layer.html to a table.html, so all browsers can see my pages.

kevchadders




msg:1187644
 8:47 am on Oct 18, 2002 (gmt 0)

Next step.....any suggested appreciated.....
getting rid of all my outdated <font> and other formatting tags in the 'content' section of my pages....

Get rid of the font tags, and set them up in your font styles in the external CSS file... and use the class in your html attributes instead...

e.g (home.css as the external file)

-- contents of the file (home.css) --

.normaltext
{
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px
}
-- End of file --

<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="normaltext">Hello World
</td>
</tr>
</table>
</body>
</html>

ppg




msg:1187645
 11:41 am on Oct 18, 2002 (gmt 0)

<link rel="stylesheet" href="../newstyle4.css" type="text/css" />

I've been linking to external stylesheets like this too, but I've found that validating to HTML 4.01 transitional gives me the following error at the w3c validation service:

Error: end tag for element "HEAD" which is not open; try removing the end tag or check for improper nesting of elements

If I remove the closing forward slash at the end of the link tag it validates fine, same situation but with a different error with strict.

Birdman




msg:1187646
 12:20 pm on Oct 18, 2002 (gmt 0)

You only need to add the /> when you validate for xhtml. Html doesn't require it. [w3schools.com...]

ppg




msg:1187647
 2:20 pm on Oct 18, 2002 (gmt 0)

Ah, thanks. I thought there must be a reason for it.

stuntdubl




msg:1187648
 3:41 pm on Oct 18, 2002 (gmt 0)

>Get rid of the font tags, and set them up in your font styles in the external CSS file... and use the class in your html attributes instead...

Can you think of a feasible way to do a find and replace SITEWIDE?

It's lookin' pretty grim to me, but thought somebody else might have an idea. I know I will certainly be trying to stay away from <font> tags in the future.....it's amazing how much bloat they add to each page.

tedster




msg:1187649
 9:03 pm on Oct 19, 2002 (gmt 0)

A manual sitewide deletion of all font tags is not TOO very grueling, because you probably don't have that many different varieties of
<font attribute="foo">.

What I've done:

1. Globally replace all </font> tags with nothing.
2. Do a global search on
<font.
3. Copy the COMPLETE font open tag from
< to >
4. Paste that tag into the search "find" function
5. Do a global "null" replace for that specific flavor of font tag.
6. Search again on
<font, and delete the next flavor you find.
7. Keep repeating until you can't find anymore instances of
<font.

Hagstrom




msg:1187650
 4:52 pm on Oct 20, 2002 (gmt 0)

I have just spent some weeks going through my site (300 pages of hand-coded HTML) to remove tables where possible.

One of the places where I could not do without tables was in captions below images. I tried starting another thread [webmasterworld.com] about this problem, but the consensus seems to be that there's no better alternative.

2_much




msg:1187651
 7:39 pm on Oct 20, 2002 (gmt 0)

I've always asked the designers I work with to use tables instead of layers, believing them to be easier for spiders to index.

I haven't done much research into this lately and am wondering, from a spidering & ranking point of view, whether things have changed?

I've always found the highest ranked pages to have very simple, table based html code. Am I out of the loop?

tedster




msg:1187652
 10:16 pm on Oct 20, 2002 (gmt 0)

It's still true that simple table-based layouts can do very well, especially when the fonts are handled with an external stylesheet to trim the code.

However, div based layouts offer many advantages - not the least being absolute positioning that allows you to push your essential content closer to the top of the HTML document.

brotherhood of LAN




msg:1187653
 4:54 am on Oct 21, 2002 (gmt 0)

For those digging their heels deep and replacing all their <font> tags by hand, you might want to check out an edit/replace function with regular expressions. They are the biz :) I mention them because I didn't fancy doing all that hand work either....so I learned a little about regex and let the computer do it for me (using notetab and/or DW)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved