dbrimlow

Here is a link to the url=http://www.rankquest.com/seotips/index.html]"rankquest.com"[/url] SEO tips. This site is a must for anyone who cares about learning (and testing their pages for) SEO. The "keywords" meta tag is the most abused tag in web creation history. Google, Yahoo and the other major search engines don't "ignore" it ... they simply don't rely on it or give it much weight on its own. HOWEVER, a properly used keywords meta tag, that does contain actual keywords that are on the page, is NOT ignored; it is "considered" within the context of everything else. For instance, using ASMITH'S example, a keywords meta tag for a music teacher site would include the following: music teacher, lessons, theory, composition, advanced, beginner, student. All of these words would be on the page. By virtue of "music" being the first keyword likely to be entered into a search query, the other words would most likely also be entered in relation to it. The query search would highlight these words - particularly if the were together in the pattern search. music >> "teacher", music >> "lessons", music >> "theory", music >> "composition", "advanced" << music, music >> "beginner". The tricky part is refraining from repeating the word "music" in the tag. It only need be there once ... the search bot will put them together. That said, it is better to have no keywords meta tag than a poorly entered one. And it is better to have just a few words (no more than 20), than stuffing it full of all possible combinations of words. Actually, my industry (real estate in Manhattan) is easier to illustrate how one can cover all bases without repeating words: "manhattan apartments, apts for rent, apartment sales, nyc rentals, lofts in new york city, ny real estate broker, townhouse" The home pages for my sites use all of these words and their abbreviations. But, again, the #1 best way to get top ranking is to have quality external links from sites with a high "pagerank". Top level Directories are great for this, particularly if they specialize in your category. Advertising on trade publication sites is another.

I just came across this very cool website that creates a screenshot of your page in various browsers and platforms. You can also determine settings like screen size, color-depth, java, javascript and flash. See if your site holds up the following browsers/platforms: Windows: IE 5.5 - 6 or 7, FF 1.0 - 2.0, Opera 9.24 - 25, Safari 3, Sea Monkey 1.1 Mac: IE 5, Safari 1.3 - 2.0 - 3.0, FF 2.0 Linux: BonEcho 2.0, Dillo 0.8, Epiphany 2.14 -2.20, Firebird 0.6 - 0.7,Firefox 1.0 - 2.0, Flock 0.7 - 1.0, Galeon 2.0, GranParadiso 3.0, Iceape 1.1, Iceweasel 2.0, Kazehakase 0.4 - 0.5, Konqueror 3.5, Minefield 3.0, Mozilla 1.1 - 1.9lla 1.4, Navigator 4.8 - 9.0, Opera 9.25 - 9.50, Phoenix 0.5, SeaMonkey 1.0 - 2.0 http://browsershots.org/

Can Google find your site when you search for your domain name? SEO is a very involved process and requires a few things to even begin to hope to place well in "natural" ranking. The first thing to do (instead of "submitting" your site, which comes later) is to make sure your page is structured properly: Text. Words. Presented in the code clearly showing are important and which are not. Simple. That's all SEO is all about ... how words are grouped and presented in the code in order of importance. And this is where 99% of people who create web pages most often fail; they don't know how to present words/text in their design, much less in their code. Search bots are smart; to determine what a page is about they simply analyze how words are placed, in relation to each other, IN THE CODE (not how they LOOK on the page). They first look at the words in the page title and description within the head tag. Then in the body, they strip away all scripts, images, layout tags and style tags - and scan all the raw words. But, they give special attention to any words given a hierarchy of "importance" by the author that are contained in two basic block level tags - headers (h1 - h6) and paragraphs, taking note of any words that may be in bold. They analyze the combination of words and the number of times they repeat - again placing special considerations on the words and patterns within title, description, h1 - h6, paragraphs and bold text in paragraphs. They are smart! They can understand the relationships and determine if the words (particularly the special attention and repeated words) make sense and are used to properly convey a concept (instead of being randomly tossed in there to fool it). And finally, they determine what the page is most likely about, how high or low to "index" it in the database for retrieval when a search query matches the words and patterns. Oh yeah; another important thing to remember is that bots have A.D.D. they get bored and lose focus very quickly (like half the people here who haven't made it to this point in my long winded explanation). They will not spend a lot of time and patience spidering a page that has a high code to text ratio percentage and no semantic and hierarchical structure assistance from the author. If it doesn't make much sense to them, they try to make a guess and index it low in the database. So, considering all of that, if you just cut and paste ONLY the text in your code (in order from top to bottom - without rearranging anything) does it make sense? Don't just assume it does. If you use tables for layout, it will NOT make sense because text in table rows will not match text in table columns once the tds and trs are removed. If you didn't use headers or even paragraphs (or any block level, non-layout containers) then WHAT are important focal points of the text? .................... Why do this before submitting to search engines? Simple. Competition. Consider the hundreds of millions of websites out there. How many million are actually your competition? How many web sites about chefs, real estate, music, etc.? How many are from the worlds leading people or companies in the field? MILLIONS! And so here you and I come ... we make a web page and submit it to a few search engines. Good luck! The only way we can hope to compete is by starting with well crafted, search engine friendly code. The number 1 criteria for the best search engine placement regardless of code (even if it is one huge 800 x 600 graphic with nothing but image-map links) is "Links-TO" your site from external sites (quality, category related sites). The better the quality level (and number) of links, the better the results. But it all starts with a website that people, colleagues, reviewers, trade industry journals, etc. will want to link to.

No xhtml at all, just: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> First, there is no reason anyone should ever begin a new project using a transitional doctype ... the only reason to EVER use transitional is when you already have an older version of a live html page and are making it temporarily valid, before getting around to recode the page to current html specs (strict). Transitional doctypes just allow sloppy deprecated tags. Why use it for a new document? Might as well just use html 4.0 strict or html 3.0. Next, xhtml is not an html replacement, and was never intended as such. When you use xhtml along with a charset of "text/html", browsers simply display it as html anyway (while allowing the code to use XML closing tags and rigid rule structure). But unless you really follow proper markup rules, coding syntax and case, it will be invalid fast. Html is a little more forgiving. Yet, believe it or not, using html 4.01 strict, is the mark of someone who knows what they are doing because it is actually more unforgiving of using ANY deprecated tags or improper html 4.01 rules. More and more, as coders are becoming aware, they are changing back to html 4.01 strict, and seeing those who use XHTML (and use the charset text/html) as amateurs who fell for the initial hype of xhtml (like we all initially did) back before modern browser (like Firefox) became so popular among the general public.

You can easily make it "similar" with css, but IT only uses a hover effect for the thumbnail to show the photo. It doesn't use on click, and the photo will switch back to the default viewable photo when the thumbnail is not hovered on. It is done using absolute positioning and visibility for the large photo and hovers for the thumbnail. But, without some very simple js, particular on click or on hover and show and hide, it will not act the same as you want it to.

Here is the "must have, must bookmark" link that explains (quickly and easily) what bronzemonkey's answer is all about: maxdesign's selectutorial

Well, first of all, did you know you have over 600 errors!? This makes the page invalid and sends it into quirks mode. Once in quirks mode, all bets are off and debugging css and layout is near impossible. Two reasons: 1. invalid xhtml - if you do not use xhtml to parse xml, then you are just using it to display html anyway ... only with xhtml coding rules. BUT you are not using xhtml rules properly - not encoding html characters in your scripts. Just use html 4.01. XHTML is too unforgiving and unnecessary for serving html in the first place, but more so when you don't follow the encoding rules. 2. improper use of embedded style tag within the head. This is wrong: </style> <!-- Style for table --> <style> The second style tag has no type. It is throwing off your whole validation. Change this to one embedded style within the head tags - remove these two tags altogether and leave the first and last style tags. Once that's done THEN you can start debugging.

change the body margin to 0 and make the container margin "margin:0 auto". Why are you using xhtml strict?

I agree. jcombs is truely that rarity among our profession ... a "hybrid" (skilled in both design and coding). His web site is professional in every aspect.

First, I don't think anyone here wants to download a text file!!! Yikes! Just copy and paste the code here within the "code" tags (the # above)

Actually, looking at the whole posting again, the solution I used is not what you are looking for. In CSS, each select (class or ID) impacts the layout of one another; then how they are used within the actual html markup, along with html tags, doctype and proper (error free) use and syntax, determines if they will do what was intended. Unless we have either a link to an existing test page, or the full html from doctype to end html tag, and the complete css, there is no way to really advise you. If you wanted all of your #side_nav li to line up from left to right (instead of up and down) then the display inline element is used. But it is relative to font sizes, container widths, text length, clearing floats, etc. There is just too much information missing to help you. Just so you know ... wide-screen or not should make no difference to your layout if you have coded properly.

Ah, you want display:inline. Try this: #side_nav li { float: left; width: 9em; /*minimum width of horizontal menu*/ text-align:center; display:inline }

Whoops, I meant Firefox.

Clean and professional.

Both links look fine in IE to me.

Without a sample of your html and css there is no way anyone can help you.

No advice will help you when your code is such a mess. And your html is a mess while missing the whole point of css. It is not valid, so there is no telling what will happen if you add css tags ... some may work, others may not. It has broken tags, no tags when necessary and can easily be fixed. Once the html is fixed and it is valid, with no errors, layout tweaks will work. Until then, in quirks mode with broken html anything can happen First things first ... use the correct doctype by tacking this on to the end of what you have now "http://www.w3.org/TR/html4/loose.dtd"> Lose the bad old deprecated styling in the body tag. So much easier and cleaner to add it into the css. body { color:#000000; font-size: 12px; color:#FFFFFF } Next, WHY are you using a table as the main container? You are close to having it right ... lose the table altogether and create a main container id in the css to replace it. #container {width:100%} Markup level font tags???!!! Lose them. Create classes for them in the style sheet if you must. This must go: <font color="#FFFFFF" size="2" face="Tahoma"> along with this: <font size="2" color="#FFFFFF" face="Tahoma"> and this: <font size="2"> and, of course, this: <b align="right"> Both versions of your tahoma font tags can be filtered down to a simple css based class, like so (specify alternate web friendly generic fonts as well for those who don't have tahoma): .nofonts1 { font-family:"Tahoma", Verdana, Arial, Helvetica, sans-serif; font-size:1.1em; } Font "2" is nothing. It is very old html 3. It is relative to the body font size. So if the body font size is 12px, then use all relative sizing to that from now on (smaller or larger) either in percentage or em - like 1.1em or 102%. You are also not using proper block level tags (paragraphs, lists, etc.) - although you DID use a header tag, then messed up the link coding. Links are coded within block tags, not around them. Margins and paddings should take the place of for spacing (use a span tag if it is within a block tag. (add this to your css: .leftbigspace {padding-left:20px}) Now to see what you had become what you have BEFORE even trying to figure out any img layout! <body> <div id="container"> <div class="containercolour2"> <b class="rtopcolour2"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> <div class="right"> <p class="nofonts1"><a href="?i=1" target="_top">comments</a> (1 ) <span class="leftbigspace">(27 clicks)</span></p> </div> <h1><a href="?i=1" class="two"><img src="images/noimage.gif" width="100" >play the drums</a><h1> <p class="nofonts1"> 16-01-2008 By blahblah(10)</p> <b class="rbottomcolour2"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b align="right"></b> </b> </div> </div> <body> Of course, now you need to style your block tags if the defaults are too big. in the css star from this (top and bottom margin of 5px and no left right margin) and tweak to suit: p {margin:5px 0} Once you start seeing your code going top to bottom, as it should flow top, left, right, bottom on the screen. It will be easier to handle tweaking elements to how you want them.

The story with tables has a lot to do with their initial intent. A table was never meant to be used for layout; it was meant to display "tabular" data only - such as in a database or spreadsheet - where each row strictly contains data related to each column and nothing else. In the early days of the web pre-css, getting anything to line up (like in a word processor) was impossible. All styling was done inline and for each instance a style was needed. The only concern was "How it looked" in a browser. It was frustrating. Then we discovered that by using tables and nested tables we could literally make a web page look like a graphic artists' mock up. What this did was two things: 1. it removed the linear nature of any text information in the code itself, 2. it encouraged the elimination of using any text at all in favor of graphics. Unlike TV or Radio, there was no narration or audio, so in essence this made the internet a "visual-only" medium. And furthermore, it made collating information about websites by search engines nearly impossible - forcing them to rely upon the honest inclusion of meta tags by the creator - description and keywords. Well, give a human being the choice of doing the honest thing or taking advantage by NOT doing the honest thing and .... So, the whole intent of the web (to provide information) was corrupted ... all because of tables. Then in 1997 css came out (History of css. And believe it or not, within the 10 years it has been out, we still don't have one damn web browser that supoports the full initial w3c css level 2 recommendations! BUT! Thanks to Firefox and IE's security problems, at least now people are beginning to take it seriously. And with most web coders not even bothering to include hacks for IE 5 or Netscape 4 anymore, people are forced to upgrade their old web browser versions. OK, so what does this have to do with tables? Code. The actual presentation of the code itself is now as important as the browser view. Why? 1. "Natural" search engine ranking is desired by anyone with a website. And unless you have dozens of "high level" links TO your web site, you can forget any hope of doing well in Google and now, Yahoo, without clean, easy to read and low "code vs text percentage ratios". Search engine bots don't have patience for poorly coded, tag soup, hard to follow (understand) text patterns. If the code shows a lack of coherent topic focus, and it has to guess what the page/site is all about, the bot will index the page WAAYYY down the list. 2. Disabilities, visually impaired visitors. Consider the millions of people around the world who are either blind or visually impaired. In today's world it is very difficult to function without the web (imagine five or ten years from now?!). Visually impaired visitors use either a "screen reader", "transcoding proxy server", or a "dedicated web browser" like IBM's Home Page Reader, BrookesTalk, Asakawa, Asakawa or WebbIE. It is actually far easier and far SUPERIOR to first code a web page without ANY design concept at all. Simply code it as if it were a Word document. Use TEXT!!! Consider this: h1 - site title lists - links (for navbar) h2 - page title lists - for section nav paragraphs h3 - topic headers paragraphs lists paragraphs h4, h5, h6 - sub topics paragraphs lists - links for footer paragraphs for footer. It follows a linear, easily understood flow. Search engines LOVE when YOU tell IT what is important by using headers, lists paragraphs, bold text. Now, any web crafter who knows css, can take any web page that uses the above format and create an unlimited, diverse and richly beautiful web page without touching the initial markup. That was the whole concept behind the site that most of us cut our teeth on creatively csszengarden.com Tables may seem easier, but they are a fool's game and prove only one thing ... the web coder is not a true professional and has no concept of the overall detriments of using tables.

So I assume you are designating a fieldset for a form element and the form elements are within a table? If you designate widths for the fieldset and table in css, you could specify margin:0 auto for the table: Either in the head <style> tag, external css: fieldset {width:100%} table {width:80%;margin:0 auto} or markup inline: <fieldset style="width:100%"> <table style="width:80%; margin:0 auto"> Don't forget the legend tag after fieldset and the "label for=" tags in the table cells.

The answer to your question is an external css is faster (in the relative speed of page weight and bandwidth). Because a one time "Select" is faster than a new individual markup "Element". The css file downloads the Select once which designates the image command once. So for every instance of a css styled Select it quickly and easily displays the image from your cache with no further commands or page weight added to your markup (because the Select element's img is recognized as a one time command for every instance on your website of that Select). However, when each new page has new markup level img tags, even if for the same "type" of element, it is perceived by the browser as (and in fact is) a new markup element and command - even though the img is in, and retrieved from, your cache the browser still loads ("virtually downloads") it as a new element with a new command. Every element you add to your markup is like dropping yet another stone in a bucket ... this includes divs, spans, script and even spaces and blank lines! Every duplicate and unnecessary element you can remove from your markup by designating it once in the css as a site-wide Select element immediately helps with page weight. Search engine bots actually look at and consider "code to text percentage ratios". Maintaining at least a 30% text to code ratio is considered ideal. That's why you are better off using a <p class="select"> than using <p><span class="select">.

I can attest to bronzemonkey's solution for clearing floats ... much better than declaring an actual class in the markup.

Cool. Fluid is extremely difficult to make cross-browser/platform compatible. It is easy enough when the page is not very "involved" - simple paragraphs in a two column layout. But becomes a monster once you want to display tabular data or multi floated ids or classes. And, mostly IE is (of course) the killer because it does not support Min/Max widths and heights. There are a few AWESOME liquid sites/templates out there, though. The absolute KING of which was Boris Chesney's free template "A bit liquid". I reverse engineered this a while ago just to see how it worked and am still in awe. They technique is extremely advanced and totally outside-the-box. But this layout is even stable in IE 5 Mac! By the way, the link is to a free template site that also has some pretty good resources for designers, coders and web masters. ex-designz.net

LOL, I need to make a correction, as well. The strict doctype does NOT have "DTC HTML 4.01 Strict". The strict is left out and only points to the strict.dtd later, as follows: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Good for you. If you don't learn it, what's the point, right? First off ... LOSE THE XHTML!!! You are not parsing xml (or serving the page as xml) so why use xhtml? It only gets converted to html anyway (because you are serving it as "text/html"). So stick with html 4.01 strict and you cannot go wrong (once you validate it) AND, you can still use the same strict xhtml code styling rules (except for self closed tags like br, img, etc..) like using all lowercase tags and open and close all tags. It is very easy to switch from xhtml to html: 1. change the doctype to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2. open your editor and perform a "find and replace" function for closed self tags. simply replace: " />" with ">" 3. DUCLET is right ... put styles where they belong, either in the head section, or better still, in a separate external file. The reason is to keep your actual markup clean and free of as much unnecessary elements (and nearly all styling elements) as possible ... the goal, remember, is to use LESS code in the markup. His solution uses a cross-browser trick. But you shouldn't even THINK of cross-browser tricks until you have the base concepts down in ONE modern browser (and NOT in any IE, that will just make your life miserable in the beginning). Test you beta pages in Firefox first. It is easier to tweak for IE after the page is first working properly. 4. and here is the first place to easily learn the bare minimum stuff that you should know before tackling a liquid layout - maxdesign.com.au. Max Design is the best place to learn the nuts and bolts basics of css (rules, tricks and layout). The section "floatutorial" also shows how to create a liquid 2 column or 3 column layout. Listomatics are the must know of any web coder. And to avoid months of frustration because things just don't seem to be "working right" ... remember that 9 out of 10 times it's because of something YOU did wrong by breaking one of the CSS selector rules LEARN THE RULES BEFORE PLAYING THE GAME by learning "Selectutorial". Evan after years of this stuff, I still find Selectutorial to be the best source online for understanding the rules. Once you have down the concept of Selectors, Lists and Floats - and use valid simple html markup - you can get into the more complex world of how to make it all behave in cross-browser/platform. Good luck.

LOL!! I HEAR THAT! I have a feeling this damn learning nonsense is a black hole, patience sucking vortex from hell! I totally STOPPED learning php and have concentrated on nothing but css and SEO for the past two years, as well ... at this point I am only beginning to be confident in my css skills. And it wasn't until @ 3 or 4 months ago, when I stopped wasting my time with XHTML and started using html 4.01 strict that I feel like I have re-learned proper html. Here is how I look at semantic markup ... if I turn off my css and the page looks basically like a well presented "word" document, then I succeeded. Here is a good explanation at wikipedia: http://en.wikipedia.org/wiki/Style_sheet_%28web_development%29