FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS help needed with list style menubar

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


woundedhealer
I have two problems I need help with.

1) The stylesheet was written to allow for submenus and can't get the colors right for links with no submenus.

2) When the menubar is veiwed by itself the submenus go directly below the link on hover. but when the links file is inserted into another file the submenu goes below and to the right of the link on hover. http://www.celticawen.frih.net/test/index.php I put the first 'home' link in to try and solve the color problem.

This is my css code:

Code:
<style type="text/css">

#menu {
width: 100%;
background:#663300;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}

#menu a, #menu h5 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 2px; border: outset;
border-style: solid;
border-color: #CFB58D;
margin: 0;
padding: 2px 3px;
}

#menu h5 {
color: #FFFFCC;
background: #663300;
text-transform: uppercase;
text-align: center;
}

#menu a {
color: #663300;
background: #E4D8AF;
text-decoration: none;
text-align: center;
}

#menu a:hover {
color:#CFB58D;
background: #FFFFCC;
text-align: center;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

}

<!--Style for links with no submenu-->

.nav a:link{
border-color: #CFB58D;
color: #FFFFCC;
background-color: #663300;
text-align: center;
}
   
.nav a:hover {
color:#CFB58D;
background: #FFFFCC;
text-align: center;
}
<!--End of style for links with no submenu-->

</style>

<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;}

#menu a, #menu h5 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
[/quote]
Azmo
don't rly get ur problem, checker ur link in IE6, and it looked like it usually does on a drop down/pop out menu.. (trust me, u might wanna check it out in FF)

Can u try to explain your problem abit more? then I would be more then happy to help you
woundedhealer
Azmo wrote:
don't rly get ur problem, checker ur link in IE6, and it looked like it usually does on a drop down/pop out menu.. (trust me, u might wanna check it out in FF)

Can u try to explain your problem abit more? then I would be more then happy to help you


Sorry, I'm finding this really difficult to explain, it's easier to show you I think.

If you could check out http://www.celticawen.frih.net/test/menubar_2.htm you'll see the menu drops down directly below the link, which is how I want it. When this file inserted into another using php include the menu drops down vertically but it's centred between two links instead. http://www.celticawen.frih.net/test/index.php I forgot to mention before that the menubar is a php include file.

I still haven't found a way to get a link which has no submenu to display the right colors. (the first 'home' link) I'm sure there's an easy way to do this but I haven't yet found it. I've been trying to do it using class css.

I hope this all makes sense now. Any help you can give will be great.
Azmo
first of all, both ur links look exactly the same in my browser Opera.. checked in IE6 and there was no drop down menu shown at all, and in FF it's the same as opera.. it display the links as u explain them.. but u have coded ur txt wrong since it goes way out on the right..

do it like this.. start over, and take it step by step.. cause atm you have some serious code issue cross browsing this site.

both ur links display the drop down menu right below ur menu item, just like u explain it.. (and I do know that IE have issues suporting this kinda stuff, drop down and pop out links in css)

but tell me what browser you are using, so I can focus on that.. cause that helps out alot
woundedhealer
I'm using IE7. I know IE has problems with css dropdown menus, but that is supposed to be sorted by using csshover. It's just strange that at least in IE7 the submenus display differently when the file is inserted into another with php insert.

I have no idea why the submenus doen't show in IE6. I thought IE7 would have caused the biggest problem. To my knowledge csshover was created to so this method of dropdown menu would work in IE6.

My knowledge of css is fairly good, but not good enough to identify and correct the problem.
Azmo
ok, I usually nag about "knowing when to use javascript and when to avoid it" and this is a time when you actually should use javascript instead.. I would have since it's way to much truoble fixing it in IE and a js menu wont be a problem to anyone since the drop down should work even if you have js off..
woundedhealer
Azmo wrote:
ok, I usually nag about "knowing when to use javascript and when to avoid it" and this is a time when you actually should use javascript instead.. I would have since it's way to much truoble fixing it in IE and a js menu wont be a problem to anyone since the drop down should work even if you have js off..


One problem - I don't know javascript. Can it be done with php? My files are already php so that I can include the menubar in them. I only know a tiny bit of php but I've got a book on it.

I'm begining to think it would be better to get someone else to do it for me as I'm going to need it soon.
Related topics

help needed with css & javascript
CSS Help needed : Table emulation with divs
Basic CSS help needed regarding IE vs FF
Big Help needed .
Help setting a css for the sidebar : Blog
Search function
CSS - CSS Tutorial for skin maker
Help needed :P
Help needed with Javascript and overflow
Css problem
CSS help with existing "roll overs"
Browsers battle (FF, IE, OP) and CSS
150 frh$ for menubar Please CLOSE
CSS Help
CSS problem in IE 6
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.