KevinG
12-05-2002, 12:24 AM
i was wondering how i could make a rollover menu like the one at www.cnn.com - only is it possible to make the table first and then apply the style? as my pages sub menus have different numbers of rows so i can't preformat a table and rows.
i would be incredibly grateful if someone could give me an idiots example (and i mean idiots). finally i need to be able to house the style in a global style sheet and then call it up and apply it to my submenu table.
KevinG
12-05-2002, 11:42 PM
looks like i'm going to have to go the image route
webmarkart
12-06-2002, 01:35 AM
which rollovers on cnn are you referring to?
KevinG
12-06-2002, 08:41 AM
the blue one on the right. i made a small version using images and its nowhere near as good as cnn's.
tommysphone
12-06-2002, 04:02 PM
Hi. I saw the post, looked at the site but can only see a left menu.
Might this be of use?In the head tag place this -
<script language="JavaScript">
var isIE4 = false;
function CheckBrowser()
{ if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.charAt(0) >= 4) { isIE4 = true; }}
function mOvr(src,clrOver)
{ if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = clrOver; src.children.tags('A')[0].style.color = '#ffffff';}}
function mOut(src,clrIn)
{ if (!src.contains(event.toElement)) { src.style.cursor = 'default'; src.bgColor = clrIn; src.children.tags('A')[0].style.color = '#ffffff';}}
function mClk(src)
{ if(event.srcElement.tagName=='TD'){src.children.tags('A')[0].click();} }
function mOvrTop(src,clrOver)
{ if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = clrOver;}}
function mOutTop(src,clrIn)
{ if (!src.contains(event.toElement)) { src.style.cursor = 'default'; src.bgColor = clrIn;}}
</script>
Followed by this in your body
<table cellspacing="3" cellpadding="0" border="0" width="420" align="center">
<tr>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');"
onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699"><a
style="color: #FFFFFF" href="tablecellmouseover.htm"><font face="Verdana" size="-2">link</font></a>
</td>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');"
onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699"><a
style="color: #FFFFFF" href="tablecellmouseover.htm"><font face="Verdana" size="-2">link</font></a>
</td>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');"
onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699"><a
style="color: #FFFFFF" href="tablecellmouseover.htm"><font face="Verdana" size="-2">link</font></a>
</td>
<td align="center" width="105" onmouseover="mOvr(this,'#9999cc');"
onmouseout="mOut(this,'#666699');" onclick="mClk(this);" bgcolor="#666699"><a
style="color: #FFFFFF" href="tablecellmouseover.htm"><font face="Verdana" size="-2">link</font></a>
</td>
</tr>
</table>or
<html>
<head>
<title>A Menu</title>
<style type="text/css">
A:link { color: #000000 }
A:active { color: #000000 }
A:visited { color: #000000 }
A:hover { color: #000000 }
td { font-family: Verdana; font-size: 10pt}
.rightcell { font-family: Verdana; font-size: 10pt ; padding-left: 5px}
</style>
<script language="JavaScript">
var PrevCellName='';
function changeCell(CellName){
if (PrevCellName != ''){
eval ('document.all.' + PrevCellName + '.bgColor = "#FFFFFF"');
}
PrevCellName = CellName;
eval ('document.all.' + CellName + '.bgColor = "#E8112D"');
}
function resetCell(){
if (eval('document.all.' + PrevCellName + '.bgColor = "#E8112D"')){
eval('document.all.' + PrevCellName + '.bgColor = "#FFFFFF"');
}
}
</script>
</head>
<body>
<table width="312" border="1" bgcolor="#ffffff" cellspacing="0" bordercolor="#000000"
align="left">
<tr>
<td width="5" id="One"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('One');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Two"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Two');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Three"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Three');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Four"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Four');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Five"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Five');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Six"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Six');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Seven"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Seven');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Eight"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Eight');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Nine"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Nine');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
<tr>
<td width="5" id="Ten"> </td>
<td width="297" class="rightcell"><a onMouseOver="changeCell('Ten');"
onMouseOut="resetCell();" href="#">link</a></td>
</tr>
</table>
</body>
</html>
KevinG
12-06-2002, 05:33 PM
i've just made css menu and it looks fine on my pc but a friend said it shows itself in green and blue in big text. can anyone tell me what i have done wrong?
KevinG
12-06-2002, 05:44 PM
here's a link to my new sub nav css rollover menu - http://www.designermortgages.com/customerservice.htm
and here is that css menu as found in my style sheet:
.menu {
font : normal 9px Verdana, Arial, Helvetica, sans-serif;
line-height : 16px;
}
.menu a,.menu a:link,.menu a:active,.menu a:visited {
display : block;
background : #990000;
color : #FFFFFF;
text-decoration : none;
line-height : 16px;
}
.menu a:hover {
background : #000000;
color : #FFFFFF;
cursor : pointer;
text-decoration : none;
}.whitetext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: normal; color: #FFFFFF; text-decoration: none}
KevinG
12-06-2002, 05:50 PM
just in case - heres my entire style sheet:
<style type="text/css">
.buttons { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; background-color: #CCCCCC; background-repeat: no-repeat}
.headings { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; color: #FFFFFF; text-decoration: none; font-weight: bold}
.formtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-weight: bold; color: #FFFFFF; text-decoration: none}
.formboxes { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; background-color: #FFFFFF; background-repeat: no-repeat}
.boxes { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000; text-decoration: none; background-color: #FFFFFF; background-repeat: no-repeat}
.buttons { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000; text-decoration: none}
.dropdownmenus { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000; text-decoration: none; background-color: #CCCCCC; background-repeat: no-repeat; white-space: normal; height: 1mm; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; vertical-align: top; top: 1px; clip: rect(1px 1px ); line-height: normal; background-position: 0px 0px; border-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px}
.hometext { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #FFFFFF; font-weight: normal; text-decoration: blink}
.redlarge { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #CC0000}
.smallsilver { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #666666}
.boldtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
.smallblack { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: normal; color: #000000}
a.white:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none}
a.white:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none}
a.white:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: underline}
a.white:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none}
a.red:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
a.red:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
a.red:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #999999; text-decoration: none}
a.red:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
.redbold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bolder; color: #990000; text-decoration: none}
.blackbold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
a.black:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
a.black:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
a.black:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: underline}
a.black:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
a.largered:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
a.largered:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
a.largered:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: underline}
a.largered:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #990000; text-decoration: none}
.menu {
font : normal 9px Verdana, Arial, Helvetica, sans-serif;
line-height : 16px;
}
.menu a,.menu a:link,.menu a:active,.menu a:visited {
display : block;
background : #990000;
color : #FFFFFF;
text-decoration : none;
line-height : 16px;
}
.menu a:hover {
background : #000000;
color : #FFFFFF;
cursor : pointer;
text-decoration : none;
}.whitetext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7.5pt; font-style: normal; font-weight: normal; color: #FFFFFF; text-decoration: none}
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.