Search Engine Friendly HTML

[MrLeN]

I am kinda stuck with a format problem. I am hoping that someone here might be able to offer a useful suggestion.

What I am trying to do is create a template, where the content of the page is the first bit of code in the HTML so that search engines will not trip over the header and/or menu.

I have had some success in creating such a template, but I can't get it to be perfect. I can create the template without using tables AT ALL ..ie: Just with DIV's and CSS, but I can only make such a template with a header, a content area and a footer.

However, If I want the template to have a 150px left menu down the left hand side of the content, things get a bit more complicated.

The example that I have provided here uses a table for the content area, because that's the only way I can get the content area and left menu to push the footer down, once the area has been filled.

The ONLY way I can have a left menu and a content area with DIV's and CSS it to use position:absolute ..but in that case, once the content gets too large, it doesn't push the footer down. It just overlaps the footer.

So, I guess ..what I am asking. Is there anyone here that can design what I am trying to design so that:

- There is a 100px Header area
- There is a 100px Footer area
- There is a 150px Left menu area
- The content (or left menu) will push the footer down if there's enough content
- The page (still) takes up 100% of the browser screens height, if there is (say) only ONE line of content.

As I said, what I have designed is "almost" perfect for my porposes, but I have used a table for the content area and left menu. Everyone knows that little table trick for getting the left menu to show on the left but be under the content in the HTML:



<table width="770" height="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td></td>
<td rowspan="2" valign="top">Content Area</td>
</tr>
<tr>
<td valign="top">Left Menu</td>
</tr>
</table>


..but the only problem here is that the top left TD area can NOT be adjusted to a fixed height. If I could get that area to stay at 100px no matter WHAT ..my template would be absolutely perfect!

I have used this principle in my template, which you can view here (http://www.mrlen.com/test.php)

I have been asking around on many forums now and I am having trouble finding a solution. The template dosn't have to be designed in the way I have designed it. It just has to do what I want it to do. It can use tables AND DIV's or just tables, or Just DIV's ..I don't really care. Just as long as it functions, I'll be happy.

..anyone?

MrLeN

[Narasinha]

I am kinda stuck with a format problem. I am hoping that someone here might be able to offer a useful suggestion.
...
So, I guess ..what I am asking. Is there anyone here that can design what I am trying to design so that:

- There is a 100px Header area
- There is a 100px Footer area
- There is a 150px Left menu area
- The content (or left menu) will push the footer down if there's enough content
- The page (still) takes up 100% of the browser screens height, if there is (say) only ONE line of content.

Interestingly enough, I was looking at a similar problem recently. I found a three-column layout that had some attributes that were close to what I needed so I modified it to use two columns. Both columns will remain full height, not overlapping the footer, no matter which has greater content. Basically this is achieved by making the body with a left border the width of the left column. The content of the left column is placed within the body content but given a negative left margin equal to that border width. Take a look at http://www.soltec.net/~dmg/columns/ to see what I mean.

Hope this helps!
Narasinha

[MrLeN]

That would be absolutely perfect if the content was displayed above all other code, in the HTML.

The layout is cool, but it's not search engine friendly.

Thanks for the link anyway mate.

MrLeN

[Narasinha]

That would be absolutely perfect if the content was displayed above all other code, in the HTML.

Okay, I made a few changes to the HTML and the CSS and now the content of the main section appears first in the HTML. The positioning of the header and left side is taken care of with a couple of "position: absolute" in the CSS. Is that more of what you had in mind? I put it at http://www.soltec.net/~dmg/mrlen/ for you to see.

**edit**

Ahh.. but now with larger content for the left column, the footer overlaps it. Let me make some more changes to see what I can do.


Narasinha

[MrLeN]

*HEHE*

Now I feel better ..someone ELSE is going through the same problems I was having :)

Hmm.. but approach with caution, because sooner or later you will want to headbutt a tow-ball!

I appreciate the time you are spending to help me. I will be very happy to see if you can work out the parts I couldn't get right.

MrLeN

[Narasinha]

*HEHE*

Now I feel better ..someone ELSE is going through the same problems I was having :)

Yeah, you've got to love these positioning problems.

Okay, I have it still up at http://www.soltec.net/~dmg/mrlen/index.html. The only problem will be if there is a border or background placed in either the left or right column. Since technically the column with the shorter content is only as long as the content, this will be obvious with a border or background.

Still, it is an interesting puzzle. :)

[MrLeN]

..now, can you give the header, menu and footer areas a background-color (so we can see where they are) ..and make the template span the height of the page (even if there's only one line of content)?

I am still working on the problem now :)

..I have decided that the footer can rest inside the bottom of the table. My current template has only one table, so it's not like anyone can say: "THAAAT'S NOT SEARCH ENGINE FRIENDLY - YOU NUT JOB!!!"

..it will all be cool, but sometimes when you start adding colspans and rowspans, you wind up with all sorts of width and height problems. Pah!

MrLeN

[MrLeN]

..is there some CSSthat will a position DIV relative to the DIV itis nested in?

ie:

Something like

<div style="width:100%" height:100%;>

<div style="top:100; position:absolute;"></div>

</div>

..if what I have above can be done, I'll be able to make my template. ie: I want the INSIDE dive to position itself ABSOLUTE(ly) to the Div that it's in.

I think withthe example thatI just typed in ..the INSIDEtable will still position iself agains the top of the browser screen :(

MrLeN

[Narasinha]

Okay, colors will show where things are. The height taking up 100% of the viewport is a sticky problem. I don't think I've seen a decent way to do that.

[MrLeN]

Yeah.. that's the hard part. Without 100% height, I can do it no problems at all.

However, various problems arise when you make a table 100% high. They always have and they probably always will. Ah well :(

..I'll think of something. Thanks for your help mate:)

MrLeN

P.S. Oh.. and I can do EXACTLY what I want to do, with the menu on the "right" ..instead of on the left ..maybe I'll just do that.

[Narasinha]

Yeah.. that's the hard part. Without 100% height, I can do it no problems at all.

However, various problems arise when you make a table 100% high. They always have and they probably always will. Ah well :(

..I'll think of something. Thanks for your help mate:)

MrLeN

P.S. Oh.. and I can do EXACTLY what I want to do, with the menu on the "right" ..instead of on the left ..maybe I'll just do that.

I wish you luck. Yes, positioning on the right is an option. I've used right-side navigation before.

About the "position: absolute" situation: Yes, this is supposed to be positioned left/right/top/bottom within the objects container, not within the viewport. This is not always the case, however. IE also requires that "top: xx" and "left: xx" be specified when using absolute.

Using "position: fixed" will place something at a specific position within the viewport, leaving it there when the page scrolls. A navigation box would remain at the top left, for example, while the rest of the page scrolls. Unfortunately, this is one of the CSS items that Internet Explorer does not support. It works fine in Opera and Mozilla/Firebird. Yet another reason why I push for standards. :)