17 replies [Last post]
ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 2 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Hi,

I'd like to have my menu showing on the top of the page, however...

I'd like to have the menu code at the bottom of the page out of the way fo spiders.

Is there a way to do this in CSS. I thought perhaps a layer would do it, but it appears to be in the same place in the source file.

Any suggestions?

Bulldog

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Menu at Top - Menu Code at Bottom?

Yes

Have your main content first but give it enough clearance at the top for the menu (such as empty padding divs).

Put the menu at the bottom with position:absolute; top:0; z-index:1; overflow:hidden and it should slide into place.

Trevor

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 2 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Menu at Top - Menu Code at Bottom?

Yep, it works ... sorta ....

Slides right into place ... but...

In the source code on the page - the code is in the top position right were the menu is displayed. So it is on the top, where the menu is and the first thing the spider will see. Was hoping that I could have the code at the bottom so it would be the last thing the browser would see.

I guess there may be no way to have the code at the bottom and display at the top.

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Menu at Top - Menu Code at Bottom?

Hi

Take a gander at the default code this new tool of mine makes (I don't make any money out of this, so it isn't spamming, is it?). It has the content in this order:

Main Content
Left Column
Right Column
Header
Footer

Pagemaker Tool

You need to click the Pagemaker Tool button on the right, scroll to the bottom of the form and click show me. You NEED to zipped up css file to get proper display, but you'll see how it works by messing around! It's not a released and fully tested thing, but it seems Ok so far.

Trevor

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 2 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Menu at Top - Menu Code at Bottom?

Cool Tool

Getting pretty fancy

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Menu at Top - Menu Code at Bottom?

ITWeb wrote:
Cool Tool

Getting pretty fancy

But did you see how the header worked?

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 2 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Menu at Top - Menu Code at Bottom?

:oops:

Nope, will look.
Got caught up in the tool.

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 2 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Menu at Top - Menu Code at Bottom?

Very Cool.

The entire header is at the bottom of the code.
Very Very Cool.
Didn't see how you did it yet, but obviously works!

Very Very Very Cool.
that is the ticket!

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 2 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Menu at Top - Menu Code at Bottom?

I notice that you used the faux column approach to set equal length columns. I never know how long a page is going to be in advance so I used the javascript approach.

What are your feelings on this. And, does it allow me to get rid of the full length middle column?

Great notation =D>
I may not fully understand it, but it will surely help me get there.

Bulldog

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Menu at Top - Menu Code at Bottom?

Hi

The code there doesn't know how long the page is either. It uses various hacks aorund height 100% to fake a full height page, with no js.

I would make a single column page (switch off the sidebars) to see slimmer code that still has the header and footer.

Trevor

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 2 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Menu at Top - Menu Code at Bottom?

Trevor,

Your layout is almost identical to mine which is great.

I use a CMS system to feed almost all blocks including the footer and header. As all articles are different lengths, the js approach seems to work well, but if you feel your methodology is better suited to the faux columns I can switch.

Let me know what you think. The only issue I know of with the JS approach is the 1% or so that have it turned off. But, then I don't know much when it comes to CSS. So maybe JS is not a good way to go.

Bulldog

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Menu at Top - Menu Code at Bottom?

ITWeb wrote:
Let me know what you think. The only issue I know of with the JS approach is the 1% or so that have it turned off.

Obviously stats can be misleading sometimes, but W3Schools has that figure at 10-11%.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Menu at Top - Menu Code at Bottom?

There is an alternative to faux columns also CSS.

Place the background on each column individually. Give each column a very large padding-bottom value and an equally large negative margin-bottom value.

e.g.

#col_left, #col_middle, #col_right {
padding-bottom: 32000px;
margin-bottom: -32000px;
}

Full details can be found at Position Is Everything

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 2 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Menu at Top - Menu Code at Bottom?

The no javascript numbers I've seen are around 5%.
So if I used it, about 5% would have uneven columns.

Not the end of the world. But, purely CSS should be better. I've seen the above option. Something odd about having to do that with large numbers.

But, it is worth a shot. Trever, I guess I would still delete the middle full length column if I used it as faux images would no longer be required. Do I understand this correctly?

Bulldog

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Menu at Top - Menu Code at Bottom?

ITWeb wrote:
Something odd about having to do that with large numbers.

Not odd, it makes sense. It works by making the content+padding unfeasibly large while keeping the content & outer width (content+padding+margins) normal. So the element's outer border is in the same position but the background extends for an additional 32,000 pixels. Which means the usual blank space in layouts with multiple columns of unequal heights is no longer blank space, but filled with the columns background colour/image.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Menu at Top - Menu Code at Bottom?

ITWeb wrote:
Trever, I guess I would still delete the middle full length column if I used it as faux images would no longer be required.

Hi, the color for the middle column isn't in the middle column! The middle column div is for content only!

I'm working today (snowed in, work (a school) closed) on implementing that margin and padding trick to get round another problem I have anyway.

Trevor

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 2 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

Menu at Top - Menu Code at Bottom?

Trevor,

Seems I was not successful with the menu.
Worked just fine but then ...
not visiable online.

Let me know if you see anything odd...

Here's my CSS and layer code from the html

#menutop {
height: 44px;
width: 750px;
margin-top: 118;
margin-right: auto;
margin-bottom: auto;
margin-left: 0px;
background-color: #EEEEEE;
float: left;
position: absolute;
z-index: 1;
left: 0px;
top: 118px;
right: auto;
bottom: auto;
visibility: visible;
overflow: visible;

HTML

at the bottom of the page within body calls a CMS page object

<div id="menutop">
<? $headline=500; include "object/show.php";?></div>

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Menu at Top - Menu Code at Bottom?

Hi

I would have to look at a live page to see the problem. However, margin auto's don't work when you have an abs pos div. You have to make an abs pos div with 100% width, and put the margined and width set div inside!

Like this, for example:

#header{
  z-index:1;
  position:absolute;
  top:0px;
  left:0;
  width:100%;
  height:72px;
  overflow:hidden;
}
#header-inner{
 width:780px;
 margin:auto;
overflow:hidden
}

....

<div id="header">
  <div id="header-inner">
	<div id="nav">
	  is your nav
	</div>
  </div>
</div>

Trevor