Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Positioning Content At The Start Of The Code


  • Please log in to reply
6 replies to this topic

#1 tamecrow

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 :)

#2 Guest_Autocrat_*

Guest_Autocrat_*
  • Guests

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.

#3 tamecrow

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.

#4 tamecrow

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?

#5 Guest_Autocrat_*

Guest_Autocrat_*
  • Guests

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.


#6 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1884 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.

#7 Guest_Autocrat_*

Guest_Autocrat_*
  • Guests

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.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users