6 replies to this topic

[Katzekks]

I'm stumped trying to put together a navigation bar for my page.

I want a horizontal menu bar across the top that stays stationary when the rest of the page scrolls, so I was using two different frames. But this menu also has drop down options when it is scrolled over and I want these drop down options to overlap the lower frame. Can I layer my frames somehow?

I've been stuck on this for weeks. Thanks!

[WingedPanther73]

Don't use frames. I would use a div container with position:fixed. That should do a nice job of moving it for you.

I used frames about 8 years ago for a site, and it did the job well. At the time, I didn't understand why people were so against frames and pro-table. The reality is this: frames generally don't do the job well.

[Katzekks]

Thanks for the hint!

Edited by Katzekks, 18 August 2009 - 08:06 PM.
fixed the problem

[Katzekks]

I managed to fix the previous problems I had. The menu bar works just like I wanted it to! The very last problem I have is that it I've got the menu bar in a combination of a table with lists. On mouse-over, the further options drop down. The background color of the table is black and non-transparent, like I want it to be. However, when the options drop down, they are transparent and drop over the lower page.

How can I give this mouse-over options a non-transparent black background?

Thanks so much! This is my style code... I assume I need another line in there somewhere, but I grabbed it from a temp site and worked around with it a little. Unfortunately I'm not good enough at this to be able to figure out what I need to put where.

<style type="text/css">

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }

li {
  float: left;
  position: relative;
  width: 13em;
  text-align: center;
  padding: 1;
  }

li ul {
  display: none;
  position: absolute; 
  top: 100%;
  left: 0;
  padding: 10;
  }

li > ul {
	top: auto;
	left: auto;
	}

ul li a {
	display: block;
	text-decoration: none;
	background: #fff
	padding: 8px;
	}

li:hover ul { display: block; }

clear: left

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</style>

Edited by WingedPanther, 19 August 2009 - 07:31 AM.
add code tags (the # button)

[WingedPanther73]

It will depend on how your menu code actually works. I can't tell from your description. Also, it looks like you have VBScript in your Style code. That won't work.

Also, please use code tags (the # button) when posting code.

[Katzekks]

Hmm. Well, unfortunately I don't know 100% what I'm actually doing. I'm just working off of what I've tried to teach myself in the last week. I usually work with pretty simple work.

Right now I assume that I want two different div containers. I need my navigational bar and then the rest of the page. I got everything to work perfectly on my home page, but it didn't work so nicely when I got to the more complicated pages.

The menu bar, to try to explain it a little better, is from code I took from a tutorial. Visually, it's a horizontal bar with six options. Scrolling over the options drops down between 0 and 3 links that take you to other pages. I did this by creating a horizontal list with the code I posted earlier. As I said, this works wonderfully in my home page which is just a few paragraphs.

My problem comes in some of the other pages which have lists already. I want these lists to be vertical and have 1em spacing between the bullet points. I also want them to have bullet points where my menu does not.

Here's where I think it should be pretty easy. From what I was understanding about div containers, I should just create two, right? A "div id = menu" and a div id="main" and label these two sections. Then I can write specific code for the lists of each one. That was my basic assumption anyway, but I guess I don't know what I'm doing enough to figure out why this doesn't work.

I've also had some issues figuring out how to style the div containers. If my id's were main and menu would I do

div.main {
  li {margin: 1em 0}
  }

or

#main {
  li {margin: 1em 0}
  }

Again, the styling for the menu was posted earlier.
I guess the main question is, since I can get the menu to work on a page with out lists, how do I style vertical lists with spacing between them?

Sorry, I wish I had a better idea what I was talking about, but maybe if I did this would be obvious to me, too...

[WingedPanther73]

Without seeing some HTML code, we can't help you.