Forum Moderators: not2easy

Message Too Old, No Replies

How to have main text on page come before navigation for rank?

How to have main text on page come before navigation for page rank?

         

danv

6:06 pm on Dec 27, 2005 (gmt 0)

10+ Year Member



I would like to have my home page look better for search engines and I heard that it is a good idea to have main text appear before navigation. So I used a search engine spider simulator to look at my web page to see the order of text that Google sees.

How can I have the main text on my site come before my top navigation and my left navigation menu? Easy with CSS?

My website is:.. ooops

thanks.

<No site specifics, thanks. See TOS #13 [WebmasterWorld.com]>

[edited by: SuzyUK at 1:36 pm (utc) on Dec. 30, 2005]

keno

4:38 am on Dec 31, 2005 (gmt 0)

10+ Year Member



Have a look at other sites on the web and see how they do it.

One method is to use a javascript top menu and also a javascript side menu.

I'm not sure if that's the best way, but it might be something you could look into.

helenp

10:42 am on Dec 31, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I do it with css,
As my columns are absolute and the place to situate them do not depend on order in the script at all, I just put the main div first then the navigation div.
I would not recomend an javascript menu for the searchenginges.

SuzyUK

11:42 am on Dec 31, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



danv.. have you two columns or three (or more?)

it's easy with 2 you just put the content div first and float the two columns in opposite directions whichever way round you want them to appear.. if you have a top menu you can put it last in the source and then position it absolutely as helenp says

with three columns it's still possible either using absolute positioning or some float wrap tricks.

one simple float wrap method works something like..


<style type="text/css" media="screen">
#container {
width: 780px;
margin: 0 auto;
background: #eee;
}

#floatwrap {
float: right;
width: 600px;
}

#content {
float: left;
width: 420px;
background: #fff;
}

</style>
</head>
<body>
<div id="container">

<div id="floatwrap">
<div id="content">main content in here<br />blah blah blah</div>
<div id="right-column">right column content</div>
<!-- close floatwrap --></div>

<div id="left-column">left column content</div>

<!-- close container --></div>

as in you put a wrapper div around the content and right columns and float it to the right which leaves the left column in place, then you float the actual content left inside the float wrapper div which corrects the display order of the right and content columns

Suzy

danv

5:56 pm on Dec 31, 2005 (gmt 0)

10+ Year Member



Thanks.

I don't use absolute positioning. I use 2 columns, where the left column is static and the right column can expand with the screen. Though I would like to force the 2nd column to only shrink to a set pix size of say 400 pix without wrapping horribly. I haven't been able to do this nicely yet. (I think the CSS is getting too messy)

My code is setup like this:

</head>
<body>
<div id="Layer1" style="position:absolute; left:504px; top:123px; width:198px; height:28px; z-index:1"><a href="http://www.<SomeWebsiteHere>.com/archives/" class="style2">Office Activate Web Blog</a> </div>
<div id="content">
<!-- InstanceBeginEditable name="header" -->
<!--#include virtual="/inc/header.inc" -->
<!-- InstanceEndEditable -->
<!-- START HORIZONTAL NAVIGATION -->
<!-- InstanceBeginEditable name="topnav" -->
<!--#include virtual="/inc/top-nav-home.inc" -->
<!-- InstanceEndEditable -->
<!-- END HORIZONTAL NAVIGATION -->
<div class="clear"></div>
<div id="dropshadow"></div>
<!-- START SIDE NAV -->
<!-- InstanceBeginEditable name="sidenav" -->
<!--#include virtual="/inc/home-nav.inc" -->
<!-- InstanceEndEditable -->
<!-- END SIDE NAV -->
<div id="maincontent">
<!-- START CONTENT -->
<br>
<!-- InstanceBeginEditable name="body" -->

thanks.