css menu help part 2
Regular
Posted: Thu, 2008-05-15 18:32
Hi I'm back again with another CSS question. I'm glad everywhere here is easily able to give input and help each other out. I've learned so much about CSS in the past week from this site it's ridiculous.
So here's my question to you CSS gurus. I'm working on a dealer dashboard here at work and I have ran into a problem and I'm hoping someone has the solution. Below is a link where you can view the site I'm working on.
http://mswebsol.com/sites/interface/calupdated.html
So the problem I've ran into is I created a main link menu for the web site and then I was instructed to create a sub menu for other parts of the dashboard. The problem is I can't figure out how to create a pressed button for the submenu because I am using
for the main menu's pressed button. Is there any way to get a pressed button for the submenu and the main menu at the same time?
Suggestions and answers would be great!
Thanks! 
Enthusiast
Posts: 283
Joined: 2008-02-22
Location: Providence, RI
You can either add a class
Posted: Thu, 2008-05-15 18:38
You can either add a class or id to each of the menus. I am assuming you want the same effect as the hover for the selected states, right?
You could just make a class called "selected" and then style it for each of the menus.
In other news...why are you using tables?
http://ifohdesigns.com - Web Design That Is Neat.
http://ifohdesigns.com/blog - Read it please.
Regular
Posts: 21
Joined: 2008-05-06
what do you mean why am i
Posted: Thu, 2008-05-15 18:40
what do you mean why am i using tables? That's all I really know is html tables and photoshop.
I tried adding a class and id to each menu and it doesn't work. Can you help me and provide some type of code to give me an idea?
Enthusiast
Posts: 223
Joined: 2008-03-16
First of all, please post
Posted: Thu, 2008-05-15 18:47
First of all, please post code using
...otherwise it is difficult to really understand some posts.For your problem, you can create as many classes as you like and apply them to as many elements. So, for example, create a class .submenuactive, define its style and apply it to the appropriate list item
Enthusiast
Posts: 283
Joined: 2008-02-22
Location: Providence, RI
dbess wrote:what do you mean
Posted: Thu, 2008-05-15 18:51
Well, tables should not be used for structure, only tabular data, which you are not presenting.
1. Make a class and give it to whichever menu items you wish to appear selected.
2. Use the proper specificity to hook to that element in you css
3. Apply your styles ( in your case the background image of your hover states )
4. Enjoy
http://ifohdesigns.com - Web Design That Is Neat.
http://ifohdesigns.com/blog - Read it please.
Regular
Posts: 21
Joined: 2008-05-06
Here is the code that I am
Posted: Thu, 2008-05-15 18:57
Here is the code that I am using for the menus.
Main Menu
<ul id='menu'>
<li class="menu" id="Traffic-menu"><a href="index.html">Traffic</a></li>
<li class="menu" id="SalesSurvey-menu"><a href="salessurvey.html">Sales Survey</a></li>
<li><a href='#'>Reports</a></li>
<li><a href='#'>Data</a></li>
<li><a href='#'>Configuration</a></li>
<li><a href='#'>Help</a></li>
</ul>
CSS applied to main menu
ul#menu{margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("images/OFF.gif") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:4px solid #555555;
border-top:1px solid #919191;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color: #000066;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("images/DIVIDER.gif") no-repeat top right;
}
ul#menu li a:hover{
background:transparent url("images/HOVER.gif") no-repeat top right;
}
#Traffic #Traffic-menu, #SalesSurvey #SalesSurvey-menu
{
background:transparent url("images/HOVER.gif") no-repeat top right;
}
Sub Menu Code:
<ul id='submenu'>
<li class="submenu" id="DailyTraffic"><a href='http://'>Daily Traffic</a></li>
<li><a href='http://'>Monthly Targets</a></li>
<li><a href='http://'>Working Days</a></li>
<li><a href='http://'>Empty Link</a></li>
<li><a href='http://'>Empty Link</a></li>
<li><a href='http://'>Empty Link</a></li>
<li><a href='http://'>Empty Link</a></li>
</ul>
CSS for Sub Menu
ul#submenu {
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
ul#submenu li {
float: left;
font: 10px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
ul#submenu li a {
background: #333 url("images/v3.gif") bottom right no-repeat;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 4px 12px;
text-decoration: none;
}
ul#submenu li a:hover {
background: #2580a2 url("images/subhover.gif") bottom center no-repeat;
color: #fff;
padding-bottom: 4px;
}
#DailyTraffic #DailyTraffic-submenu,
{
background: #2580a2 url("images/subhover.gif") bottom center no-repeat;
color: #fff;
padding-bottom: 4px;
}
I'M CONFUSED!!!
Enthusiast
Posts: 223
Joined: 2008-03-16
You made my day!
Posted: Thu, 2008-05-15 19:02
ROFL!!!!!!!!!!!!! Delicious! Thank you, you made my day.
Regular
Posts: 21
Joined: 2008-05-06
Caposoft wrote:ifohdesigns
Posted: Thu, 2008-05-15 19:04
what? Come on guys! No need to badger me I'm trying to figure things out. I just need some personal assistance on aisle 4. Please!
Enthusiast
Posts: 283
Joined: 2008-02-22
Location: Providence, RI
Just because you said
Posted: Thu, 2008-05-15 19:16
Just because you said "assistance on aisle 4. Please!" you should be slapped and spat upon.
<ul id="topMenu">
<li class="selected">yay</li>
...
</ul>
<ul id="secondaryNav">
<li class="selected">yay</li>
</ul>
ul#topNav li.selected {
background: your image;
}
ul#secondaryNav li.selected {
background: your image;
}
http://ifohdesigns.com - Web Design That Is Neat.
http://ifohdesigns.com/blog - Read it please.
Regular
Posts: 21
Joined: 2008-05-06
thank you now this will
Posted: Thu, 2008-05-15 19:24
thank you
now this will work and I'll be able to have 2 pressed buttons for both menus at the same time without using "id" inside of the body tag?
Regular
Posts: 21
Joined: 2008-05-06
ifohdesigns wrote:Just
Posted: Thu, 2008-05-15 19:49
Thanks Bro I appreciate it. It works just fine now. Thanks for the help. I've been designing web sites with nested tables for the past 5 years. I am now in the process of learning CSS. It's great that you were able to help me out...now i'll be able to use this for the future.
What are some good methods of creating web sites with out nested tables? do you replace tables with div tags? I'd like to know what are some good methods. I'll look on your blog and see if you have any helpful tips on there.
Once again thanks I really do appreciate it!