Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jun 2010
    Location
    Regina, Saskatchewan, Canada
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Navigation/Dropdown Menu Issues

    Well first off I've got three problems,

    1) Fixed.
    -------------------------------------------------------------------------------------------------------------------------
    2) Fixed, New problem below.
    Alright, well I figured out the wrapper code, but it didn't totally fix the problem, it turned into this.



    It currently looks like figure 1, but I want it to look like figure 2, is there any way I can add the two sides to the navbar?
    -------------------------------------------------------------------------------------------------------------------------
    3) When I put my mouse over the Announcements header in the left example, I DO NOT want it to turn a transparent white, but when I select the other things like in the second example, I DO want it to turn white, is there anyway I can make it so the Announcements heading doesn't turn to the transparent white if I hover my mouse over it?





    HTML Code
    -Ignore the Edit, and the Placeholder.html text under each option.
    Code:
    <body background="background001.png"> 
    
    
    <div id="wrapper">
    
    <link href="Nav_Bar_Styles.css" rel="stylesheet" type="text/css">
     
    <script src="Nav_Bar_Scripts.js" language="JavaScript" type="text/javascript"></script>
    
    <div class="mynavbar">
     
    <a class="navbartitle" id="t1" href="placeholder.html"
          onMouseOut="HideItem('home_submenu');" 
          onMouseOver="ShowItem('home_submenu');"
        >Home</a>
    <a class="navbartitle" id="t2" href="placeholder.html"
          onMouseOut="HideItem('forum_submenu');" 
          onMouseOver="ShowItem('forum_submenu');"
        >Forum</a>
    <a class="navbartitle" id="t3" href="placeholder.html"
          onMouseOut="HideItem('stats_submenu');" 
          onMouseOver="ShowItem('stats_submenu');"
        >Stats</a>
    <a class="navbartitle" id="t4" href="placeholder.html"
          onMouseOut="HideItem('community_submenu');" 
          onMouseOver="ShowItem('community_submenu');"
        >Community</a>
    <a class="navbartitle" id="t5" href="placeholder.html"
          onMouseOut="HideItem('usercp_submenu');" 
          onMouseOver="ShowItem('usercp_submenu', 't5');"
        >User CP</a>
     
    <div class="submenu" id="home_submenu" 
        onMouseOver="ShowItem('home_submenu');" 
        onMouseOut="HideItem('home_submenu');">
      <div class="submenubox">
        <ul>
          <li><a class="head">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
        </ul>
      </div>
    </div>
    
    <div class="submenu" id="forum_submenu" 
        onMouseOver="ShowItem('forum_submenu');" 
        onMouseOut="HideItem('forum_submenu');">
      <div class="submenubox">
        <ul>
          <li><a class="head">Announcements</a></li>
          <li><a href="placeholder.html" class="submenlink">News and Updates</a></li>
          <li><a href="placeholder.html" class="submenlink">Features</a></li>
          <li><a class="head">Discussions</a></li>
          <li><a href="placeholder.html" class="submenlink">Off-topic Discussion</a></li>
          <li><a href="placeholder.html" class="submenlink">General Discussion</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a class="head">Content</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a class="head">Guides</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
     	</ul>
      </div>
    </div>
    
    <div class="submenu" id="stats_submenu" 
        onMouseOver="ShowItem('stats_submenu');" 
        onMouseOut="HideItem('stats_submenu');">
      <div class="submenubox">
        <ul>
          <li><a class="head">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>>
          <li><a class="head">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Gallery</a></li>
          <li><a href="placeholder.html" class="submenlink">File Download History</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>    
          <li><a href="placeholder.html" class="submenlink">All files</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a class="head">Info</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
        </ul>
      </div>
    </div>
     
    <div class="submenu" id="community_submenu" 
        onMouseOver="ShowItem('community_submenu');" 
        onMouseOut="HideItem('community_submenu');">
      <div class="submenubox">
        <ul>
          <li><a class="head">Edita></li>
          <li><a href="placeholder.html" class="submenlink">Forum Rules</a></li>
          <li><a class="head">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a class="head">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a class="head">Tools</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
         </ul>
      </div>
    </div>
     
    <div class="submenu" id="usercp_submenu" 
        onMouseOver="ShowItem('usercp_submenu');" 
        onMouseOut="HideItem('usercp_submenu');">
      <div class="submenubox">
        <ul>
          <li><a href="placeholder.html" class="submenlink">Edit</a></li>
       </ul>
      </div>
    </div>
    </div>
    </div>
    
    
    </body>

    CSS Code
    Code:
    div#wrapper { width: 900px; margin: 0 auto; } 
    
    .mynavbar {
    	position: relative;
      width: auto;
      height: 33px;
      margin: 0; border: 0; padding: 0;
      background-image:url('unselected_nav_bar.png');
    }
    
    
    a.navbartitle {
      display: block; 
      float: left;
      color: white;
      background-image:url('unselected_nav_bar.png');
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      margin: 0; border: 0; padding: 0;
      line-height: 28px;
      text-align: left;
      text-decoration:none;
    }
    a.navbartitle:hover {
      background-image:url('selected_nav_bar.png');
    }
    /* menu title widths */
    #t1 { width: 82px; }
    #t2 { width: 169px; }
    #t3 { width: 79px; }
    #t4 { width: 176px; }
    #t5 { width: 149px; }
    
    .submenu {
    	position:absolute;
      z-index: 2;
      top: 28px;
      padding: 0; margin: 0; 
    	width:180px;
    	color: white;
    	background-image:url('unselected_dropdown_background.png');
    	border: 1px solid #333333;
      font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    * html .submenu { width: 180px; }
    
    #home_submenu {  left: 0px; visibility: hidden;  }
    #forum_submenu {  left: 82px; visibility: hidden;  }
    #stats_submenu {  left: 251px; visibility: hidden; }
    #community_submenu {  left: 330px; visibility: hidden; }
    #usercp_submenu { left: 506px; visibility: hidden; }
    
    .submenu a
    {
      display: block;
      color: #71caef; 
      background-image:url('unselected_dropdown_background.png');
      width: 170px;
      padding: 2px 0px 2px 10px;
      text-decoration: none;
      background-image:url('unselected_dropdown_background.png');
      border-top: 0; border-left: 0; border-right: 0;
    }
    
    
    ul { position: relative; display: block; }
    li { position: relative; display: block; }
    
    .submenubox { 
      margin: 0; padding: 0; border: 0;
    }
    .submenubox ul
    {
      margin: 0; padding: 0; border: 0;
      list-style-type: none;
    }
    
    .submenubox ul li { 
      margin: 0; padding: 0; border: 0;
    }
    
    .submenubox ul li a:link { }
    .submenubox ul li a:visited { }
    .submenubox ul li a:hover
    {
      color: #FFFFFF;
      background-image:url('selected_dropdown_background.png');
      border-bottom: #000000;
    }
    
    a.head {
      display: block;
      color: #FFFFFF;
      background-image:url('unselected_dropdown_background.png');
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      font-weight: bold;
      line-height: 20px;
      text-decoration: none;
    }
    
    body { 
    margin:0px; padding:0px;
    }
    Last edited by Philly100000; 06-22-2010 at 03:26 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Well first off I've got three problems
    If you are looking to get help on your html/css, then you need to show it first. We can't decode an image to generate its corresponding markup. Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    53
    Thanks
    0
    Thanked 6 Times in 6 Posts
    1.
    CSS code:
    body { margin:0px; padding:0px; }

    -------

    2.
    Wrap everything up in a wrapper div, give it an ID.

    CSS code:
    #wrapper_id{ width:900px; margin:0 auto; }
    Last edited by Candan; 06-21-2010 at 10:25 AM.

  • Users who have thanked Candan for this post:

    Philly100000 (06-23-2010)

  • #4
    New Coder
    Join Date
    Jun 2010
    Location
    Regina, Saskatchewan, Canada
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Alright, I added the HTML/CSS to the original post. I also resolved the margins thanks to Candan.
    Although I did not fully understand how to add the wrappers, mainly because when I tryed it, it never worked.
    Last edited by Philly100000; 06-22-2010 at 01:28 AM.

  • #5
    New Coder
    Join Date
    Jun 2010
    Location
    Regina, Saskatchewan, Canada
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Alright, well I figured out the wrapper code, but it didn't totally fix the problem, it turned into this.



    It currently looks like figure 1, but I want it to look like figure 2, is there any way I can add the two sides to the navbar?

    Also I Updated the HTML/CSS into the Original Post again.

  • #6
    New Coder
    Join Date
    Jun 2010
    Location
    Regina, Saskatchewan, Canada
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Could anyone possibly help?

  • #7
    New Coder
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    53
    Thanks
    0
    Thanked 6 Times in 6 Posts
    on your menu bar, resize the image to a 1px image in width.

    Then on the css:
    width:auto;

  • #8
    New Coder
    Join Date
    Jun 2010
    Location
    Regina, Saskatchewan, Canada
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts
    So just make the blue background for the nav bar thing 1px in width, and where do I add that code in the css?

  • #9
    New Coder
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    53
    Thanks
    0
    Thanked 6 Times in 6 Posts
    on your menu bar's css code.
    Or you could put the menu bar outside of your wrapper. Because if the wrapper has a fixed width, the auto wont go further then the wrappers width.
    Last edited by Candan; 06-23-2010 at 09:13 PM.

  • #10
    New Coder
    Join Date
    Jun 2010
    Location
    Regina, Saskatchewan, Canada
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I still don't fully understand what your saying, I have the "width:auto;" in the code below. Where exactly do it put it, I have the css code above in the original post.

    .mynavbar {
    position: relative;
    width: auto;
    height: 33px;
    margin: 0; border: 0; padding: 0;
    background-image:url('unselected_nav_bar.png');
    }

  • #11
    New Coder
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    53
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Try putting your menu bar div outside of the wrapper, the "Width:auto" will only size up to the parent's width(this being the wrapper right now).

  • Users who have thanked Candan for this post:

    Philly100000 (06-24-2010)

  • #12
    New Coder
    Join Date
    Jun 2010
    Location
    Regina, Saskatchewan, Canada
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Alright, that worked, but now it's doing this


    I would asume that I just need to change this code

    Code:
    #home_submenu { left: 0px; visibility: hidden; }
    #forum_submenu { left: 82px; visibility: hidden; }
    #stats_submenu { left: 251px; visibility: hidden; }
    #community_submenu { left: 330px; visibility: hidden; }
    #usercp_submenu { left: 506px; visibility: hidden; }
    It doesn't seem to fix the problem in other sized resolutions, is there any way I can fix that aswell?
    Last edited by Philly100000; 06-23-2010 at 09:45 PM.

  • #13
    New Coder
    Join Date
    Jun 2010
    Location
    Regina, Saskatchewan, Canada
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Any other ways I can fix this?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •