Two quesions: Floating DIV, and how to simplify.

J741 · Oct 17, 2005

O.K. I'm creating a simple menu for a web page as a way to learn some of the more interesting DHTML techniques and methods, and also because I didn't like the samples I could find.

First, the resluting menu looks and functions well (animation as desired, but I haven't added functional links yet). It is nicely centered on the page. However, I would like it to stay at the top of the web browser, and have the page contents scroll behind it when the user scrolls through the page contents. Anone know how to do that with the most simplicity?

Second, I have 5 very similar DIV declarations in the BODY of the HTML. Is there a simple way to change this to use less code? Something like a javascript loop to create sequentially numbered elements? Or can the 'onMousOver' and 'onMouseOut' references be added to the STYLE declaration?

Any feedback would be greatly appreciated.

Here's the code so-far:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<HTML><HEAD>
<TITLE>Test Menu</TITLE>

<STYLE type="text/css">
<!--

.MenuContainer
{  position:fixed;  Overflow:visible;  top:0px;  Width:495px;  height:145px;
   border:2px;  padding:0px;  margin:0px;  visibility:visible;
   background-color:transparent;
}

.MenuBanner
{  position:fixed;  overflow:hidden;  width:493px;  height:97px;
   background-color:green;  visibility:visible;  border:0px;
}

.MenuTab
{  position:fixed;  visibility:visible;  overflow:hidden;
   margin:0px;  border:0px;  padding;0px;  float:left;
   width: 98px;  height: 50px;  display:inline;
   background-color: transparent;
   background-image: url(SmallMenuTab.gif);
   background-position: top center;
   color: white;  text-align: center;  vertical-align: bottom;
   font-family:cursive;  font-variant:small-caps;  
   font-weight:bolder;  font-size:100%;
}

.BodyStyle
{  Margin-top:1px;
}

-->
</STYLE>

<SCRIPT type="text/javascript">
<!-- hide script from old browsers
function ActiveMenuButton(ButtonName)
{ ButtonName.style.color='yellow';
  ButtonName.style.fontSize='150%';
  ButtonName.style.backgroundImage='url(LargeMenuTab.gif)'
}

function InactiveMenuButton(ButtonName)
{ ButtonName.style.color='white';
  ButtonName.style.fontSize='100%';
  ButtonName.style.backgroundImage='url(SmallMenuTab.gif)'
}
-->
</SCRIPT>
</HEAD>

<BODY ID="MainBody" CLASS="BodyStyle">

<center><DIV ID="MainMenu" CLASS="MenuContainer">
  <DIV ID="LogoBanner" CLASS="MenuBanner">
     <IMG SRC="CompanyLogo.gif" ALT="Company Logo">
  </DIV>

  <DIV ID="MenuButton1" CLASS="MenuTab"
       onMouseOver=ActiveMenuButton(MenuButton1);
       onMouseOut=InactiveMenuButton(MenuButton1) >
  Menu1
  </DIV>
  
  <DIV ID="MenuButton2" CLASS="MenuTab"
       onMouseOver=ActiveMenuButton(MenuButton2);
       onMouseOut=InactiveMenuButton(MenuButton2) >
  Menu2
  </DIV>
  
  <DIV ID="MenuButton3" CLASS="MenuTab"
       onMouseOver=ActiveMenuButton(MenuButton3);
       onMouseOut=InactiveMenuButton(MenuButton3) >
  Menu3
  </DIV>
  
  <DIV ID="MenuButton4" CLASS="MenuTab"
       onMouseOver=ActiveMenuButton(MenuButton4);
       onMouseOut=InactiveMenuButton(MenuButton4) >
  Menu4
  </DIV>
  
  <DIV ID="MenuButton5" CLASS="MenuTab"
       onMouseOver=ActiveMenuButton(MenuButton5);
       onMouseOut=InactiveMenuButton(MenuButton5) >
  Menu5
  </DIV>
</DIV></center>
</BODY></HTML>

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember

BillyRayPreachersSon · Oct 17, 2005

For the first point: Yes - this is perfectly do-able using CSS. You just have to decide what browsers you want to support at a minimum. There are many examples on the web that work fine in IE5+, and NN7+ / Win... although I've never tried then in a Mac.

For the second point: You should finalise your markup first. Decide if you want people without JavaScript enabled to be able to navigate your site. If you do, you'll need to put some anchor elements in, adding JS programaticallly. If not, then yes - you can do it all with JS. The best place to discuss this would be in the Javascript forum (forum216).

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

ChrisHunt · Oct 18, 2005

You've got a LOT of stuff in there that you don't need. Start simple, add complexity as (and if) you need it. Let's start with the <body> and its contents...

Only put classes and ids in if you need them. You don't need either for the <body> element, since there's only one of them on the page; you rarely need to have both a class and an id for an element; you should avoid presentational markup like <center> and Javascript rollovers are soooo last century.

I'm gonna prune it back radically, and put your menu into a list of links, rather than a pile of <div>s

Code:

<body>
<div id="MainMenu">
  <div id="LogoBanner">
    <img src="CompanyLogo.gif" alt="Company Logo">
  </div>
  <ul>
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
  </ul>
</div>
</body>

Now we can use CSS to style the above, taking out meaningless or redundant rules...

Code:

body {
   margin-top:1px;
}

#MainMenu {
   width:495px;
   border:2px;
   padding:0;
   margin:0 auto;
   text-align: center;
}

#LogoBanner {
   width:493px;
   height:97px;
   background:green;
   border:0;
}

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

#MainMenu li {
   margin: 0;
   padding: 0;
   list-style: none;
   overflow:hidden;
   width: 98px;
   height: 50px;
   float: left;
}

#MainMenu li a {
   display: block;
   width: 100%;  /* i.e. 100% of the <li> size */
   height: 100%;
   background: #ccc url(SmallMenuTab.gif) top center;   
   color: white;
   font-family:cursive;
   font-variant:small-caps;  
   font-weight:bold;
}

#MainMenu li a:hover {
   color: yellow;
   font-size: 150%;
   background-image: url(LargeMenuTab.gif);
}

Note that I've given the menu tabs a background colour as well as an image, this is so that people who have images switched off don't get white text on a white background. Pick a colour for it that approximates to the colour of your image.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

J741 · Oct 18, 2005

That's awesome. I hadn't even thought about using list items (I thought they would always be arranged vertically). That's so much more elegant. And the use of different styles for the different link state is a great way to get rid of the javascript.

Thank you very much.

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Two quesions: Floating DIV, and how to simplify.

J741

Technical User

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

J741

Technical User

Similar threads

Part and Inventory Search

Sponsor