Move a CSS based menu to the bottom

[colombian]

Is there a way to put the list based menu AFTER your main content (even though it shows up at the top of the screen?)

 

A little sample in case it's not clear:

<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>

<h1>Want this above the CSS list</h1>

 

I want the main content to be above, for accessibilty and SEO reasons.

 

But I still want the drop down menu to show on top of the screen. Is this possible?

 

Thank you.

 

[ryanh_106]

Depends how you want your site to look and how you want the menu to be positioned.

 

You could quite easily put the menu in a div and use the CSS positioning attributes to specify where on the page you want it to appear, but you would have to provide a little more information for us to be able to go into any more detail than that.

 

Ryan

[colombian]

The menu would be in a div. I was thinking center aligned, between the title of the page and the main content.

 

So in theory, I could use absolute positioning to move it up. I may give it a try. I do want the code to be able to expand/collapse without problems, so I was a bit hesitant to start using positioning in that way (not very flexible).

 

 

[unidox]

Have you tried cords?

[bronzemonkey]

If you want the menu at the top of the page it isn't very important where the code lies in the markup.

 

- Make sure your container div is "position:relative".

- You can then either choose to wrap the list in a div, which you then give an id/class, or give an id/class to the list.

 

You can then use css to "position:absolute" to place the menu within the container. So it might look something like this:

 

ul#nav {
position:absolute;
top:0;
right:0;
list-style:none;
margin:0;
padding:0;
width:700px;
height:50px;}

 

With this you can move the menu to any location within the container div irrespective of the where the code for the menu appears in the markup.

[colombian]

The top of the page is easy, because of the absolute position.

But the menu would reside after the header (logo + other things) from the page.

And since I typically let the height and width as flexible/fluid em based, then absolute positioning becomes pretty much impossible.

 

Maybe I'll redesign so the menu remains at the very top, but that seems awkward. Maybe just attempt to fix the height of the header, and use different coordinates for the position.

 

Thanks.

[ToonMariner]

absolute positioning is teh key here - you can just set the 'top' to be the height of the header element then it will appear below it...

 

this may be useful http://www.barelyfitz.com/screencast/html-training/css/positioning/[/ul]