Taking out the table and Poodle

@leaningSep 03.2006

Hello all!

1) On this webpage (~~[url]~~www.lakecountycfc.org)[/url], I am using an inner table to set up graphics.

What is the best way to get the same results with CSS? Create div boxes and float them around? I essentially need to create a tic-tac-toe arrangement of div boxes, but what is the best way to position them?

2) Also, the other question I have has to do with Google. Right now, Poodle (~~[url]~~http://www.gritechnologies.com/tools/spider.go?[/url]) is saying that Google will pick up the first bit of text in my html which corresponds to what is says in my left navigation menu…which not want I want to be displayed.

I need to put in some better words. I read alot of places about search engines blocking you if you put in hidden text (font color same as background color, hidden divs), etc. to increase your web rating.

I tried putting the text in the header, but since that is a background image, the text writes over the picture. If I put it behind the image, now I am hiding text again.

Any ideas on these things? ?

Appreciate the help!

VR/

John

to post a comment

CSS

8 Comments(s) _↴

@DJRobThaManSep 03.2006 — #Leaning:

1)

If you want a tic-tac-toe type of arrangement one way to do this is to have an outer <div> eg. with a width and height of 300px.

Then within that div just put 9 <div>s in there that look like this <div style="float: left; width: 100px; height: 100px;"></div> (It would be better to have the style in an external file or above in the header)

2)

I think you could fix this by adding <meta> tags. More specifically this one:

<meta name="description" content="Your description of the site here">

And Google should read that as a description of your site.

Hope this helps,

Douglas

@leaningauthorSep 03.2006 — #Douglas,

Thanks!

1) I willl try your div suggestion to see if I can get it all to line up.

2) I have a <meta content="Blah"> on that webpage (and the other 23 on the site). The site is still too new that it doesn't yet show up on Google. The Poodle thing lets you know in advance what Google will see ( more or less). Right now, Poodle says that you will see stuff like "arrow.gif" for my website description. That's because the div for the left menu is the first item in the <body> that contains text. The header just has a graphic.

I read somewhere about using absolute positioning(AP) to make "the words" show up higher in the htm and still look the same on the page itself, but I don't know enough about how AP works to make that work for me.

Steep learning curve as always.

Thanks again!

VR/

John

@DJRobThaManSep 04.2006 — #No problem, but remember to include [B]name="description"[/B] in your tag. That lets anything reading the tag know that the information in the content attribute should be a description of your site.

Douglas

@leaningauthorSep 04.2006 — #1) Checked <meta name="description" content="Your description of the site here"> and it looks good. Hope that Google looks at that because Poodle doesn't. Poodle still says that Google will be looking at the words on my navigation menu ?

2) Did the 9-<div> within a <div> thing. After some sizing issues, it worked great and I was able to delete the <table> tag. Couldn't get the text to vertical-align using several methods so I put a <br /> tag in there to move it down a bit. Not the prettiest code, but it validates using the 5 or so methods I used. ?

Thanks for all your help!

VR/

John

@DJRobThaManSep 04.2006 — #Yep... that's an issue with css. No really easy way to vertically align anything. But there is a very involved tweaking process to do it. Just search on google and you''ll find it.

Douglas

@WebJoelSep 06.2006 — #1) Checked <meta name="description" content="Your description of the site here"> ....[/QUOTE]

Actually, I think Google is one of the major SEARCH engines that do not look at META data tags due to abuses with them. You know, -you SEARCH for "baby accessories" and land on a Paris Hilton, Beyonce or Britney Spears fan-page? Google relies more upon good content with meaningful link text (not "Click here", and consistancy therein, but if the site sells baby clothes, the hyperlink text should say "baby clothes" or something "meaningful" to the spider/'bot which indexed the link).

Use of <h> tags that employ title="the wording of the HEADER tag"

(<H1 title="baby accessories &#amp; clothes">BABY ACCESSORIES &#amp; Clothes</h1> is FAR more meaningful to a 'spider or 'bot, as it not only read the text of the <h> tag (and the higher the number/bigger the font-size, the greater the relavance it is presumed to have), it also read the accompanying title="" text.

Don't forget to put something meaningful in (most likely)3rd line of your HTML, the <title> </title> either, describing your site, the site's name and the current page. This is important too. Many web sites neglect this and leave it blank, or worse horror-of-horrors, -it merely says "new document", a legacy from the software that created the page that used this text as a 'placeholder'...

Another fairly recent developement is to put your navigation links in your HTML page 'below' the content, and have it 'positoned' to appear in the usual spacial location that you wish. That way, SEARCH engines aren't suffered to wade through your page-links before it reaches and parses your actual content. Chances are, if the navigation links are correctly created as an <UL>, this is somewhat less of a risk. It's the dysfunctionate bloatware creations vis Dreamweaver or FP that puts navigation links in <TD> cells that this would be a major indexing slowdown issue...

Some if not many search engines anymore only read into the first page, maybe a few hundred words before it has 'had enough' and can archive/index your page accurately, so navigation 'nearer the bottom of the page' might help your "content" appear higher-up in the document....

A meta data 'robot' instruction to follow/all can encourage robots to search and index all your pages "<meta name="robots" content="index,follow" />"

if you do not mind that possibly someone will land upon page 3 or 6 or 10 of your site... so long as you have good navigation, they should be able to get to your intended start-page and get the full effect of your site.

There's alot more 'do' things that can be done, but just doing these will greatly aid your successful indexing and ranking.

@nataliemacSep 06.2006 — #Another nice trick for hiding text but still having it available to the search engines is to use CSS to set the display to none.

So, for example, if you have a header image that you'd like to use for aesthetics rather than a plain old <h1> tag:

[CODE]<div id="header">
 <img src="blahblahblah" alt="ABC Widget Company" />
 <h1>ABC Widget Company</h1>
 </div>
 [/CODE]

And then in your css:

[CODE]#header h1 {
 display: none;
 }[/CODE]

Validates, is completely "Google-legal" and still gets the information to the search engine without compromising your page layout.

--Natalie

@WebJoelSep 06.2006 — #Another nice trick for hiding text but still having it available to the search engines is to use CSS to set the display to none.....[/CODE]

--Natalie[/QUOTE]
Yes that's right! -I saw this same thing used when an image is used for a banner or logo, and the 'display:none;' div text is for text-readers and 'spiders (neither of which knows what to do with a image save for text-readers if they encounter any alt="" text).

?

Also in #CSS _↴

Float Wrapping Problems Stopping overflow Problem with CSS on PHPBB Forum

Success!

Help @leaning spread the word by sharing this article on Twitter...

Tweet This

Taking out the table and Poodle

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Taking out the table and Poodle

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴