...
PDA

Navigation/Dropdown Menu Issues

Philly100000
06-21-2010, 02:17 AM
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.

http://i539.photobucket.com/albums/ff352/philly100000/Help-003.png

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?
http://i539.photobucket.com/albums/ff352/philly100000/Help-002.png




HTML Code
-Ignore the Edit, and the Placeholder.html text under each option.
<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


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;
}
abduraooft
06-21-2010, 08:37 AM
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?
Candan
06-21-2010, 10:21 AM
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; }
Philly100000
06-21-2010, 11:55 PM
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.
Philly100000
06-22-2010, 03:13 AM
Alright, well I figured out the wrapper code, but it didn't totally fix the problem, it turned into this.

http://i539.photobucket.com/albums/ff352/philly100000/Help-003.png

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.
Philly100000
06-23-2010, 08:51 PM
Could anyone possibly help?
Candan
06-23-2010, 08:55 PM
on your menu bar, resize the image to a 1px image in width.

Then on the css:
width:auto;
Philly100000
06-23-2010, 09:09 PM
So just make the blue background for the nav bar thing 1px in width, and where do I add that code in the css?
Candan
06-23-2010, 09:10 PM
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.
Philly100000
06-23-2010, 09:19 PM
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');
}
Candan
06-23-2010, 09:23 PM
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).
Philly100000
06-23-2010, 09:30 PM
Alright, that worked, but now it's doing this
http://i539.photobucket.com/albums/ff352/philly100000/Help-004.png

I would asume that I just need to change this 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?
Philly100000
06-26-2010, 02:36 AM
Any other ways I can fix this?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum