...

View Full Version : Re-order page structure for SEO / screen readers



tfit
11-25-2009, 05:55 PM
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:
<div id="content"><div id="menu"><ul><li> ..etc.</li></ul></div>Content</div>
becomes this:
<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

met
11-25-2009, 05:58 PM
consider posting some css

tfit
11-25-2009, 07:08 PM
consider posting some css
Hmm, why didn't i think of that:)
ok, this the html

<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

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.

oesxyl
11-26-2009, 12:51 PM
work for me with this changes:


#menu {position: absolute: top: 0; }
#content { position: abosolute; top: 500px; }

ajust the values as you need.

best regards

tfit
11-26-2009, 01:33 PM
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/css.image.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:p. 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.

oesxyl
11-26-2009, 01:57 PM
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/css.image.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:p. 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

tfit
11-26-2009, 03:28 PM
oesxyl,

Don't waste your time on it :D. 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


<div id="hide">content</div><div id="layout"><div>etc...</div>content</div>
and in the css i just do
#hide {display: none;} As you see the content gets duplicate, but this way i just write the text and do structure later

oesxyl
11-26-2009, 05:12 PM
oesxyl,

Don't waste your time on it :D. 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


<div id="hide">content</div><div id="layout"><div>etc...</div>content</div>
and in the css i just do
#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:


<?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>




* { 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.
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

tfit
11-26-2009, 07:39 PM
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:

<!-- </html> -->.
Your solution introduces a bit of <div> soup i try to avoid

oesxyl
11-26-2009, 07:58 PM
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:

<!-- </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

tfit
11-27-2009, 12:38 PM
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 :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum