web design/css help

[Mich]

*waves at everyone* I'm going to be really bad at explaining this...

My site menu goes horizontally across the bottom of my page under the content. I want the menu to be in the same location on every page.

Is there a way to set a height on a container to get this effect? I'm having zero luck I want a static container size. The width is set and works fine but on pages with less content the container height follows the text causing my menu to jump up and down on the pages when going from one to the next.

[arraknid]

Hi Mich,

It's all very clear. Not sure what software you are using, but whenever I need to do the same thing, I set up the index page with 2 frames - one large page-sized one with a smaller menu-sized one below. The largest one will be where the web pages appear and the menu one stays static. The same method is often used for side menus.

This is a quick tutorial on frames in Dreamweaver, but if you are using something else, it should translate OK.

[MrDarn]

An example of the code your using may help, and, are you applying this code to the .html file or the stylesheet?

Are you actually using footer code? or just trying to fashion a menu manually?

If your like me, you'll edit it all manually, and not use programs like dreamweaver, but then again, the sites i design are VERY basic!

[Mich]

Thanks for the reply arraknid. I'm not using frames though.

*laughs* you're almost right darn. I use dreamweaver these days. Only in the code layout of course. It's much easier to read the code, dreamweaver colours it for you! Still the same amount of typing and browser refreshing though

I found a tutorial that helped here

long story short... I was trying to set a div height then place everything below that specific div. You need to set a position on your container div, then you can set positions on the divs within to be relative to it.

like so:

#wrapper {
	text-align: justify;
	width: 750px;
	height: 600px;
	margin: 0 auto;
	position: relative;
}
#submenu {
	width: 100%;
	position: absolute;
	bottom: 80px;
}
#nav {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 50px;
}
#footer {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 0;
}

then the html:

<div id="wrapper">
<div id="submenu"></div>
<div id="nav"></div>
<div id="footer"></div>
</div>

[arraknid]

Way too complicated. That's why they came up with WYSIWYG!