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

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.

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

Cool Tool

Getting pretty fancy

Getting pretty fancy

But did you see how the header worked?

:oops:

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

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!

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

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

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

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

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

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

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.

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

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>

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