Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Problem with creating microsoft.com stlye menu of links

0 views
Skip to first unread message

Bob Evans

unread,
Dec 13, 2004, 8:57:11 PM12/13/04
to
I want to be able to include basic hyperlinks in the left column of a page
and have it appear simiilar to those shown on the home page for
www.microsoft.com . I have not been successful. The following mirrors what
is done on the microsoft site, but it highlights only the hyperlink and not
the entire line of the paragraph.

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Sample Hover Frame</title>
<style type="text/css" media="all">
#Nav{padding:2px 0 10px 0px;}
#Nav p{margin:0 2px 0 2px;padding:2px 4px 4px 8px;border:1px 1px 1px
1px;width:expression(NavTd.clientWidth-4);}
#Nav a{color:#000000;border:0px none;}
#Nav a:hover{color:#000000;border:1px solid
#cccccc;background-color:#f1f1f1;text-decoration:none;}
</style>
</head>

<body>

</p>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%" id="NavTd">
<div id="Nav" width="200px">
My Menu<p><a href="One.htm">One</a></p>
<p><a href="Two.htm">Two</a></p>
<p>&nbsp;
</div>
</td>
</tr>
</table>

</body>

</html>

mscir

unread,
Dec 14, 2004, 12:52:45 AM12/14/04
to
... use their css file:

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Microsoft Corporation</title>
<style type="text/css" >
body{margin:0px;background-color:#1e77d3;}
td{font-family:Verdana, Arial;font-size:70%;}
table{border-collapse:collapse;border:0 0 0 0;}
img{border:0;}
.hide{display:none;}
#ca td{vertical-align:top;}
.main{width:771px;border-top:solid 1px #999999;border-bottom:solid 1px
#999999;background-color:#ffffff;}
.mainW{width:995px;border-top:solid 1px #999999;border-bottom:solid 1px
#999999;background-color:#ffffff;}
.page{width:771px;}
.pageW{width:995px;}
a{text-decoration:none;color:#003399;}
a:hover{text-decoration:underline;color:#ff3300;}
#NavTd{border-right: 1px solid #999999;background-color: #cedfff;filter:
progid:DXImageTransform.Microsoft.Gradient(startColorStr= '#ffffff'
,endColorStr= '#cadef4' ,gradientType= '0' )}
#Nav{padding: 2px 0 10px 0px;font: 1em Verdana, Arial;}
#Nav .line{border-top: solid 1px #999999;margin: 5px 0 5px 0;}
#Nav>.line{margin: 6px 0 4px 0;}
#Nav h4{margin: 4px 0px 5px 5px;font-size: 95%;}
#Nav>h4{margin: 4px 0px 4px 5px;}
#Nav ul{list-style: none;margin: 0;padding: 0;}
#Nav li{padding: 0;margin: -4px 2px;width: 175px;}
#Nav>ul>li{margin: -3px 2px;}
#Nav a{position: relative;cursor: pointer;display: block;color:
#000000;padding: 2px 4px 4px 8px;margin: 1px 0px;}
#Nav>ul>li>a{border: 1px solid transparent;padding: 2px 4px 4px 7px;}
#Nav a:visited{color: #000000;}
#Nav a:hover{border: 1px solid #cccccc;margin: 0px;padding: 2px 4px 4px
7px;background-color: #f1f1f1;text-decoration: none;}
#Nav>ul>li>a:hover{margin: 1px 0px;}
</style>
</head>

<body>
<script type="text/javascript">
var isW;
isW=(document&&document.body.clientWidth&&document.body.clientWidth>=895&&document.getElementById);
</script>
<a href="#ca" class="hide"></a>
<div id="dPage" class="page">
<table cellpadding="0" width="100%">
<tr>
<td width="100%" colspan="2">
<table cellpadding="0" width="100%" height="22">
<tr>
<td width="50%"
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9',
endColorStr='#CEDFF6', gradientType='1')">
</td>
<td width="50%"
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#CEDFF6',
endColorStr='#1E77D3', gradientType='1')">
</td>
</tr>
</table>
</td>
<td id="msviGlobalToolbar" bgcolor="#1e77d3" height="22" nowrap
align="left">

</td>
</tr>
<tr valign="top">
<td bgcolor="#0A6CCE" height="100%"><a
href="http://g.microsoft.com/mh_mshp/648"></a>
</td>
<td width="100%"
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0a6cce',
endColorStr='#ffffff', gradientType='1')">
</td>

</form>
</td></tr></table><table id="tMain" class="main" cellpadding="0"
width="100%"><tr valign="top"><td id="NavTd" width="179"><div
id="Nav"><h4>Product Families</h4><ul><li><a
href="http://g.microsoft.com/mh_mshp/1">Windows</a></li><li><a
href="http://g.microsoft.com/mh_mshp/2">Office</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/302">Windows Server
System</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/4">Developer Tools</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/5">Business Solutions</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/118">Games &amp; Xbox</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/7">MSN</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/8">Windows Mobile</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/9">All Products</a></li>
</ul>
<div class="line"></div>
<h4>Product Resources</h4>
<ul>
<li><a href="http://g.microsoft.com/mh_mshp/10">Downloads</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/11">Windows Update</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/12">Office Update</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/13">Security</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/14">Communities</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/15">Support</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/16">Learning Tools</a></li>
<li><a href="http://g.microsoft.com/mh_mshp/119">Events &amp;
Webcasts</a></li>
</ul>
<div class="line"></div>
<h4>Microsoft.com Worldwide</h4>
<ul>
<li><a href="http://g.microsoft.com/mh_mshp/120">Countries &amp;
Regions</a></li>
</ul>
<div class="line"></div>
</div>

</body>
</html>

Bob Evans

unread,
Dec 17, 2004, 12:04:28 PM12/17/04
to
I had (hence the name #Nav in my exampe.) I had pared it down too far. Here
is a working example of what I was trying to do with the fewest number of
styles.

Thanks for the suggestion,
Bob


<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Sample Hover Frame</title>
<style type="text/css" >

a{text-decoration:none;color:#003399;}
a:hover{text-decoration:underline;color:#ff3300;}

#Nav{padding: 2px 0 10px 0px;font: 1em Verdana, Arial;}

#Nav ul{list-style: none;margin: 0;padding: 0;}
#Nav li{padding: 0;margin: -4px 2px;width: 175px;}

#Nav a{position: relative;cursor: pointer;display: block;color:
#000000;padding: 2px 4px 4px 8px;margin: 1px 0px;}

#Nav a:visited{color: #000000;}
#Nav a:hover{border: 1px solid #cccccc;margin: 0px;padding: 2px 4px 4px
7px;background-color: #f1f1f1;text-decoration: none;}

</style>
</head>
<body>
</p>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:

collapse" bordercolor="#111111" width="100%">
<tr>


<td width="100%" id="NavTd">
<div id="Nav" width="200px">

<h4>My Menu</h4>
<ul>
<li><a href="One.htm">One</a></li>
<li><a href="Two.htm">Two</a></li>
</ul>

0 new messages