I'm stumped. I'm not so sure what is the answer. I'll do some research and get back to you if I bump into an useful answer. You should email the people at iContact as they probably can help you..
I believe you have to have.
Font-color: #FF9900;.
And for the mouse over, I think you would have:.
.buttonNav#hover{.
Font-color: #color;.
}.
Or it might be.
.buttonNav:hover{.
Font-color: #color;.
}.
I dont quite remember if this is right...
Not working....
I dont think it's font-color I think it just color.
Any other suggestions?..
That wil not work in IE on anything but links. <a> tags..
Also it is font-color. seeing how you have color already then it has to be font-color huh..
Will the first one work? With the # sign?..
Why use font-color when color works just the same..
The color is still not changing I am using the following.
<tr align="left" valign="top">.
<td>.
<table width=100 border="0" cellspacing="0" cellpadding="0">.
<tr>.
<td width=20 align=center class=buttonNav><a href="indexstart.asp" color=336699> Home </a></td>.
<td width=20 align=center class=buttonNav><a href="frm-contactsearch.asp"> Search Contacts </a></td>.
<td width=20 align=center class=buttonNav><a href="about/about.asp"> Search Positions </a></td>.
<td width=20 align=center class=buttonNav><a href="about/about.asp"> Search Alerts </a></td>.
<td width=20 align=center class=buttonNav><a href="about/about.asp"> Add Position </a></td>.
<td width=20 align=center class=buttonNav><a href="about/about.asp"> Add Contact </a></td>.
<td width=20 align=center class=buttonNav><a href="about/about.asp"> Add Company </a></td>.
<td width=20 align=center class=buttonNav><a href="about/about.asp">www</a></td>.
</tr>.
</table>.
</td>.
</tr>.
Here is how Class buttonNAv looks like.
.buttonNav {.
Font-family: Verdana, Arial, Helvetica, sans-serif;.
Font-size: 11px;.
Font-color: #FF9900;.
Font-style: normal;.
Font-weight: bold;.
Border: 1px solid #336699;.
Background-color: FFFFFF;.
}.
.buttonNav:hover {.
Font-family: Verdana, Arial, Helvetica, sans-serif;.
Font-size: 12px;.
Font-color: #FF9900;.
Font-style: normal;.
Font-weight: bold;.
Border: 1px solid #FFFFFF;.
Background-color: FFFFFF;.
}..
Why not just add the styles to the links instead of the td tags?.
You will have a rollover that works in all browsers then..
If I try it on the link I dont get buttons. I need buttons..
Like Joe2 told you:.
A.buttonNav:link {.
Font-family: comic sans ms, Verdana, Arial, Helvetica, sans-serif;.
Font-size: 11px;.
Font-color: #FF9900;.
Font-style: normal;.
Font-weight: bold;.
Border: 1px solid #336699;.
Background-color: FFFFFF;.
}.
A.buttonNav:hover {.
Font-family: Verdana, Arial, Helvetica, sans-serif;.
Font-size: 12px;.
Font-color: #FFff00;.
Font-style: normal;.
Font-weight: bold;.
Border: 1px solid #FFFFFF;.
Background-color: FFFFFF;.
}.
>.
<a href="indexstart.asp" color=336699 class=buttonNav> Home </a>..
I want a navigation structure at the top of my homepage..
This makes the text look like links I am looking for button type mouse over. Thanks..
<table>.
<tr align="left" valign="top">.
<td>.
<table width=100% border="0" cellspacing="1" cellpadding="1" class="tbstyle">.
<tr>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="indexstart.asp" class=buttonNav> Home </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="frm-contactsearch.asp" class=buttonNav> Search Contacts </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Search Positions </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Search Alerts </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Add Position </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Add Contact </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Add Company </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav>www</a></td>.
</tr>.
</table>.
</td>.
</tr>.
</table>.
Css:.
.buttonNav {.
Font-family: Verdana, Arial, Helvetica, sans-serif;.
Font-size: 11px;.
Color: #FF9900;.
Font-style: normal;.
Font-weight: bold;.
Text-decoration: none;.
}.
A.buttonNav:hover {.
Font-family: Verdana, Arial, Helvetica, sans-serif;.
Font-size: 11px;.
Color: #FF9900;.
Font-style: normal;.
Font-weight: bold;.
Text-decoration: none;.
}.
.tbstyle {.
Border: 1px solid #336699;.
Background-color: #336699;.
}..
Div.menuBar,.
Div.menuBar a.menuButton {.
Font-family: Verdana, Arial, sans-serif;.
Font-size: 8pt;.
Color: #000000;.
}.
Div.menuBar {.
Background-color: #F0EEE2;.
Padding: 6px 2px 6px 2px;.
Text-align: left;.
Margin-left:20px;.
}.
Div.menuBar a.menuButton {.
Background-color: transparent;.
Border: 1px solid;.
Border-color: #f0f0f0 #909090 #909090 #f0f0f0;.
Color: #000000;.
Cursor: pointer;.
Left: 0px;.
Margin: 1px;.
Padding: 2px 6px 2px 6px;.
Position: relative;.
Text-decoration: none;.
Top: 0px;.
Z-index: 100;.
}.
Div.menuBar a.menuButton:hover {.
Background-color: transparent;.
Border-color: #909090 #f0f0f0 #f0f0f0 #909090;.
Color: #000000;.
}.
<td width=180 align=left >.
<div class="menuBar" >.
<a class="menuButton" href="">First </a><br><br>.
<a class="menuButton" href="">Second </a><br><br>.
<a class="menuButton" href="">Third </a><br><br>.
<a class="menuButton" href=""> more </a><br>.
</div>.
</td>..
Works well the menu bar is stretching across the whole screen I want it to limit itself under the main graphic.
So I have a main logo graphic at the top of the website.
Then comes the navigations menu bar and below it is the content.
This is how the first part of the html looks like.
HGMainNav looks like this..
Dajaney it looks amazing.....
Is there any way to shrink down the width of the navigation..
Sure. Take out the width="100%" and replace it with how wide you want the nav bar...
Ok I figured how to shrink the size. hwo do I center it.
Thanks..
Ok that works danjee. How do I center the navigation bar. I am using align=center but it's left justifying..
Put the align"center" in the first table tag.
<table width="70%" border="0" cellspacing="0" cellpadding="0" align="center">.
<tr align="center" valign="top">.
<td>.
<table width="100%" border="0" cellspacing="0" cellpadding="0">.
<tr>.
<td align="center" nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="indexstart.asp" class=buttonNav> Home </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="frm-contactsearch.asp" class=buttonNav> Search Contacts </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Search Positions </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Search Alerts </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Add Position </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Add Contact </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav> Add Company </a></td>.
<td align=center nowrap bgcolor=white onMouseOver="this.bgColor = '#336699'" onMouseOut ="this.bgColor = '#FFFFFF'"><a href="about/about.asp" class=buttonNav>www</a></td>.
</tr>.
</table>.
</td>.
</tr>.
</table>..
Ok thats works....woww nice looks amazing..would it be possible to have a drop down on it also?.
Thanks in advance..
Just put the select list in a new <td>.
<Select name="a" size="1">.
<option value="a">Link1</option></select>..
Hmm I'm not sure how to do that exactly.
How would the code change..
What exactly are you wanting the drop-down list to do?.
Are you wanting the page to jump to a link based on the selection they choose in the drop down?..
I want the drop down to goto related pages.
So I would have on the navigation bar.
Contact - Drop down -> Search contact.
-> add Contact.
Etc..
So is it possible to have a drop down on that navigation bar we just created..that would be awesome..with the similar color scheme.....
Thanks much..
You want a javascript drop down not a select box.
What you want can' be done with what you have. you will need to look at coolmenus, search for it...
Just following your thread here..
Is this the coolmenu system you're.
Talking about?.
Http://www.dhtmlcentral.com/projects/coolmenus/?m=31.
I've actually not atempted to script.
Menus like this before but I may on.
An upcoming project. Can you use images.
In a drop down menu?.
Is there a simple solution to an image.
Based drop down menu?..
I haven't looked at it in awhile but I believe you can use images in the drop downs..
I use it on my iContact site and I have errors for the drop downs that have more to the side. if that is what you meant..
And yes that is the one...