SharePoint 2010: Basics on how to apply branding

Step 1: The first thing that you have to consider is how the SharePoint site that you are branding is configured?

• Is it SharePoint 2007 or 2010?


• Is it WSS or Full SharePoint Server?


• Will Publishing be enabled?


• What site templates will be branded?

• Publishing


• Team Collaboration


• Meeting Workspaces


• Search Center


• My Sites


• Administration Pages “_layouts/”


• Other?

Step 2: Be prepared and gather all design support files from your visual designer

• Support Images optimized for web


• Style Guide

• Hex colors for all design elements

• Text body colors


• Text link colors


• Text link hover colors


• Text header colors


• Background colors

Heights and widths of design elements

• Ribbon


• Header


• Logo


• Navigation Container


• Navigation Links


• Left Side Navigation


• Content Area

Step 3: Choose your implementation approach

• Store all CSS and Images on the server

• This approach allows you to store all of your CSS and images in a custom folder on the server within the 14 hive, 12 hive for 2007.


• SharePoint 2010 - C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\customfolder


• SharePoint 2007 - C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\customfolder


• This approach allows you to have a single source for all of your CSS and images. Note that it is recommended to create a solution package with all of your files and deploy it especially if you have more than one web front end server. This will push all of the files to the correct location on each web front end so you do not have to do it manually.

The other option is to Store all CSS and Images within SharePoint Style Library (Publishing Infrastructure and Site Publishing Feature need to be enabled)

• This approach allows you to have version control over your CSS and images. However these files will need to be added to each site collection the branding will be applied to so if you have a lot of site collections there will not be a single source for your files. AKA if you update one it will not update the branding globally.

Step 4a: If you choose to go with storing all of your CSS and images on the server, below are the steps to get you started.
I will walk you through the manual process of adding in the files, a solution would be created to add these files in normally. Please note that this should be done in a development environment first.

• log into your web front end as a administrator


• Navigate to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES


• create a new folder within the styles library that is either your company name or project name or what ever makes sense


• upload all of your optimized images into this folder


• right click > new > text document


• rename it custom.css


• Open up the document in notepad and add in the following just to make sure you have it linked up correctly

body #s4-leftpanel{display: none !important;}
body .s4-ca{background-color: #CCC; margin-left: 0px !important;}
body #s4-mainarea{width: 940px; margin: auto; float: none; clear:both;}

• Save the custom CSS file

Step 4b: If you choose to go with storing all of your CSS and images within SharePoint, below are the steps to get you started.

• first you need to make sure that you have the publishing infrastructure and publishing feature activated within your site.


• To verify click on Site Actions > Site Settings > Site Collection Administration > Site collection features

• Then to verify the site feature click on Site Actions > Site Settings > Site Actions > Manage site features

• by activating the publishing feature it creates a style library at the root of the site collection where you will be able to store and reference your custom CSS and images.


• navigate to the new style library:
  http://sitename/Style%20Library/Forms/AllItems.aspx


• you will normally see four folders

• en-us


• Images


• Media Player


• XSL Style Sheets

create a new folder at this root location that is either your company name or project name or what ever makes sense

upload all of your optimized images into this folder

on your local machine create a new text document in notepad

save it as “custom.css”, make sure you save as type “All Files” and Encoding “UTF-8”

• Open up the document in notepad and add in the following just to make sure you have it linked up correctly

body #s4-leftpanel{display: none !important;}
body .s4-ca{background-color: #CCC; margin-left: 0px !important;}
body #s4-mainarea{width: 940px; margin: auto; float: none; clear:both;}

• Save the custom CSS file

Step 5a: Apply your server side custom CSS to your site.
You now have a few choices on how you want to apply your custom CSS to your site/page.

• Approach 1: (Hardest) Creating a custom master page and referencing your custom CSS in the header.

• For non-publishing Click on Site Actions > Site Settings > Galleries > Master pages


• For publishing Click on Site Actions > Site Settings > Galleries > Master pages and page layouts


• hover over v4.master and click on Send To > Download a Copy


• Save this copy of v4.master onto your local machine


• Rename it customv4.master


• Open up the master page in notepad.


• ** Do not try to open it locally with SharePoint designer, it will add in a bunch of weird references and your master page might get errors.**


• at the end of the head tag add the following code


• <SharePoint:CssRegistration name="custom/custom.css" After="corev4.css" runat="server"/>


• Save the master page and upload it into the master page gallery.


• Make sure that you publish it as a major version and approve it as needed.


• to apply your custom master page when publishing has been enabled click on site actions > site settings > look and feel > master page


• If Publishing is not enabled you will have to use SharePoint designer to set this custom master page, there will not be an option to do this through the UI.

• Change the Site Master page and the System Master page to your customv4.master and then click on ok


• Now You will finally see that you branding has been applied.

• Approach 2: (Medium) With publishing enabled, specify your custom CSS as a Alternate CSS.

• Click on site actions > site settings > look and feel > master page


• Scroll down to the Alternate CSS URL section and click on “Specify a CSS file to be used by this publishing site and all sites that inherit from it:”


• add in the following path:


• _layouts/1033/styles/custom/custom.css


• then click on ok


• your site should now have the custom branding applied to this site and if you choose to any existing sub sites.


• ** note that when new sites are created the branding will not get applied to the new sites. The “Reset all sub sites to inherit this alternate CSS URL” only applies to existing sites and not sites that get created in the future. **

Approach 3: (Easy) Add a content editor web part to the page and reference your custom CSS.

• Add the content editor web part to the page


• Click to add in content and then in the markup section within the ribbon click on HTML > Edit HTML Source


• paste in the following:


• <link href="/_layouts/1033/styles/custom/custom.css" rel="stylesheet" type="text/css"/>


• Save/Publish the page. Just this page will now have the custom branding applied.

Step 5b: Apply your Style library custom CSS to your site.
You have the same options as above but with different URL paths.

• Approach 1: (Hardest) Creating a custom master page and referencing your custom CSS in the header.

• Use same method above to create your custom master page but use the following reference at the end of the HEAD section.


• <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/custom/custom.css %>" After="corev4.css" runat="server"/>

Approach 2: (Medium) With publishing enabled, specify your custom CSS as a Alternate CSS.

• Click on site actions > site settings > look and feel > master page


• Scroll down to the Alternate CSS URL section and click on “Specify a CSS file to be used by this publishing site and all sites that inherit from it:”


• add in the following path:


• /Style Library/custom/custom.css


• then click on ok


• your site should now have the custom branding applied to this site and if you choose to any existing sub sites.


• ** note that when new sites are created the branding will not get applied to the new sites. The “Reset all sub sites to inherit this alternate CSS URL” only applies to existing sites and not sites that get created in the future. **

Approach 3: (Easy) Add a content editor web part to the page and reference your custom CSS.

• Add the content editor web part to the page


• Click to add in content and then in the markup section within the ribbon click on HTML > Edit HTML Source


• paste in the following:


• <link href="/Style Library/custom/custom.css" rel="stylesheet" type="text/css"/>


• Save/Publish the page. Just this page will now have the custom branding applied.

CSS - Keep footers at the bottom of the page

When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done.

When I first ditched tables for pure CSS layouts I tried to make the footer stay at the bottom but I just couldn't do it. Now, after a few years of practice I have finally figured out a neat way to do it. My method uses 100% valid CSS and it works in all standards compliant browsers. It also fails gracefully with older browsers so it's safe to use on any website.

The main features

• 
  

  Works in all modern, standards compliant browsers

  
  Compatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8


• 
  

  Fails gracefully on older browsers

  
  Older non-standards compliant browsers position the footer under the content as per normal. We can't help it if people are using an out of date browser, all we can do is reward people who have upgraded by giving them a better browsing experience through progressive enhancement.


• 
  

  Longer content pushes the footer off the page

  
  On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space.


• 
  

  100% valid CSS with no hacks

  
  The CSS used in this demo is 100% valid and contains no hacks.


• 
  

  No JavaScript

  
  JavaScript is not necessary because it works with pure CSS.


• 
  

  iPhone compatible

  
  This method also works on the iPhone and iPod Touch in the mobile Safari browser.


• 
  

  Free to download

  
  Simply save the source code and use it however you like.

There is only one limitation

You must set the height of the footer div to something other than auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a big limitation, but it is essential for this method to work correctly.

If you have a lot of text in your footer then it's also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer than there's nothing to worry about – just set your footer height to a pixel value and away you go.

So how does it work?

It's actually not that complicated. There are two parts to it - the HTML and the CSS.

The HTML div structure

<div id="container"> <div id="header"></div> <div id="body"></div> <div id="footer"></div> </div>

There are only four divs required for this to work. The first is a container div that surrounds everything. Inside that are three more divs; a header, a body and a footer. That's it, all the magic happens in the CSS.

The CSS

html, body { margin:0; padding:0; height:100%; } 
#container { min-height:100%; position:relative; } 
#header { background:#ff0; padding:10px; } 
#body { padding:10px; padding-bottom:60px; 
/* Height of the footer */ } 
#footer { position:absolute; bottom:0; width:100%; height:60px; 
/* Height of the footer */ background:#6cf; }

And one simple CSS rule for IE 6 and IE 5.5:

#container { height:100%; }

The html and body tags

The html and body tags must be set to height:100%; this allows us to set a percentage height on our container div later. I have also removed the margins and padding on the body tag so there are no spaces around the parameter of the page.

The container div

The container div has a min-height:100%; this will ensure it stays the full height of the screen even if there is hardly any content. Many older browsers don't support the min-height property, there are ways around it with JavaScript and other methods but that is out of scope for this article. The container div is also set to position:relative; this allows us to absolutely position elements inside it later.

The header div

There is nothing unusual with the header. Make it whatever colour and size you like.

The body div

The body is quite normal too. The only important thing is it must have a bottom padding that is equal to (or slightly larger than) the height of the footer. You can also use a bottom border if you prefer but a margin won't work.

The footer div

The footer has a set height in pixels (or ems). The div is absolutely positioned bottom:0; this moves it to the bottom of the container div. When there is little content on the page the container div is exactly the height of the browser viewport (because of the min-height:100%;) and the footer sits neatly at the bottom of the screen. When there is more than a page of content the container div becomes larger and extends down below the bottom of the viewport - the footer is still positioned at the bottom of the container div but this time you need to scroll down to the end of the page to see it. The footer is also set to width:100%; so it stretches across the whole page.

The IE 6 & IE 5.5 CSS

Older versions of Internet Explorer don't understand the min-height property but lucky for us the normal height property behaves exactly the same way in these old Microsoft browsers, that is, it will stretch to 100% height of the viewport but if the content is longer it will stretch even further. We simply expose this 100% height rule to Internet Explorer only by using IE conditional comments. View the source on the demo to see how this is done.

 

So there you have it... A simple, valid way to make the footer get down! I hope you find it useful.

Customizing the global navigation with Css and jQuery in SharePoint 2010

The global navigation in SharePoint is an important factor for the SharePoint site, this navigation are there to help orient users so they easily can move around the site. So when it comes to branding and customizing a SharePoint site it´s one of the key factors. When you branding the global navigation don´t forget to think simple but attractive, users may use the site navigation more than they use the search to find information.

In SharePoint 2010 the global navigation renders with unordered lists and list items (UL and LI), which gives us a simpler and more standard way for customization, especially compared to previous versions of SharePoint when the navigation rendered in a nestled table markup. There are a couple of ways and tools when it comes to build a custom navigation in SharePoint. The central point for the navigation is the functionality and the look and feel that means that we have to deal with CSS 2.1 or 3.0 and the SharePoint ASP menu control and its data source.

Global navigation

▶

An example of a customized SharePoint OTB menu with use of CSS and jQuery. Check the nextcomming post (Part II) of how to extend the navigation with jQuery.

The options we have depend of the needs, but also the approach you choose depends if we talking about a public faced web site or an Intranet.

• Use the OTB control with changed settings


• Extend the OTB menu control with custom Css 2.1 or 3.0


• Extend the OTB menu control and hook it up with custom jQuery


• Extend the OTB menu control with a custom site map provider


• Code a new navigation control, and use a technique like Silverlight


• Use a complete stand-alone navigation with jQuery that isn’t connected to SharePoint

There is a lot to think about when it comes to customization of the SharePoint global navigation so therefore I´ll split this article in the minimum of three articles. So here´s the plan:

1. Introduction and How to customize the global navigation with CSS 2.1 and 3.0 (this post)


2. How to customize the global navigation with custom CSS and how to use jQuery to work with feeling of the navigation, like animating a menu. Go there


3. Tips and tricks about navigation settings, how to use different site map providers & multiple navigation providers, branding dropdown menus and more.

Below is a bunch of examples for customized navigation menus I have created specific for the article series. Of course, no guaranties for real cross browser CSS; these examples are mostly verified in IE 8 and Firefox 3.6.12, GC and Safari.







Open up your SharePoint top site with your favorite tool SharePoint Designer 2010 and create a CSS file and put in a reference to this in a your (custom) master page. Put in the following line just below SharePoint:CSSlink tag in the master page.

<SharePoint:CssRegistration name="/Style Library/Blog/Blue.css" runat="server" After="corev4.css"/>

First off, a clean blue navigation with a smooth gradient background color. It has four properties for the background selectors and that´s because this is for various browsers. There are also a couple of extra classes below ‘Other stuff’ that you don´t need specific for the navigation. You can take those away if you prefer.



/*---| By @Cstahl 2010 |---*/
.s4-lp, body #s4-topheader2{
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
margin-left:0px;
border-top:0px;
border-bottom:0px;
margin-left:0px;
}
.menu-horizontal{
margin-left:10px;
border-right: 1px #167FB3 solid;
background-image:none;
}
.menu-horizontal ul li{
color:#fff!important;
min-height:31px;
line-height:30px;
border:0px;
padding:0px;
margin:0px;
border-left:1px #167FB3 solid;
}
.menu-horizontal ul li a{
color:#fff!important;
font-weight:bold;
border:0px!important;
padding:0px!important;
margin:0px;
height:31px!important;
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
padding-right:20px!important;
padding-left:20px!important;
}
.s4-toplinks .s4-tn > .menu-horizontal ul li a:hover {
text-decoration:none!important;
/*if use 333 the DD color will not work*/
color:#333!important;
background-color:#036ba8; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#036ba8), to(#4fb3d3));
background: -moz-linear-gradient(top, #036ba8, #4fb3d3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3)";
height:31px!important;
border:0px;
padding:0px;
margin:0px;
}
.s4-toplinks .s4-tn > .menu-horizontal a.selected {
color: #fff!important;
background-color:#4fb3d3; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#4fb3d3), to(#036ba8));
background: -moz-linear-gradient(top, #4fb3d3, #036ba8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036ba8);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036caa)";
line-height:30px;
height:31px;
border:0px;
padding:0px;
margin:0px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none!important;
}
.s4-tn ul.dynamic {
background-image:none!important;
border:1px solid #f7f7f7;
border-top:0px;
border-bottom:1px solid #ccc;
margin:0px;
padding:0px;
}
.s4-tn li.dynamic {
background-image:none!important;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:0px solid #ccc;
border-left:1px solid #ccc;
}
.s4-tn li.dynamic > .menu-item {
display:block;
padding-left:19px!important;
white-space:nowrap;
font-weight:normal;
background-color:#ffffff!important;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7))!important;
background: -moz-linear-gradient(top, #ffffff, #f7f7f7)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)"!important;
color:#333!important;
}
.s4-tn li.dynamic > a:hover {
background-color:#ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff))!important;
background: -moz-linear-gradient(top, #ffffff, #ffffff)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)"!important;
color: green!important;
}
/*----- Some other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:0px;
background-color:#f7f7f7!important
}
.s4-title{
min-height:70px;
padding:0px;
}
.s4-titlelogo{
padding-left:10px
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:3px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background-color:#a0d9e6; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#f7f7f7));
background: -moz-linear-gradient(top, #a0d9e6, #f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:70px;
}

Next: A tabbed navigation with use of three images. In the next post I will show you have to interact with the tabs to make them jump on hover.
Want to try the tabbed navigation?



/*---| By @Cstahl 2010 |---*/
.menu-horizontal{
margin-left:5px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none;
}
.menu-horizontal ul li{
text-align:center;
font-size:11px;
line-height:18px;
padding:0;
margin:0;
}
.menu-horizontal ul li a{
width:105px;
background-image:url('/Style Library/Blog/Images/tab.png');
background-position: 0 0;
background-repeat:no-repeat;
padding:0;
cursor:pointer;
color:#0a7285;
text-decoration:none;
}
.menu-horizontal ul li.active{
width:105px;
height:18px;
margin:0;
}
.menu-horizontal ul li.active a{
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
color:#0a7285;
width:105px;
height:18px;
padding-top:8px;
}
.menu-horizontal ul li a:hover{
background-image:url('/Style%20Library/Blog/Images/TabActiveHover.gif');
background-position: 0 0;
background-repeat:no-repeat;
width:105px;
}
.s4-toplinks .s4-tn a.selected{
border-style: none;
border-color: inherit;
border-width: 0px;
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
background-color: transparent;
width:118px;
height:16px;
color:#333;
margin-top:1px;
margin-right:1px;
margin-bottom:0px;
margin-left:1px;
}
.s4-tn ul.dynamic{
background-color:#f7f7f7!important;
border:1px solid #ccc;
border-top:0px;
margin-left:2px;
}
.s4-tn li.dynamic > .menu-item{
display:block;
padding:5px 10px;
white-space:nowrap;
font-weight:normal;
background-image:none;
text-align:left
}
.s4-tn li.dynamic > a:hover{
font-weight:normal;
background-color:#9FD8E6;
background-image:none;
}
/*----- Other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:6px;
background-color:#f7f7f7!important
}
.s4-titlelogo{
padding-left:10px
}
.s4-title{
padding-left:0px;
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:2px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#7ec1d0));
background: -moz-linear-gradient(top, #f7f7f7, #7ec1d0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:100px;
}
.s4-lp, body #s4-topheader2{
background-color:#7ec1d0;
margin-left:0px;
border-top:0px;
border-bottom:0px;
}

CSS Hacks: Removing the horizontal scroll bar

Sometimes when you've coded up your website in CSS no matter what width fixes you try you'll still see that horrible horizontal scrollbar on your website's pages. Although it is harmless and doesn't effect how your site displays (For the most part) im taking about something like this:In this text box you will see a scroll bar going across below. It is not being used so it's not really needed!

When scroll bars are needed they are acceptable but this tutorial will show you a easy way of removing it. Via using a small code in your stylesheets

overflow-x: hidden;

This code simply hides your horizontal scroll bar. Simply think of it like this. You have graph that has a Y axis and X axis. The Y axis is the vertical line the X axis is the horizontal line, simular to this your overflow-y: is your vertical scrollbar (Going down) and your overflow-x: is your horizontal scrollbar going across. You can also expand on this code by using such codes like:

overflow-x:auto;overflow-x: visible; overflow-x: scroll;

This can also be applied to the overflow-y: property

To place the code properly it needs to placed within a special part of your stylesheet:

html {overflow-x: hidden;}

This is most simpliest way to place this code into your stylesheet, however it can be placed in other CSS properties such as the body tag and general divs. However if you place the code anywhere but the html { property you need to make sure you define some sort of width/height/position/float etc.

html, body {margin: 0px; background-color:#FFFFFF; padding: 0px; overflow-x: hidden; }

Placing this hack in your pages (Not in a stylesheet)

This hack can also be used to stop scrollbars in other things such as text area's to do this you would simply use this code:

<textarea cols="35" rows="4" style="overflow-x: hidden;">No scroll bar!</textarea>

Using the code above your text box will look like this:

Look no hortizontal scroll bar!

The great thing about this small code is that it hides any horizontal scrollbar in anything HTML related as well as hiding the bottom scroll bar on your browser window!

This CSS hack isn't valid in CSS 2.1 but is valid in CSS 3. Be aware of that! Consult W3.org's CSS validators for more information on different CSS levels as well as validation on CSS, and how to make sure your using valid CSS!

 

Drop Down Menu using CSS and JavaScript

<div>
<div id="nav">
<ul>
<li><a>HOME</a></li>
<li><a>Menu2</a></li>
<li><a>Menu3</a></li>
</ul>
</div>
</div>

Js Code:

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
//dropdownindicator: '', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 5], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

//No need to edit beyond here////////////////////////

dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|s+)"+targetclass+"($|s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add" && !needle.test(el.className))
el.className+=" "+targetclass
},

showmenu:function(dropmenu, e){
if (this.enablereveal[0]){
if (!dropmenu._trueheight || dropmenu._trueheight dropmenu._trueheight=dropmenu.offsetHeight
clearTimeout(this.revealtimers[dropmenu.id])
dropmenu.style.height=dropmenu._curheight=0
dropmenu.style.overflow="hidden"
dropmenu.style.visibility="visible"
this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
}
else{
dropmenu.style.visibility="visible"
}
this.css(this.asscmenuitem, "selected", "add")
},

revealmenu:function(dropmenu, dir){
var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
if (curH var newH=Math.min(curH, maxH)
dropmenu.style.height=newH+"px"
dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
}
else{ //if done revealing menu
dropmenu.style.height="auto"
dropmenu.style.overflow="hidden"
clearInterval(this.revealtimers[dropmenu.id])
}
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
var dropmenuW=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < dropmenuW) //move menu to the left?
edgeoffset=dropmenuW-obj.offsetWidth
}
else{
var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
var dropmenuH=this.dropmenuobj._trueheight
if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
edgeoffset=dropmenuH+obj.offsetHeight
if ((this.dropmenuobj.y-topedge) edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.hidemenu() //hide menu
this.clearhidemenu()
this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
this.asscmenuitem=obj //reference associated menu item
this.showmenu(this.dropmenuobj, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.positionshim() //call iframe shim function
},

positionshim:function(){ //display iframe shim function
if (this.iframeshimadded){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
this.shimobject.style.display="block"
}
}
},

hideshim:function(){
if (this.iframeshimadded)
this.shimobject.style.display='none'
},

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},

dynamichide:function(m, e){
if (!this.isContained(m, e)){
this.delayhidemenu()
}
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},

hidemenu:function(){
this.css(this.asscmenuitem, "selected", "remove")
this.dropmenuobj.style.visibility='hidden'
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
this.hideshim()
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

addEvent:function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

startcssMenu:function(){
if (!this.domsupport)
return
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
for (var ids=0; ids var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
var asscdropdownmenu=document.getElementById(relvalue)
this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
try{
menuitems[i].innerHTML=menuitems[i].innerHTML
//menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator
}catch(e){}
this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
if (!cssdropdown.isContained(this, e)){
var evtobj=window.event || e
cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
}
}, "mouseover")
this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
}
} //end inner for
} //end outer for
if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
document.write('')
this.shimobject=document.getElementById("iframeshim") //reference iframe object
this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
this.iframeshimadded=true
}
} //end startcssMenu

}

 

 

 

 

CSS Code:

/* MAIN NAVIGATION */
.container
{
background: #fff;
width:980px;
margin: 0px auto;
}

#nav
{
text-transform: uppercase;
font-size: 12px;
line-height:17px;
background: #5b3a6b url(../images/navbar.png) repeat-x 0 0;
}

#nav ul
{
list-style: none;
display: block;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
}

#nav ul li
{
margin: 0px 0px 0px 4px;
padding: 0px;
float: left;
}

#nav ul li a
{
line-height:12px;
padding: 12px 15px 12px;
text-decoration: none;
color: #fff;
display: block;
}

#nav .current_page_item a, #nav .current_page_item a:hover, #nav li a:active, #nav .current_page_ancestor
{
text-decoration: none;
color:#fff;
background:transparent url(../images/navbarH.png) repeat-x 0 0px;
}

#nav li a:hover
{
color: #FF9900;
background:transparent url(../images/navbarH.png) repeat-x 0 0px;
}

#nav li a:active
{
color:#ddd;
background:transparent url(../images/navbarH.png) repeat-x 0 0px;
}

/* CLEARFIX -- fixes clearing issue for floated elements */
.fix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.fix
{
display:inline-block;
}

* html .fix
{
height:1%;
}

.fix
{
display:block;
}

.clear
{
overflow: hidden;
width: 100%;
}