Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Re-order page structure for SEO / screen readers

    I was thinking of doing some work for screen readers. I reordered the pages having content before structure. That is the intend anyway, but I can't get it to work. The content needs to float right to the structure.
    So this:
    Code:
    <div id="content"><div id="menu"><ul><li> ..etc.</li></ul></div>Content</div>
    becomes this:
    Code:
    <div id="content">Content<div id="menu"><ul><li> ..etc.</li></ul></div></div>.
    Ideally "menu" gets outside "content", but i can live with it at the moment.
    I tried absolute, but layout gets distorted and text doesn't float. Using relative with negative offset the structure is in place, but content doesn't float next to it. so my question: Does someone have a solution for this. As a side note "menu" doesn't mean menu. It's just the name of the DIV.
    Kind regards

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    consider posting some css

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by met View Post
    consider posting some css
    Hmm, why didn't i think of that
    ok, this the html
    Code:
    <div id="viewport">
    
    <div id="content">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui<p>
    
    <p> dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?<p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repella.<p>
    </div>
    <div id="menu">
        <div id="shapeL-01"></div>
        <div id="shapeL-02"></div>
        <div id="shapeL-03"></div>
        <div id="shapeL-04"></div>
        <div id="shapeL-05"></div>
        <div id="shapeL-06"></div>
        <div id="shapeL-07"></div>
        <div id="shapeL-08"></div>
        <div id="shapeL-09"></div></div>
    
    </div>
    and this the css
    Code:
    body {
    color: #eee8aa;
    background: #000;
    }
    
    #viewport {height:690px; width: auto; margin: 1em;}
    
    #menu {position: relative; top:-380px;}
    
    #menu div {border: 1px solid #0f0; color: #f30;}
    
    #content {float: right;}
    
    #content p-null {padding: 0 20px; text-align: left;}
    
    #shapeL-01,#shapeL-02,#shapeL-03,#shapeL-04,
    #shapeL-05,#shapeL-06,#shapeL-07,#shapeL-08,
    #shapeL-09 {
    float:left;
    clear:left;
    padding:0;
    }
    
    #shapeL-01 {
    width: 320px;
    height: 60px;
    }
    
    #shapeL-02 {
    width: 340px;
    height: 35px;
    }
    
    #shapeL-03 {
    width: 365px;
    height: 32px;
    }
    
    #shapeL-04 {
    width: 400px;
    height: 32px;
    }
    
    #shapeL-05 {
    width: 345px;
    height: 71px;
    }
    
    #shapeL-06 {
    width: 320px;
    height: 48px;
    }
    
    #shapeL-07 {
    width: 370px;
    height: 75px;
    }
    
    #shapeL-08 {
    width: 390px;
    height: 60px;
    }
    
    #shapeL-09 {
    width: 420px;
    height: 60px;
    }
    the menu colour serve no purpose besides debugging help. So the idea is that the text flows around the shapes. As a side note I need to mention that this is taken from bigbear's Sophie example.
    Last edited by tfit; 11-25-2009 at 08:11 PM.

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    work for me with this changes:
    Code:
    #menu {position: absolute: top: 0; }
    #content { position: abosolute; top: 500px; }
    ajust the values as you need.

    best regards

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts
    He oesxyl,

    As always you're the master, but i'm afraid i wasn't clear enough. i planned that before, but it only pushes the text down and that is not what i want. I needs to flow around the menu like thishttp://www.bigbaer.com/css_tutorials....text.wrap.htm
    or like eric meyers carvelious. Of course there is a workaround: give every line a <p> and position it absolute, but who needs spaghetti. And if you need to indent from the right you have to count the characters. If there is an easy way to have javascript adjust this I might try that.

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by tfit View Post
    He oesxyl,

    As always you're the master, but i'm afraid i wasn't clear enough. i planned that before, but it only pushes the text down and that is not what i want. I needs to flow around the menu like thishttp://www.bigbaer.com/css_tutorials....text.wrap.htm
    or like eric meyers carvelious. Of course there is a workaround: give every line a <p> and position it absolute, but who needs spaghetti. And if you need to indent from the right you have to count the characters. If there is an easy way to have javascript adjust this I might try that.
    a mixup of static, relative and absolute?

    I will try to find something,

    best regards

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts
    oesxyl,

    Don't waste your time on it . I figured a way. It does duplicate the content, but it's nicer that way.
    I just structure to have the content first and layout later. The trick to get it working was to have the first content hidden with display: none.
    Something like this
    Html
    Code:
    <div id="hide">content</div><div id="layout"><div>etc...</div>content</div>
    and in the css i just do
    Code:
    #hide {display: none;}
    As you see the content gets duplicate, but this way i just write the text and do structure later
    Last edited by tfit; 11-26-2009 at 04:32 PM. Reason: resolved

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by tfit View Post
    oesxyl,

    Don't waste your time on it . I figured a way. It does duplicate the content, but it's nicer that way.
    I just structure to have the content first and layout later. The trick to get it working was to have the first content hidden with display: none.
    Something like this
    Html
    Code:
    <div id="hide">content</div><div id="layout"><div>etc...</div>content</div>
    and in the css i just do
    Code:
    #hide {display: none;}
    As you see the content gets duplicate, but this way i just write the text and do structure later
    search engine bots and screen reader will detect second div. Screen reader users can be confused and I'm sure that search engine will consider this as a cloaking attempt. That's why I think is better to avoid this solution.
    I guess I have a partial solution:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>random title</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
      </head>
      <body>
        <div id="viewport">
          <div id="first">
            <div id="content">
              <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui</p>
              
              <p> dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repella.</p>
            </div>
            <div id="somethingleft">
              <img alt="" src="img/myse.jpg" />
            </div>
          </div>
          <div id="menu">
            <div id="shapeL-01">1</div>
            <div id="shapeL-02">2</div>
            <div id="shapeL-03">3</div>
            <div id="shapeL-04">4</div>
            <div id="shapeL-05">5</div>
            <div id="shapeL-06">6</div>
            <div id="shapeL-07">7</div>
            <div id="shapeL-08">8</div>
            <div id="shapeL-09">9</div>
          </div>
        </div>
      </body>
    </html>
    Code:
    * { margin: 0; padding: 0; }
    body { background-color: #ddd; color: #000; }
    #viewport { margin: 0 auto; width: 1100px; border: solid 1px #ccc; padding: 1%; background-color: #eee; color: #000; overflow: auto; }
    #first { width: 1050px; float: left; }
    #somethingleft { width: 275px; }
    #content { border: solid 1px #aaa; padding: 4px 3px; width: 765px; float: right; text-align: justify; }
    #menu { float: right; }
    I didn't try yet to to make text length to follow a shape.
    Edit: I used a picture from my disk for this example, you can use any picture with width 275px. Width is important because sum of content width and picture width must be less then parent container width.

    best regards
    Last edited by oesxyl; 11-26-2009 at 06:17 PM.

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Yes, I thought about the issue of searchengines and looked for it. Someone raised the question of how to stop engines not indexing certain parts of the page. Unfortunately he never got an answer. I wonder if I put something like this in the page if they would stop there:
    Code:
    <!-- </html> -->
    .
    Your solution introduces a bit of <div> soup i try to avoid

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by tfit View Post
    Yes, I thought about the issue of searchengines and looked for it. Someone raised the question of how to stop engines not indexing certain parts of the page. Unfortunately he never got an answer. I wonder if I put something like this in the page if they would stop there:
    Code:
    <!-- </html> -->
    .
    no, since is a comment will be ignored.

    Your solution introduces a bit of <div> soup i try to avoid
    yes, I agree. I put #first there to move the #menu to the right side of the page.
    I guess it can be removed if you change the flow, I didn't test this.

    best regards

  • #11
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts
    I figured it out without the duplication and still reasonable easy to maintain and with the flowing of text. I put the divs in javascript, place a call just after the <div id="content">, but before my text. So the structure gets inserted before anything is visible. S always thank you for your time


  •  

    Posting Permissions

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