Horizontally align my website

[JonFitzgerald]

Hi, I am a new member and this is my first post. I learned web design in college a few years back, but never took it on as a profession. I have made a website for my parent's business located at <edited>. There are a few flaws to my site.

The first is that all of the navigation in my site was written in javascript. It was the only thing that I could think of at the time when I wrote it. FUNCTIONALITY IS GREAT, but Google and other search engines use text based browsers to cache pages. For this reason none of my navigation appears to their bots. In an attempt to remedy this I have submitted a sitemap to Google. It is working, but too slow really. Google is cacheing like 5 pages a month. My site has close to 100 pages and I will probably add close to 5 pages a month in the future.

Is there a way for me to improve my visibility to search engines without changing my navigation?

The second flaw is: I originally designed the site on a 600X800 resolution. I may in the future change this, but for now I am interested in Horizontally aligning my site. A friend of mine suggested the following code in CSS, but I cannot get it to work. Any help would be much appreciated.

body {
width: 600px;
height: auto;
margin: 0 auto;
padding: 0;
background-color: #ffffff;
text-align: center;
}

Thanks,
Jon Fitzgerald

<Sorry, no specifics.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 8:17 pm (utc) on Feb. 16, 2007]

[londrum]

hello. i would just jump in at the deep end and change your navigation mate. get rid of the javascript. you'll probably have to do it in the end anyway so you may as well get it done.

you could try adding a normal sitemap to get it indexed. i don't mean the google one -- that is good -- but a normal HTML one, and link to it from every page on the site.

you could also try putting text links to the main pages (preferably the ones with links to all the other pages) at the bottom of your interior pages. you can probably do it in such a way that it doesn't interfere with the design too much.

...but all the time you'd spend doing that, would probably be better used on just changing the javascript navigation. you'd get better results in the long run.

[JAB Creations]

When you say horizontally aligning your site are you saying that the appearance is basically 800px wide with nothing on the right side for example?

Aligning depends on whether you're talking about a block or inline level element. Block level elements include div, form, fieldset, h1, h2, h3, h4, h5, h6, table, and a few others. Inline elements include abbr, img, input, label, p, span, textarea, and a few others.

When I want to align inline elements I usually just set the text-align in the first parent block element. Example...

<table>
<div>
<span></span>
</div>
</table>

The first parent is the div (table would be the second parent). Not sure the exact standard of referencing as far as numerical order goes but parent/child element is standard referencing terminology.

Anyway if you want to align a block element which I what I think you want to do then it gets slightly tricky. You have to have some understanding of the CSS box model.

Centering a block level element

div.example {
margin-left: auto;
margin-right: auto;
}

Older versions of IE may have difficulty understanding this. I use IECCSS to include an additional stylesheet and I think off the top of my head that margin-left: 15% will center block level elements in IE 4/5. With IECCSS you must include the "patch" stylesheet in addition to your normal CSS but it must appear after your normal CSS and you only have to add fixes and not the same code as the fixes will simply override your main CSS while still using the rest of it.

Hope this helps but if not let me know.

- John

[rocknbil]

Is there a way for me to improve my visibility to search engines without changing my navigation?

Welcome aboard JonFitzgerald - YES there are any number of a hundred ways to get around this. It's going to take some learning on your part, mostly getting the CSS to work for you, but once you get your head around it it's going to benefit you immensely.

I am presuming you are using one of those old scripts that does a document.write() to create the menu. Not only is the "the problem" for search engines, it is also quite slow if your menus get large.

You do not need to COMPLETELY dispense with Javascript, but you DO want to get rid of links created with document.write(). A quick start is to Google for the "Suckerfish" menus for a concept. These menus use divs actually in the document and hide and show them based on the mouseover state, and use only a few lines of Javascript. The important part here is the links are actually part of the document and can be read by search engines.

Another and even better approach is CSS only menus [webmasterworld.com] thx to cmarshall :-)

Both of these may present you with some late nights and a painful learning curve, but there are many wizards here to help you out as you progress.

About your width issue - It is going to be much easier for you to address this NOW, as you remove the menus. All you'll be changing is the width of your overall layout. 600px leaves a LOT of blank real estate on most monitors, even if you center it. Instead of locking in a pixel width, I would explore a percentage and a max width for your overall layout. Also I may be wrong here - but you don't set your layout width on the body. your layout is contained in the body.

body,html { background-color: #ffffff; font-family: Arial, helvetica, sans-serif; }

#main {
margin: 0 auto 0 auto; /*top, right, bottom, left
width: 95%;
max-width: 1040px;
}

where #main is the outer container of your layout, a div or - like it or not, it works for many sites - a table:

<div id="main">

<h1>my page</h1>
<p>My page content</p>

</div>

<table id="main" cellpadding="0" cellspacing="0" border="0">
<tr><td>
<h1>my page</h1>
<p>My page content</p>
</td></tr>
</table>