Return to Snippet

Revision: 36931
at November 30, 2010 23:45 by wildpeaks


Updated Code
#YourMapContainer {
	overflow: hidden;
}

#YourMapContainer .MicrosoftMap {
	overflow: visible !important;
	margin-top: 30px !important;
	background: none !important;
}

#YourMapContainer .MicrosoftMap .NavBar {
	width: 100%;
	top: -30px;
	-moz-box-shadow: 0px 0px 4px #000;
	-webkit-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888');
}

#YourMapContainer .NavBar_zoomDrop, #YourMapContainer .MicrosoftMap_NavBar_typeMenu {
	-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	border: 1px solid #aaaaaa;
	border-top: none;
}

Revision: 36930
at November 30, 2010 23:44 by wildpeaks


Updated Code
/**
 * Moves the NavBar "outside" of the map so that it doesn't interfer with Map.setView.
 * and adds a subtle shadow on the NavBar and its dropdown menus.
 */

#YourMapContainer {
	overflow: hidden;
}

#YourMapContainer .MicrosoftMap {
	overflow: visible !important;
	margin-top: 30px !important;
	background: none !important;
}

#YourMapContainer .MicrosoftMap .NavBar {
	width: 100%;
	top: -30px;
	-moz-box-shadow: 0px 0px 4px #000;
	-webkit-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888');
}

#YourMapContainer .NavBar_zoomDrop, #YourMapContainer .MicrosoftMap_NavBar_typeMenu {
	-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	border: 1px solid #aaaaaa;
	border-top: none;
}

Revision: 36929
at November 30, 2010 23:43 by wildpeaks


Updated Code
/**
 * Moves the NavBar "outside" of the map so that it doesn't interfer with Map.setView.
 * and adds a subtle shadow on the NavBar and its dropdown menus.
 */

#YourMapContainer {
	overflow: hidden;
	background: url('grid.png');
}

#YourMapContainer .MicrosoftMap {
	overflow: visible !important;
	margin-top: 30px !important;
	background: none !important;
}

#YourMapContainer .MicrosoftMap .NavBar {
	width: 100%;
	top: -30px;
	-moz-box-shadow: 0px 0px 4px #000;
	-webkit-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888');
}

#YourMapContainer .NavBar_zoomDrop, #YourMapContainer .MicrosoftMap_NavBar_typeMenu {
	-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	border: 1px solid #aaaaaa;
	border-top: none;
}

Revision: 36928
at November 30, 2010 23:42 by wildpeaks


Initial Code
/**
 * Moves the NavBar "outside" of the map so that it doesn't interfer with Map.setView.
 * and adds a subtle shadow on the NavBar and its dropdown menus.
 */

#map {
	overflow: hidden;
	background: url('grid.png');
}

#map .MicrosoftMap {
	overflow: visible !important;
	margin-top: 30px !important;
	background: none !important;
}

#map .MicrosoftMap .NavBar {
	width: 100%;
	top: -30px;
	-moz-box-shadow: 0px 0px 4px #000;
	-webkit-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888');
}

.NavBar_zoomDrop, .MicrosoftMap_NavBar_typeMenu {
	-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
	border: 1px solid #aaaaaa;
	border-top: none;
}

Initial URL
http://www.wildpeaks.com

Initial Description
**Important: this snipplet has moved to Github.**

 - [Nicer dashboard and Map.setView padding in Bing Maps AJAX 7.0](https://gist.github.com/1973161)

----------------

Moves the NavBar "outside" of the map so that it doesn't interfer with Map.setView and adds a subtle shadow on the NavBar and its dropdown menus.

 [Bing Maps AJAX 7.0 Control API Reference](http://msdn.microsoft.com/en-us/library/gg427611.aspx "Bing Maps AJAX 7.0 Control API Reference")

Initial Title
Bing Maps AJAX control 7.0: Better-looking NavBar (Dashboard) and Map.setView padding

Initial Tags

                                

Initial Language
CSS