SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Interesting problem re: DIV's and SEO

    If you've been creating websites for a little while, you'll no doubt appreciate the effectiveness of utilizing CSS and DIV tags for reducing the amount of HTML code on your websites.

    DIV layers and (particularly) CSS can turn source code that's too long for notepad (and has to be opened in wordpad )into a page of easily readable code (less than 1/2 the size).

    I have always designed my site templates with two priorities in mind:

    1 - Page Loading speed ..ie: Images are as small as possible, and they are re-used and tiled where possible. CSS is used to get rid of as much HTML code as possible. Javascript is kept on .js files etc etc..

    2 - I try to make my pages search engine friendly ..ie: I make use of ALT tags link TITLE tags, table SUMMARY tags, and obviously the Title, Description and Keywords ..all as much as possible and while using as much common sense as possible.

    I am not into scouring every single resource and every single forum and looking up info in every single search engine to find out how best to optimize my sites for each one of them. I simply optimize for Google as a first priority, and use common sense SEO methods that will [at least] not hamper my ranking possibilities on other engines. ie: I SEO my sites. I don't SES (Search Engine Stalkization - lol) them.

    In short, my SEO methods merely involve making code that is as clean and as "politically correct" in regards to search engines as possible, but I don't dwell on any particular method.

    I find that providing I have a bit of content on each page, and if there is a page THEME and if a certain keyword is used liberally from the TITLE tag, through to the description and keywords (note: I know that many search engines do not use these anymore) ..and if the page <h3>Heading</h3> is the same as the page TITLE, and if the keyphrase is in the page several times and if it's in links and alt tags and title tags ..I usually get GREAT rankings on ALL of the top search engines for one search term or another.

    I feel that this is as far as one should go with SEO. I don't have the time to sit here, spending 2 days on one page, trying to get specific #1 rankings. I'd rather use my time learning better web dev methods and creating new content.

    Having said all that, here I am now. I am asking for advice on DIV tags and SEO. I have a small problem that I have not been able to figure out. So, it's time for some learning!!!

    ============Problem:

    I have developed a new system for me to build my sites, (with PHP) so that I can re-use content files under different domains that I own, providing that they are on my server. I simply use PHP includes. Combined with using $variables for keywords, I can give each version of the content a new set of keywords and a new template. This way I can attract traffic from search engines from the TEN ways a keywords can be typed into a search engine, and not just one

    However, I want to go one step further than that. Actually, two steps further. I'll explain the other step after I get to my point..

    ============My point:

    I want to use a div tag to place the content at the TOP of my page. This is, of course, understandable. I simply want to make sure that search engines can get RIGHT to the content, before it trips over the header or any menu's.

    Now, I do know how to do this. It's quite easy. Just a DIV layer with left:150 (leaving 100px for the left menu) and top:100 (leaving 100px for the header). It's all good right?

    ..well, no. See, I like to set my main table, ie: the table that my WHOLE page is in; at 100% height. This way the footer is always at the bottom of the page, where it should be ..after all, that's why it's called a footer, right?. I hate it floting around the middle of the page, when there are only a few lines of content. I like my page to take up EXACTLY the height of the browser.

    I can set all this up no problem, but when I test to see what happens after I put some content into the page, the content area OVERLAPS the footer. This totally SUCKS!

    So, is there any way that I can build a template that has the classic structure:

    - A header
    - A left menu area (150px wide)
    - A Content Area
    - A footer

    ..using a DIV layer for the content, but also so that the div layer doesn't strangle the footer once content pushes it down there.

    It's a very annoying problem. I have come to some OK-ish solutions, but I just can't get it all perfected.

    Anyone?

    MrLeN

    P.S. The other step is to make a list of keywords in a database, but I don't know how to setup a database. This way I can make the $keywords pull a search term from a database, depending on which domain it is being used for. ie: I would have a database area for "SEO" terms. Site one would pull out a position 1: Search engine Optimisation, Site two would pull out a keyword from position 2: Search Engine Optimization, Site 3: SE Optimization, Site 4: SEO Optimization etc etc... Can anyone set me in the right direction for setting this up?


  2. #2
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're problem is a css one, not a search engine one. I've moved this to the appropriate forum

    100% heights never seem to work correctly, I hope you find a solution.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  3. #3
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.sitepointforums.com/showp...87&postcount=9

    Could this help you? (I know it does not have those menu areas, but it's something near what you described)

  4. #4
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was trying to reply, but I can't get my example code to show up properly. How do I show an example of my code, without it allstickingtogetherso thatitdoesntworkproperly?

    MrLeN

  5. #5
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your example that you tried to post does not work at all. (so you edited it away)

    Try using the #-mark in the sitepoint text editor, it's for code

    Also, did you not know that tables for positioning are out of the fashion. =)

  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MrLeN
    I was trying to reply, but I can't get my example code to show up properly. How do I show an example of my code, without it allstickingtogetherso thatitdoesntworkproperly?

    MrLeN
    Are you on IE5.X Win by any chance?

    These forums use 'white-space: pre' in the CSS to display code. IE5.XWin doesn't understand that. I had the same problem untill I switch to Firebird as my main browser.

    As for your problem, it should be real easy:
    Code:
    div#footer {
        position:fixed;
        bottom:0;
    }
    Ok, now before you start jumping up and down with joy, did you notice how I emphasized should? there's one snag... IE (any version) doesn't understand this .

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  7. #7
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here's my code

    Here's my code (attached - test.txt)..

    I have actually got my code to do everything that I want it to do. There is no way to have a template with a header and footer and left menu (in the way that I have designed mine ..with the requirementsthat I have) ..with DIV tags and CSS alone. ..well, not that I know of.

    If anyone can redesign what I have made without the use of tables ..be my guest.

    The code must do this:

    - The template must have a height of 100% (ie: It must fill the browser screen, even if there is only one line of content)

    - There must me a left menu, a header (100px high) and a footer (100px high).

    - The content must appear FIRST in the HTML code.

    - The content and/or left menu must not overlap the footer, once it is filled enough to reach down that far. ie: Once the page content reaches the footer, itmust push the footer down.

    The code that I have attached is my best shot at accomplishing all of this, but I still have a problem:

    In the following code, how can I specify the top left TD area to be 100px ALWAYS. The height of the two left TD's jump around when I add content into the left menu or the content area. I just want that top left TD to be 100px NO MATTER WHAT ..if I can get that right, my template is good to go

    This code is in test2.txt ..it highlights the problem that I am having in test.php ..but without all the surrounding code.

    MrLeN
    Attached Files Attached Files

  8. #8
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have attached 2 text files of code.. but they are not appearing in my post. How can I make them show up?

    MrLeN

  9. #9
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ..this SEO problem is no longer a CSS problem ..is there a table layout forum section? ..or maybe we could just put it back in the SEO area, where people that SEO sites might know what I am talking about?

    MrLeN

  10. #10
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MrLeN
    I have attached 2 text files of code.. but they are not appearing in my post. How can I make them show up?
    Attachments need moderator approval. They'll show up eventually. Can you put the files on your site and provide links?
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  11. #11
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Arkkimaagi
    Your example that you tried to post does not work at all. (so you edited it away)

    Try using the #-mark in the sitepoint text editor, it's for code

    Also, did you not know that tables for positioning are out of the fashion. =)
    True ..my version works ..but the version that the forum rendered doesn't. (which is why I edited it away).

    I am not interested in fashion. I'm interested in functionality.

    MrLeN

  12. #12
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John Colby
    Attachments need moderator approval. They'll show up eventually. Can you put the files on your site and provide links?
    No worries:

    Main Code

    Specific problem in the main code

    MrLeN

    P.S. Note: The page only goes past the height of the browser screen, because I have added text in the content area to push it down that far. However, I'f I removed lines 002 to 040 ..the page would simply sit from the top of the browser screen to the bottom ..hmm, ok ..I'll upload an example

    ..you'll also notice that the positioning of the left area content has moved ..this further highlights my problem. If anyone here can redesign that page (another way) ..so that it looks and functions the same ..I'd be most appreciative

  13. #13
    Non-Member
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    Are you on IE5.X Win by any chance?

    These forums use 'white-space: pre' in the CSS to display code. IE5.XWin doesn't understand that. I had the same problem untill I switch to Firebird as my main browser.

    As for your problem, it should be real easy:
    Code:
    div#footer {
    position:fixed;
    bottom:0;
    }
    Ok, now before you start jumping up and down with joy, did you notice how I emphasized should? there's one snag... IE (any version) doesn't understand this .

    Rik
    Buggar! ..that would have been good!

    MrLeN


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •