Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Positioning Content At The Start Of The Code

Started by tamecrow, Oct 15 2007 05:10 AM

Please log in to reply

6 replies to this topic

#1 tamecrow

Ready To Fly Member

Members
36 posts

Posted 15 October 2007 - 05:10 AM

Hi all,

How can I restructure my code to have the unique page content at the start of the document and the menus and other duplicated includes towards the end of the code? My documents are all written in table-less code using divs and CSS.

Any tips would be greatly appreciated

Back to top

#2 Autocrat

Sonic Boom Member

1000 Post Club
1521 posts

Posted 15 October 2007 - 05:19 AM

Really depends on your structuring of the page.
Also depends on whether you want page view to resemble source order... e.g. do you want to code te navigation so it comes after contetn in the source... yet still appear before the content on the page (top, left, right, bottom!) ???

If you are thinking of standard left nav, right content, dual column layout, it isn't complicated, just a little illogical until you get to grips with css and how it applies to layout...

providing details on the layout you want could be a big help.
Also, is there a particular reasoning behind this.
Apparently, after a few studies, the general consensus is that it makes little difference for Accessibility issues.
I have no idea on the SE side though... not without a straight comparison.

Back to top

#3 tamecrow

Ready To Fly Member

Members
36 posts

Posted 15 October 2007 - 05:21 AM

We have a header include, left menu include, content div, right menu include, and footer include in our code at the moment (in that order).

We'd like the content div to come first, but don't mind in which order the others are placed.

Back to top

#4 tamecrow

Ready To Fly Member

Members
36 posts

Posted 15 October 2007 - 06:02 AM

I've done it! Well, almost - going to try to get the header positioned after the content in the code too.

<!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" xml:lang="en">

<head>
<title>Example 4: Negative Margins</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 

<style type="text/css" media="screen">
/*<![CDATA[*/
#wrapper {
	background: #f1f2ea url(background.gif) repeat-y right;
	width: 800px;
	margin: 0 auto;
}
#header {
	background: #d7dabd;
	width: 800px;
	margin: 0 auto;
}
#container {
	width: 800px;
	background: #f1f2ea url(background.gif) repeat-y right;
	float: left;
	margin-right: -200px;
}
#content {
   width: 400px;
	background: #f1f2ea;
	margin-right: 200px;
	margin-left: 200px;
}
#leftbar {
	width: 200px;
	float: left;
	margin-left: -600px;
}
#sidebar {
	width: 200px;
	float: right;
}
#footer {
	background: #d7dabd;
	width: 800px;
	margin: 0 auto;
}
h1 {
	margin-top: 0;
}
.last {
	margin-bottom: 0;
}
.clearing {
	height: 0;
	clear: both;
}
</style>
</head>

<body>
<div id="header">header</div>

<div id="wrapper">
	<div id="container">

		<div id="content">
			<h1>content</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
			<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
		</div>
	</div>
	<div id="leftbar">

		<h1>leftbar</h1>
		<ul>
			<li>link one</li>
			<li>link two</li>
		</ul>
	</div>
	<div id="sidebar">

		<h1>sidebar</h1>
		<ul>
			<li>link one</li>
			<li>link two</li>
		</ul>
	</div>
	<div class="clearing"> </div>

</div>

<div id="footer">footer</div>

</body>
</html>

Seems to work fine in both Firefox and IE7, but I don't have IE6 here to test. Can someone who has IE6 take a look for me please? Any other problems I've not spotted?

Back to top

#5 Autocrat

Sonic Boom Member

1000 Post Club
1521 posts

Posted 15 October 2007 - 06:24 AM

Is there not a link to use?
Browsing a local page can show differently to a hosted page (no idea why... something to do with caching I think).

For the header, so long as you know the height... simply pad/margin the top of your content, then postion absolutely the header.

Please be careful though, as in my view, you are re-organising a book... and putting the cover and content sections after the story/content.

Further, I've never seen actualy proof that this is better than the normal approach... though I may have missed it if it is a recent confirmation

Best of luck, and let us know if it seems to pay off (Ican see some designs would be a nightmare to so this with!).

Edited by Autocrat, 15 October 2007 - 06:24 AM.

Back to top

#6 fisicx

Sonic Boom Member

1000 Post Club
1821 posts

Posted 15 October 2007 - 06:49 AM

Agree with autocrat, I can actually see the need to do this. Remember the golden rule: write for people not search engines. By changing the logical structure you are reducing the usability of the page. Try looking at the page in accessibility mode (using opera) and it all falls to pieces.

Back to top

#7 Autocrat

Sonic Boom Member

1000 Post Club
1521 posts

Posted 15 October 2007 - 07:09 AM

I have seen studies done where the result of having Nav after content made little to no difference to those used to using alternative/assitive technologies... but to new users, it's a pain.

Your choice though, as to whether you go with the info from these small tests, (I've never seen a "real sized" version done - only ever a max of 20).

Still, let us know how it goes.