SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How'd Microsoft do that???

    After searching unsuccessfully through their code and the MSDN, I can't figure out how they get the links on the left nav and top links to have a "box" around them.

    I think it looks kinda sharp and a new client absolutely loves it.

    http://www.microsoft.com/

    Does anyone on this forum know how this is accomplished???

    Much thanks to those who can clue me in.

    Mike

  2. #2
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't it simply a border?

    Usually you just add the code below to your CSS class:

    border: 1px solid #FFFFFF;

    That's how I do it anyway - maybe there's other ways also

  3. #3
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Duh!

    You are 100% correct!

    Man, do I feel dumb. I seem to always overlook the obvious.

    There is one interesting issue...

    When the "box" goes around the link during the "hover" state it causes the link to "shift" out of place???

    Any ideas???

    Thanks, Willigogs!

    Cheers,

    Mike

  4. #4
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure without seeing your code. I'd imagine it must be something to do with your hover state - but I'm no expert in CSS either.

    I think I misunderstood your original request - as on the microsoft site there is a uniform "box" width that gets highlighted. If you apply border and background changes to your hover class - this should only cover your actual link area?

    I've done something like this before using "onMouseOver" and "onMouseOut" tags on table cells - but not sure if this would be suitable in this instance.

    I'm sure there'll be an easier way around this - but I can paste the "onMouseOver" code if no-one else offers a solution?

    Sorry I can't be more help

  5. #5
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This MUST be possible with simple CSS as this is what microsoft are doing.

    If you look at their code - these links have the class "flyoutMenu" applied to them, and their CSS code looks like below:

    .flyoutMenu {
    background-color: #F1F1F1;
    border-color: #999999;
    border-width: 0 1px 1px 0;
    border-style: solid;
    behavior: url(/library/flyoutmenu/default.htc);

    Never used a "Behaviour" class before - but hopefully someone will be able to answer this?

    [EDIT]

    You can also get hold of their .htc file - although I have no idea what one is or what it does! Sinmply follow the URL below to download it.

    http://www.microsoft.com/library/flyoutmenu/default.htc

  6. #6
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops!

    Just realised they aren't using the .flyoutmenu class, but this one instead:

    .flyoutLink {
    border-color: #F1F1F1;
    border-width: 1px;
    border-style: solid;
    font-family: Verdana, Arial, Helvetica;
    font-size: 70%;
    padding-left: 6px;
    padding-right: 25px;
    padding-top: 1px;
    cursor: hand;}

    This class is applied to a table cell (as expected) but has a load of other code along with it:

    <TD class="flyoutLink" onclick="Flyout_S1_Node9.click();"><A onclick="trackInfo(this);" LinkArea="Left Nav" ID="Flyout_S1_Node9" LinkID="Flyout_S1_Node9" HREF="/products/info/">All Products</A></TD>

    I have no idea what any of this does!!!

  7. #7
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Interesting....

    I checked out the ".htc" file and it looks like a ".js" include file???

    Man! Mega javascript.

    I'm not sure what it all does but it sure looks impressive!

    I'd be curious to see if someone here at the "point" could take all this in and synthesize it into something I could understand.

    Anyone??? Anyone??? (lol)

    Mike

  8. #8
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can actually achieve this exact same effect using different code - but I'm not sure if it will work in all browsers? It definitely works in IE 5.5 and above.

    Here's the code if you're interested?

    CSS

    .one {
    border-color: #333333;
    border-width: 1px;
    border-style: solid;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    padding-left: 6px;
    padding-right: 25px;
    padding-top: 1px;
    cursor: hand;}

    HTML

    <a href="#"><td BGCOLOR='#cccccc' class="one" onMouseOver="this.bgColor='#999999'" onMouseOut="this.bgColor = '#cccccc'">Link</td></a>

  9. #9
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this, should work how you want it to

    Code:
    <html>
    	<head>
    		<style>
    		
    		body {
    			font-family: verdana, tahoma;
    			font-size: 10px;
    		}
    		
    		.mydiv a {
    			display: block;
    			float: left;
    			margin: 2px;
    			padding: 4px 8px 4px 8px;
    			background: #fff;
    			border: 1px transparent;
    			text-decoration: none;
    		}
    		
    		.mydiv a:hover {
    			color: #0780D4;
    			background: #FAFAFA;
    			border: 1px solid #ADADAD;
    		}
    		
    		</style>
    	<head>
    	
    	<body>
    	
    	<div class="mydiv">
    		<a href="#">This is a link</a>
    		<a href="#">This is a link</a>
    		<a href="#">This is a link</a>
    		<a href="#">This is a link</a>
    	</div>
    	
    	</body>
    </html>

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Kigoma, Tanzania (East Africa)
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .mydiv a {
    display: block;
    float: left;
    margin: 2px;
    padding: 4px 8px 4px 8px;
    background: #fff;
    border: 1px transparent;
    text-decoration: none;
    }

    Is "transparent" a valid CSS modifier? I thought only "inherit" was standard

  11. #11
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hmmm...

    It looks like both examples are close but don't achieve the same result as MS.

    Wolligog's example http://www.circle1media.com/dev/willigogs.html

    Platinum's example http://www.circle1media.com/dev/platinum.html

    Check'em out.

    We'll get it soon... I know it.

    Mike

  12. #12
    SitePoint Addict phptek's Avatar
    Join Date
    Jun 2002
    Location
    Wellington, NZ
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although MS do use a shedload of DHTML, there's a much simpler, less bandwidth intensive way to create the same navigation effect using an XHTML unordered list and no DHTML (although popout lists and wotnot are still the domain of the js coder)

    http://www.alistapart.com/articles/taminglists/

    an example of mine:

    www.responsesource.com/csstest/dodgycss.html

    HTH


  13. #13
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Not quite

    Great site...

    Not quite the effect I was looking for...

    Mike

  14. #14
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Often, a reason for the links shifting during the hover is because you set a border for the hover, but didn't set a border for the link.

    I am not sure what the specs say on it, but if you have the a:link with a white 1 px border on a white background, and you want the hover to have a black 1 pixel border, then you should get the effect you want without the shift.

    Think of it as this

    Link = no border
    hover = 1 px border

    The hover is using a border with nothing to compare, so chances are, the link may shift 1 pixel either way.

    I could be wrong, but I think that is the gist of it.

  15. #15
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This might work instead. Change the transparent to an actual color value.

    Code:
    <style>
    		
    		body {
    			font-family: verdana, tahoma;
    			font-size: 10px;
    		}
    		
    		.mydiv a {
    			display: block;
    			float: left;
    			margin: 2px;
    			padding: 4px 8px 4px 8px;
    			background: #fff;
    			border: 1px #fff;
    			text-decoration: none;
    		}
    		
    		.mydiv a:hover {
    			color: #0780D4;
    			background: #FAFAFA;
    			border: 1px solid #ADADAD;
    		}
    		
    		</style>

  16. #16
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Other than color Platinum's example:
    http://www.circle1media.com/dev/platinum.html

    Seems to have the same effect as MS to me.

    Here is my example:
    http://s88457198.onlinehome.us/example.html

    Though I don't really see any difference, but I messed with it for an hour or so so I figured I show it off. Ha Ha.

    Hope it is in some way a helpful post.

    Later
    Johnny

  17. #17
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by iLuke
    Is "transparent" a valid CSS modifier? I thought only "inherit" was standard
    haha, I actually didn't know for sure - but I [wrongly] assumed it would work. Works in firebird anyway. But yeah, what does microsofts do that mine (and now Johnny's) don't? Is there another behavior it's supposed to have we've missed?

  18. #18
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I do have some useless extra code in my CSS that was in there from another site I was making. But it works none the less.

    Later
    Johnny

  19. #19
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like Johnny Gulag's version - although would this be able to work in a similar vein to the microsoft site? (i.e. for this class to work on table cells so the link is a fixed width?)

    I also actually thought Phptek's version certainly had potential to work as well - if different backgrounds and borders were applied?

    I've changed my code slightly to give an impression of how it would work similar to microsoft's version - and you can see this at the URL below:

    http://www.chriswilliamsdesign.com/DHTMLMenu/Final.htm

    Again, it's not exactly right but I feel we're getting close!!! I just don't seem to be able to find a way to apply borders on mouseover using DHTML...

  20. #20
    SitePoint Addict phptek's Avatar
    Join Date
    Jun 2002
    Location
    Wellington, NZ
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, it's not exactly right but I feel we're getting close!!! I just don't seem to be able to find a way to apply borders on mouseover using DHTML...
    Don't use DHTML if you don't have to You can also shorten your border properties too:

    instead of border-top-width, border-right-width etc etc use: border-width:1px and then individually assign values to for the other border properties: border-top: solid 1px #000; would give the top cell a solid black border of 1px thickness.

    You can also use the background: property to add a background image to each link to make an image mouseover effect.

    BTW: lose the tables. You can use an unordered list instead (<ul> tag or any block level element) to achieve the same effect, this is what I have:

    HTML:
    <td id="nav-left">
    HTML Code:
    <h2>Subscribers</h2>
    <ul>
     <li><a href="#">View Subscriptions</a></li>
     <li><a href="#">View Enquiries</a></li>
     <li><a href="#">Logout</a></li>
    </ul>
    <h2>Directories</h2>
    <ul>
     <li><a href="#>PR Companies</a></li>
     <li><a href="#">Journalist Directory</a></li>
     <li><a href="#">Jobs</a></li>
    </ul></td>
    CSS:
    HTML Code:
    #nav-left ul
    {
     margin:	   0;
     padding:	  0;
     list-style-image:	none;
     background-color:	transparent;
    }
    #nav-left li
    {
     margin:	   0;
     list-style-image:	none;
     list-style-type:	none;
     padding:	  0;
     background-color:	transparent;
    }
    #nav-left li a
    {
     line-height/* */:	11px;
     padding:	  1px 0 4px 0;
     font-family:	 arial,verdana,sans-serif;
     font-weight:	 bold;
     text-decoration:	none;
     display:	  block;
     border-top:	  #FFF solid 1px;
     border-bottom:	 #666 solid 1px;
     background-color:	#FC0;
    }
    #nav-left li a:hover
    {
     color:	   #FFF;
     border-top:	  #000 solid 1px;
     background-color:	#666;
    }
    Check it out at: http://www.responsesource.com/csstest/dodgycss.html
    Good luck

  21. #21
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check it out:
    http://www.xdevdesign.com/Better_MS_Menu.htm

    HTML Code:
    <style type="text/css">
    body {
    	font: 70% verdana, sans-serif;
    }
    
    dl
    {
    	width: 176px;
    	padding: 4px 0px 6px 2px;
    	background: #F1F1F1;
    	border-right: 1px solid #999;
    	border-left: 1px solid #999;
    }
    
    dt { 
    	font-weight: bold; 
    	padding: 2px;
    }
    
    dd {
    	padding: 0px;
    	margin: 0px 2px 0px 0px;
    	
    }
    
    dd a
    {
    	display: block;
    	border: solid 1px #F1F1F1;
    	padding: 2px 6px 2px 6px;
    	margin: 0px 2px;
    	background: #F1F1F1;
    	height: 1%;
    	line-height: 1em;
    	color: #000;
    	text-decoration: none;
    }
    
    dd a:hover
    {
    	border: solid 1px #999;
    	background: #CCC;
    }
    </style>
    </head>
    <body>
    <dl>
    <dt>Product Families</dt>
    <dd><a href="#">Windows</a></dd>
    <dd><a href="#">Office</a></dd>
    <dd><a href="#">Mobile Devices</a></dd>
    <dd><a href="#">Business Solutions</a></dd>
    <dd><a href="#">Servers</a></dd>
    <dd><a href="#">Developer Tools</a></dd>
    <dd><a href="#">Games and Xbox</a></dd>
    <dd><a href="#">MSN Services</a></dd>
    <dd><a href="#">All Products</a></dd>
    </dl>
    
    </body>
    </html>
    Wiped this up in 10 minutes ...
    looks identical to MS's but done with a much better semantic and valid approach

    Microsoft is the king of bloat. If there ever was a site that's a candidate for a standards makeover, that's it. Although at this point I'd say that it would be near impossible to pull it off considering the amount of pages on that site. They would have to deploy a team of hundreds working around the clock for a year!

    Once complete though they would save millions on bandwidth.

    -xDev

  22. #22
    SitePoint Addict phptek's Avatar
    Join Date
    Jun 2002
    Location
    Wellington, NZ
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    N-I-C-E.

    Looks sketchy in Opera 6 but no issue in 7, IE5,5.5,6.0 and FB.

    Nice one

  23. #23
    SitePoint Zealot choazart's Avatar
    Join Date
    Feb 2002
    Location
    So. California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Way to go!!!

    I think I'm set.

    Gotta love this place.

    Mike

  24. #24
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by phptek
    N-I-C-E.

    Looks sketchy in Opera 6 but no issue in 7, IE5,5.5,6.0 and FB.

    Nice one
    Thanks. That's nice to know that it works even in IE5! I usually don't worry about Opera 6 though ... I test on ie6, moz and opera 7. I should really do the multiple versions of ie thing and look at some of my stuff on ie5.x but to tell you the truth I'm a little afraid of what I might see


    Quote Originally Posted by choazart
    Way to go!!!

    I think I'm set.

    Gotta love this place.

    Mike
    Great place, eh! I really can't resist a challenge

    -xDev

  25. #25
    SitePoint Addict phptek's Avatar
    Join Date
    Jun 2002
    Location
    Wellington, NZ
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xDev
    I should really do the multiple versions of ie thing and look at some of my stuff on ie5.x but to tell you the truth I'm a little afraid of what I might see
    Don't worry, you'd be amazed at what IE5 can deal with - if your XHTML/HTML is clean enough. If not - there are some useful tips here which explore CSS comment bugs in IE5/5.5, very useful if you're trying to get pixel perfect - which I firmly believe is attainable

    Great place, eh! I really can't resist a challenge
    I've been helped out a number of times here and love to help people out myself if if I can. I had a pm the other day thanking me for some stuff I'd done over on the php forum - makes it all worth while


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •