9 Replies Latest reply on Jun 1, 2010 4:46 PM by Danovion

    Impossible? SEO-Friendly 2-column hybrid liquid layout

    Danovion Level 1

      Converting my first website from 4.01 to XHTML 1.0 Transitional. Beside header and footer, it has a 150px left sidebar and a liquid main text area. All set in tables. The webpage fills the entire browser window and is liquid. To be SEO-friendly, it READS THE TEXT FIRST before reading the long left sidebar.

       

      Have read the excellent article in Cookbook titled "Generate SEO-friendly, 2-column layouts in DW." But cannot figure it out for the hybrid liquid design (twoColHybLtHdr). Can get the sidebar to the top if I specify a certain width for the Main Text. But that is not liquid!

       

      I need the Main Text to fill in the area between the 150px sidebar and the right edge of the window, whatever width that may be.

       

      (Running DW CS4. Mac.)

       

      Is it possible? Or not? Thanks for any help!

        • 1. Re: Impossible? SEO-Friendly 2-column hybrid liquid layout
          Dan 21 Level 1

          Moving from a table design i guess you are using divs,

           

          they way i would do it would be to set the container divs in % using floats and css so i would have.

           

          <div id="sidebar "><p>sidebar content</p></div>

           

          <div id="maincontent"><p>main content here</p></div>

           

           

          css

           


          #sidebar {

          width:25%

          float:left;

           

          }

           

          #maincontent {

           

          width 75%

           

           

          }

           


          try that and see if it gives you your layout you wanted

           

          cheers

          • 2. Re: Impossible? SEO-Friendly 2-column hybrid liquid layout
            Nancy OShea Adobe Community Professional & MVP

            Since search engine spiders don't use CSS, it matters very little which CSS layout you use.  SEO is all about having plenty of relevant, keyword-rich content within good semantic markup (h1, h2, h3, p, li...)

             

            Below is a CSS layout that uses a fixed-width sidebar and liquid content area:

            http://alt-web.com/TEMPLATES/2-col-liquid-layout.shtml

             

            More Multi-Column Liquid Layouts -

            http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com

            • 3. Re: Impossible? SEO-Friendly 2-column hybrid liquid layout
              novion Level 1

              Thanks Dan21 but I need a fixed-width left sidebar and the text to expand as needed.

              • 4. Re: Impossible? SEO-Friendly 2-column hybrid liquid layout
                Dan 21 Level 1

                Why do you need the text to expand the whole the browser width, as for users with large screens this will make very long lines of text?

                 

                When I was learning webdesign i was taught that a line of text should should have no more then 12 words to appear more readable.

                 

                If you created it for the most commonly designed monitor resolution of a 1000px you could break the screen revenue up this way and have the site  centered. Or you could even make clever use of floats to allow users with larger screens to see more then those with smaller screens.

                 

                if you still want it as you have explained, i found the following code on another forum...this will need work arounds for ie6.

                 

                give the code a try or come back and explain some more so i can help.

                 

                <style>

                 


                html, body {margin: 0; padding: 0;}

                 

                #wrap {float: left; width: 100%;}

                 

                #contentwrap {float: left; width: 100%; min-width: 500px; margin-right: -201px;}
                #content {margin-right: 201px; background: #cbc; border: 1px solid #000;}

                 

                #sidebar {float: left; width: 200px; background: #abc;}

                 


                </style>

                 


                <div id="wrap">
                <div id="contentwrap"><div id="content">
                <p>content</p>
                </div></div>

                 

                <div id="sidebar">sidebar</div>
                </div>

                1 person found this helpful
                • 5. Re: Impossible? SEO-Friendly 2-column hybrid liquid layout
                  Danovion Level 1

                  Thank you Nancy O. I think this is exactly what I needed -

                  The 'Left Menu' 2 column Liquid Layout (Pixel-widths) from Matthew James Taylor at:

                  http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

                   

                  Looks great, I could have never figured this out. Will now have to implement it.

                  • 6. Re: Impossible? SEO-Friendly 2-column hybrid liquid layout
                    Danovion Level 1

                    Thanks Dan21 !

                    I will try it and learn how it works. And will compare it to the solution from Matthew James Taylor.

                    • 7. Re: Impossible? SEO-Friendly 2-column hybrid liquid layout
                      Danovion Level 1

                      Thanks Dan21! This looks like a simple and elegant code but it does not work for me. The sidebar appears to the right of the main text. (in Safari on Mac) Did I do anything wrong?

                       

                      Here is the XHTML code I got from you:

                       

                      <title>Untitled Document</title>

                      <style type="text/css">

                      <!--

                      html, body {margin: 0; padding: 0;}

                      #wrap {float: left; width: 100%;}

                      #contentwrap {float: left; width: 100%; min-width: 500px; margin-right: -201px;}

                      #content {margin-right: 201px; background: #cbc; border: 1px solid #000;}

                      #sidebar {float: left; width: 200px; background: #abc;}

                      -->

                      </style>

                      </head>

                      <body>

                      <div id="wrap">

                      <div id="contentwrap"><div id="content">

                      <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

                      </div></div>

                      <div id="sidebar">sidebar</div>

                      </div>

                      </body>

                       

                      • 8. Re: Impossible? SEO-Friendly 2-column hybrid liquid layout
                        Dan 21 Level 1

                        try this :-)

                         

                         

                        <style type="text/css">

                        <!--

                        html, body {margin: 0; padding: 0;}

                        #wrap {float: right; width: 100%;}

                        #contentwrap {float: right; width: 100%; min-width: 500px; margin-left: -201px;}

                        #content {margin-left: 201px; background: #cbc; border: 1px solid #000;}

                        #sidebar {float: left; width: 200px; background: #abc;}

                        -->

                        </style>

                        </head>

                        <body>

                        <div id="wrap">

                        <div id="contentwrap"><div id="content">

                        <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

                        </div></div>

                        <div id="sidebar">sidebar</div>

                        </div>

                        </body>

                         

                         

                        all i did was swopped the floats around, take a look.Iit should work for you and gives you a good head start !

                        • 9. Re: Impossible? SEO-Friendly 2-column hybrid liquid layout
                          Danovion Level 1

                          Nancy O, thanks again for your help and proving that SEO-friendly layout is POSSIBLE.

                           

                          I have worked over the weekend using the template from Matt Taylor. Just learning XHTML on the go and always manage to stumble over some new intractable problem. But now it is almost finished:

                               http://www.radonseal.com/aa-XHMTL-SEO-layout.html

                           

                          Still a few issues left:

                           

                          1) wrap="off" in TextArea comes up as an error. This no-wrap is essential and I understand there is a method with "whitespace" and will try that.

                           

                          2) Working on a Mac and Safari but when I open the page in Firefox, the header fonts come out much smaller. Mystery so far.

                           

                          3) The ruler and footer is still in tabular form. So far, no luck in getting it centered in XHMTL "untabled."

                           

                          4) <br class="clearfloat" />  Is this something useful or required somewhere? Will try to find out more.

                           

                          So, still some work left. But now I am sure we will be converting to XHTML.