The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Conflict with Nav Bar(JS/CSS) on HTML(PHP) page
Minddemon316
post Dec 23 2009, 11:43 AM
Post #1





Group: Members
Posts: 8
Joined: 23-December 09
Member No.: 10,668
Website: http://collardrealty.com/
Hello. I am trying to impliment this style of a menu on a webpage at the location shown at the link above. When I originally just placed the JS/HTML in the correct table/section for the page, it just put the menu at the very top of the page. After doing my best to look up syntax, etc for CSS, I figured out a way using positioning code(shown below top/left) to move the menu into place, "on top" of the rest of the elements of the page. Apparently however, the height(thickness) of the actual menu bar (23px, shown below also in code), remains at the top, as a blank spacer, pushing the entire website down 23px. Is there anyway to make it positioned where I have it now, without having an extra space at the top of the page?
Thanks for all the tips.
You can just view source the page, but I will also include the coding for the menu area below the CSS just in case.

CSS Styling Sheet(dedicated to Menu):
CODE
.mynavbar {
    position: relative;
    top:165px;
    left:167px;
  width: 100%;
  height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
  margin: 0; border: 0; padding: 0;
  background-color: #000000;

}


a.navbartitle {
  display: inline;
  float: left;
  color: white;
  background-color:  #000000;
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 0; border: 0; padding: 0;
  line-height: 23px; /* corresponds to 'top' value of .submenu below */
  text-align: center;
  text-decoration:none;
}
a.navbartitle:hover {
  background-color: #D5D5D5;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 102px; }
#t4 { width: 102px; }
#t5 { width: 180px; }
/* We just specify a fixed width for each menu title. Then, down below we specify
    a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
    Using these fixed values isn't as elegant as just letting the text of each
    menu title determine the width of the menu titles and position of the submenus,
    but we found this hardwired approach resulted in fewer cross-browser/cross-OS
    formatting glitches -- and it's pretty easy to adjust these title widths and the
    corresponding submenu 'left' positions below, just by eyeballing them whenever
    we need to change the navbar menu titles (which isn't often). */

.submenu {
    position:absolute;
  z-index: 2;
  top: 23px; /* corresponds to line-height of a.navbartitle above */
  padding: 0; margin: 0;
    width:166px; /* If adjust this, then adjust width of .submenu below a too */
    color: white;
    background-color:  #D5D5D5;
    border: 1px solid #447755; /* box around entire sub-menu */
  font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
    font-size: 11px;
}

Menu.php(This is a serverside include that is at the beginning of the php coding of every actual page. There used to be links at the top, that were image buttons, but unfortunately, part of the banners were used when the buttons were cut, and I do not have access to the original layout. So I left the images, and removed the URLS, and placed the JS/CSS Nav bar on top of the buttons. A sample of what the button image looks like is below first, then the coding.

IPB Image
As you can see, the upper portion of the "button" is the bottom part of the header, so thats why I left those in the coding.

CODE
<html><!-- #BeginTemplate "/Templates/Realtor.dwt" -->
<head>
<!-- #BeginEditable "doctitle" -->
<title>Collard Realty</title>
<!-- #EndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="realtor-style.css" type="text/css">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#000000" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('Buttons/homeov.gif')">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="129" valign="top">
  <tr>
    <td height="8" background="images/Header1ccc_topx.jpg"><img src="images/Header1ccc_top.jpg" width="961" height="130"></td>
  </tr>
  <tr>
    <td height="9" background="images/Header1ccc_bottomx.jpg"><img src="Buttons/Header_Button1.jpg" width="174" height="30"><img src="Buttons/Header_Button_Home.jpg" width="50" height="30" border="0"><img src="Buttons/Header_Button_Search.jpg" width="86" height="30" border="0"><img src="Buttons/Header_Button_Featured.jpg" width="102" height="30" border="0"><img src="Buttons/Header_Button_Buyers.jpg" width="51" height="30" border="0"><img src="Buttons/Header_Button_Sellers.jpg" width="50" height="30" border="0"><img src="Buttons/Header_Button_Relocation.jpg" width="68" height="30" border="0"><img src="Buttons/Header_Button_Links.jpg" width="104" height="30" border="0"><img src="Buttons/Header_Button_Calculator.jpg" width="74" height="30" border="0"><img src="Buttons/Header_Button_Contact.jpg" width="104" height="30" border="0"></td>

<!-- ############### #### Navigation Bar #### ############### -->

<!-- Link to styles used for our Navigation Bar -->
<link href="SimpleNavBarStyles.css" rel="stylesheet" type="text/css">

<!-- Link to a file with couple simple JavaScript functions used for our Navigation Bar -->
<script src="SimpleNavBarScripts.js" language="JavaScript" type="text/javascript"></script>


<!-- main nav bar titles -->
<!-- Note how the the closing angle bracket of each </a> tag runs up against the next <a> tag,
      to avoid leaving a gap between each menu title and the next one. -->
      
<!-- REPLACE each "placeholder.html" URL below with the specific page you want the user
      to go to when the given menu title is clicked. For example, the first link below
      is for the "Home" menu title, so you'd probably replace the first URL with index.html. -->

<div class="mynavbar">

<a class="navbartitle" id="t1" href="index.php"
      onMouseOut="HideItem('home_submenu');"
      onMouseOver="ShowItem('home_submenu');"
    >Home</a
><a class="navbartitle" id="t2" href="placeholder.html"
      onMouseOut="HideItem('buyers_submenu');"
      onMouseOver="ShowItem('buyers_submenu');"
    >Buyers</a
><a class="navbartitle" id="t3" href="placeholder.html"
      onMouseOut="HideItem('sellers_submenu');"
      onMouseOver="ShowItem('sellers_submenu');"
    >Sellers</a
><a class="navbartitle" id="t4" href="placeholder.html"
      onMouseOut="HideItem('properties_submenu');"
      onMouseOver="ShowItem('properties_submenu');"
    >Properties</a
><a class="navbartitle" id="t5" href="placeholder.html"
      onMouseOut="HideItem('community_submenu');"
      onMouseOver="ShowItem('community_submenu', 't5');"
    >Community Links</a>


<!-- REPLACE each "placeholder.html" URL below with the specific page you want
      the user to go to when the given submenu item is clicked.  -->

<!-- Products sub-menu, shown as needed  -->
<div class="submenu" id="home_submenu"
    onMouseOver="ShowItem('home_submenu');"
    onMouseOut="HideItem('home_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="index.php" class="submenlink">Home</a></li>
      <li><a href="contact.php" class="submenlink">Contact</a></li>
      <li><a href="aboutus.php" class="submenlink">About Us</a></li>
      <li><a href="faq.php" class="submenlink">FAQ Page</a></li>
      <li><a href="Testimonials.php" class="submenlink">Testimonials</a></li>
      <li><a href="ouragents.php" class="submenlink">Meet Our Agents</a></li>
    </ul>
  </div>
</div>

<!-- Services sub-menu, shown as needed  -->
<div class="submenu" id="buyers_submenu"
    onMouseOver="ShowItem('buyers_submenu');"
    onMouseOut="HideItem('buyers_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="home-search.php" class="submenlink">Home Search</a></li>
      <li><a href="home-relocation.php" class="submenlink">Relocation</a></li>
      <li><a href="mortgage-calculator.php" class="submenlink">Calculators</a></li>
      <li><a href="investors.php" class="submenlink">Investors</a></li>
  </div>
</div>

<!-- Fun Stuff sub-menu, shown as needed  -->
<div class="submenu" id="sellers_submenu"
    onMouseOver="ShowItem('sellers_submenu');"
    onMouseOut="HideItem('sellers_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="real-estate-sellers.php" class="submenlink">Sellers</a></li>
      <li><a href="placeholder.html" class="submenlink">LINK</a></li>
      <li><a href="placeholder.html" class="submenlink">LINK</a></li>
    </ul>
  </div>
</div>

<!-- About Us sub-menu, shown as needed  -->
<div class="submenu" id="properties_submenu"
    onMouseOver="ShowItem('properties_submenu');"
    onMouseOut="HideItem('properties_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="featured-real-estate.php" class="submenlink">Featured</a></li>
      <li><a href="home-search.php" class="submenlink">MLS Search</a></li>
      <li><a href="placeholder.html" class="submenlink">Short Sales</a></li>
      <li><a href="placeholder.html" class="submenlink">Rentals</a></li>
      <li><a href="placeholder.html" class="submenlink">LINK</a></li>
     </ul>
  </div>
</div>

<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed  -->
<div class="submenu" id="community_submenu"
    onMouseOver="ShowItem('community_submenu');"
    onMouseOut="HideItem('community_submenu');">
  <div class="submenubox">
    <ul>
      <li><a href="real-estate-links.php" class="submenlink">Community Links</a></li>
       <li><a href="placeholder.html" class="submenlink">LINK</a></li>
   </ul>
  </div>
</div><!-- end of sub-meus -->

</div>
</link>
<!-- ################## end of Navigation Bar ################### -->


  </tr>
  <tr>
    <td height="294">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="120">
        <tr>
          <td height="336" valign="top" width="17%">
            <p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','Buttons/homeov.gif',1)">
              </a><img src="images/Header2ccc.jpg" width="179" height="213"><br>
            </p>
            <ul>
              <li><b><a href="index.php">Home</a></b></li>
              <li><b><a href="home-search.php">Home Search</a></b></li>
              <li><b><a href="featured-real-estate.php">Featured Homes</a></b></li>
              <li><b><a href="real-estate-buyers.php">Buyers</a></b></li>
              <li><b><a href="real-estate-sellers.php">Sellers</a></b></li>
              <li><b><a href="home-relocation.php">Relocation</a></b></li>
              <li><a href="real-estate-links.php"><b>Community Links</b></a></li>
              <li><a href="mortgage-calculator.php"><b>Calculators</b></a></li>
              <li><b><a href="faq.php">FAQ Page</a></b></li>
          <li><b><a href="contact.php">Contact Us</a></b></li>
          <li><b><a href="aboutus.php">About Us</a></b></li>
          <li><b><a href="testimonials.php">Testimonials</a></b></li>
          <li><b><a href="investors.php">Investors</a></b></li>
          <li><b><a href="ouragents.php">Meet Our Agents</a></b></li>
          <li><b><a href="virtualtours.php">Virtual Tours</a></b></li>
          <li><b><a href="propmanage.php">Property Mgt</a></b></li>
            </ul>
            </td>
          <td height="336" bgcolor="#000000" valign="top" width="67%">
            <table width="100%" border="0" cellspacing="4" cellpadding="4">
              <tr>
                <td><!-- #BeginEditable "Body" -->
                  


This post has been edited by Minddemon316: Dec 23 2009, 11:45 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Dec 23 2009, 12:42 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
That looks like the default margin around your layout table, or possibly the default margin/padding around the body element.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 23 2009, 11:34 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
Is this fixed now?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 01:50 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC