How to Center a Website With CSS

Centering a website is a key part of many CSS layouts. While there are many ways to do it in a variety of situations, the following is an explanation that is purely CSS, avoids messing with percentages, and is compatible with all modern browsers.

I’ve gotten in the habit of starting by resetting any default margins or padding set the browser. Browsers have default style sheets that are loaded automatically as a foundation for any other CSS. Firefox, for example has a default body margin of 8px. This is a simple way to reset any default values that could interfere with the CSS we are trying to write.

More extensive “reset” stylesheets are available, but for the purpose of this exercise we will only reset the essentials, and keep the code to a minimum.

view plaincopy to clipboardprint?

1. *{  
2.    margin:0;  
3.    padding:0;  
4. }  

I will be using a main div tag with an ID of “wrapper” for this tutorial. You can set the width to any value your site needs (keep resolutions in mind!) I have picked a width of 960px in favor of a higher resolution average (1024×768). The basic page structure is broken down below:

We are first going to assign a style for the #wrapper div tag that will center it within the browser. This is done using the margin parameter. Remember to specify the width of the #wrapper or the element will not center. After all, it’s hard to center something that takes up 100% of width available. For testing purposes you may want to assign a background color and height to the #wrapper to see the results.

view plaincopy to clipboardprint?

1. #wrapper{  
2.    width:960px;  
3.    margin:0 auto;  
4. }  

Put simply, Internet Explorer has some issues. When all the other browsers are told to jump, Internet Explorer reinvents the term jump and then hits the deck. One of the joys of web design is compensating for these differences in interpretation. In this case, Internet Explorer 6 will need some special attention center the main div (#wrapper).

In order to compensate for IE6′s shortcomings we have to first set the text alignment to center. This will ensure that the wrapper gets centered on the page.

view plaincopy to clipboardprint?

1. body{  
2.    text-align:center; /*For IE6 Shenanigans*/  
3. }  

The body tag encapsulates the wrapper, so the text alignment on it is inherited by the wrapper. Odds are you will want the text to be left-aligned. To do this we will need to  update the #wrapper styles to set the alignment back to the left.

view plaincopy to clipboardprint?

1. #wrapper{  
2.    width:960px;  
3.    margin:0 auto;  
4.    text-align:left;  
5. }  

That should do it! This small block of CSS can center any website needed, simply change the sizes. Your complete CSS code should resemble the block below:

view plaincopy to clipboardprint?

1. *{  
2.    margin:0;  
3.    padding:0;  
4. }  
5.   
6. body{  
7.    text-align:center; /*For IE6 Shenanigans*/  
8. }  
9.   
10. #wrapper{  
11.    width:960px;  
12.    margin:0 auto;  
13.    text-align:left;  
14. }  

basix

• Basix\
• Workflow

\Rating:

• 1
• 2
• 3
• 4
• 5

Planning Ahead: Ways to Improve Your Web Design Workflow

If you’re looking to up your game as a web designer, the planning phase is probably the single most “bang for your buck” skill-set that you could work on. Sometimes it seems that in the dizzying world of web design blogs, roundups, and screencasts, people just skim over the part of the process that makes everything else possible.

This post marks the first in a series where we’ll be examining the “planning” phase in web design. The goal: to better understand the role that planning plays in design; when it’s effective, and when it’s wasted.

---

Why Plan At All?

Some web designers feel that planning has become a somewhat irrelevant part of the creative workflow –“Why bother planning when I can dig right into the creative phase”?; this kind of attitude is great for the designer who doesn’t mind spending an extra 10 hours on a project for the fun of it, but for others it’s a waste of time to ignore something so integral to the design process.

Before we really dig in, it’s probably important to explain what kind of planning I’m referring to – I’m not referring to the type of plan that involves “guessing” and falls apart minutes after the project starts. What I am talking about is a plan that will eliminate guesswork, define goals, and establish a solid foundation for you to get creative with. The art of planning is more like a “brainstorm with a purpose” than it is a comprehensive technical spec.

It’s a waste of time to ignore something so integral to the design process

Planning is the formative phase in any project – it doesn’t hinder the creative process, it defines it. A good planning session doesn’t even require a lot of time or energy, but the benefits will last far into the entire duration of the project. A thoughtful approach to planning will help boost your creativity, save you time in the creative process, and make you look like a rockstar to clients!

---

When Should You Plan?

Before you even fire up Photoshop or your favorite code-editor. Design Planning is about setting the overall mission of a project, so it’s important that you define the ultimate goal of the website that you’re going to be working on before you approach it creatively. Some top level questions you should ask are:

• Why will people be visiting the site?
• What function does it serve you or your client?
• What needs to happen for this design to be a success?

Answering these questions early on will save time, energy, and money in the long run, but more than anything, it’ll help you to figure out exactly how your website design is going to rock! Something as simple as spending 15 minutes planning out your ultimate goals can help refine your purpose and make sure that you don’t miss the bigger picture.

---

What Should You Plan?

Planning is going to be a little different for everyone out there – some sites are straight forward and require just a few minutes of planning; others are big, complex, and can spend days, weeks and even months in the planning stages. I’ll be discussing these steps in more depth in future articles, but I can outline about 6 crucial planning steps in any web design project:

1. Define Success
2. Define the Content
3. Define the Features
4. Consider the Audience
5. Do the Research
6. Organization, Hierarchy and the Wireframe

---

What Does Planning Look Like?

The actual format of your planning can be anything from an elaborate creative brief document to a sketch on the back of a napkin. Honestly – use what works for you and don’t try to force it. If you aren’t ever going to go back and read an elaborate creative brief, then don’t bother writing one! The trick is to use a planning format that works for you and your workflow genetics. I happen to love the idea of hands-on notepads; especially those snazzy Action Books from Behance – but realistically, I know that I do my best planning using a simple text-editor app: no frills, no formatting, no distractions. Your planning method is going to look unique to you though – so take some time to consider what works best for your own personal style.

The actual format of your planning can be anything from an elaborate creative brief document to a sketch on the back of a napkin.

---

Know the Limitations of Planning

Let’s make one thing clear: designing a website is a lot like building something in a vacuum; Try as you might, you won’t ever be able to plan for every possible outcome when your site hits the web. The likelihood that your design will cover every possible scenario for the next 2-3 years of that site’s life are slim at best. The site will change, the visitors will change, heck, you or your client will change.

The planning stage isn’t for defining each and every tiny variable, it’s for painting broad strokes and establishing your overall strategy. Planning each and every detail will ultimately fail because it will force you to make guesses – and regardless of how educated a guess might be, it’s still just a guess. Keep your planning focused on the big picture stuff that will stay the same throughout the project.

In this series of articles, I’ll be introducing some tips, tricks, and other techniques to improve your own planning process. I’m going to be catering this series towards newer designers, but it’s my hope that everyone can glean some useful information!

Prototype Javascript Framework

Prototype framework enables you to deal with Ajax in a very easy way. It simplifies the way of using Javascript and deals in a smart way with JavaScript code returned from a server and provides helper classes for polling. And also, it is cross-browser compatible.

The biggest part of the Prototype framework are its DOM extensions. Prototype adds many convenience methods to elements returned by the $() function: for instance, you can write$('editForm').addClassName('active').show() to get the element with the ID ‘editForm‘, add a class name to it and show it (if it was previously hidden).

This framework can save you more than 50% on coding javascript and developing an ajax driven with large amount of DOM manipulations web site. If you have not tried it, please have a look. A well-defined framework is needed for developing a professional web application.

Requirements: Any Browsers
Demo: http://www.prototypejs.org/api
License: MIT License

Beautiful Scalable CSS Buttons

David’s Kitchen wrote an article: Scalable CSS Buttons Using PNG and Background Colors taught us how to create dynamic CSS Buttons using PNG, transparency and background colors that degrades nicely and supports full scalability.

It is really handy for developers because the length of the button will be changed according to the length of the text. The buttons are very pretty with Web 2.0 style. The color of the button changed if you hover on it. However, the buttons are not looking very nice in Internet Explorer 6.0, hope there is a version which supports IE 6.0 as well soon.

Requirements: Internet Explorer 6.0+, Firefox 1.5+
Demo: http://monc.se/kitchen/stew/buttons/btn.html
License: No License

Google Gear Enables Offline Use Of Web ApplicationS

Google Gears is an open source browser extension that enables web applications to provide offline functionality using JavaScript APIs. Due to the concern about internet security, building web application which store and serve sensitive information locally on users’ own computers are very useful.

• Store and serve application resources locally
• Store data locally in a fully-searchable relational database
• Run asynchronous Javascript to improve application responsiveness

It is a similar idea with Apollo which enable offline use of web applications. From now on, users can store data locally in their database on their own computer. So that some users can use the web application they like, at the same time prevent their sensitive information being hacked by storing their information locally.

Requirements: Windows XP / Vista, Internet Explorer 6.0+, Firefox 1.5+
Demo: http://code.google.com/apis/gears/sample.html
License: New BSD License