Paul Alkema

Discussions on Web Development and Security

Paul Alkema

Entries Tagged as CSS

960 CSS Framework

November 30, 2010 · 73 Comments

About 960

I was recently introduced to a css framework called 960. At first I was EXTREMELY skeptical, but after using it and actually looking at the code behind it, I have officially become a 960 fan.

First off, let me start by saying this css framework isn't going to solve all of your css issues but it will most definitively help. The way that 960 works is it puts everything into a grid. You have 3 options, the 12 column grid, the 16 column grid and the 24 column grid. I personally prefer the 16 column grid but it's really just a personal preference.

A down side to using 960 is that it restricts your design to this grid. This in my opinion makes things look really nice and organized but some designers might not like having this limitation. Another downside is that you really need to be disciplined to not add any margin or padding on the left or right of any of your div's as this breaks the grid.

The upside, is that it really helps things to be pixel perfect and consistent. I've had issues before with css where in one spot something might be 10px away then on a different page it's 11px away. Why? Usually something stupid; 960 will usually take care of these types of issues. Also, it really helps css be more cross compatible.

How To Use It

In this example I'm going to explain how to create a basic header, body, footer template.

Lets start by importing the 960 grid onto our page. You should download the zip file located on 960's website and import the css into your file. You should also create a css file specific to your page, I'm going to use the file custom.css in this example.

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/custom.css" />

In my custom css file I put classes used to define the height and background colors of each divs. Most of the time defined heights are not necessary as content that is normally inside of the div created my height however my example contains no content so this was necessary. When using 960 adding margin or padding, top and bottom are allowed along with adding defined height however margin and padding on the left or right side along with defined widths are not recommended as this breaks the 960 grid.

/* sets background color to gray */
body {
	background-color:#CCC;
	color:#FFF;
}
/*set foreground color to white */
.container_16 {
	background-color:#FFF;
}


/* set heights and backgrounds for my containers. */
#header {
    height:120px;
	background-color:#000;
}
#nav {
    height:32px;
	background-color:#999;
}
#body {
	background-color:#FFF;
	min-height:400px;
}
#footer {
	background-color:#666;
	min-height:154px;
}

/* set heights and background colors for my children divs. */
#body div{
	margin-top:10px;
	background-color:#333;
	height:380px;
}
#footer div {
	margin-top:10px;
	background-color:#CCC;
	height:134px;
}

The html for this is very basic; Just 4 divs with the container_16 class. This class is used only on containers where you want the full 16 column with.

  <div class="container_16" id="header">
      Header
  </div>
  <div class="container_16" id="nav">
      Nav
  </div>
  <div class="container_16" id="body">
      Body
  </div>
  <div class="container_16" id="footer">
      Footer
  </div>

When we put divs inside our containers we need to use the grid_## class. This class should only be used inside of the container class and if the number proceeding the underscore is less than 16, than it should always be used in conjunction with other divs that equal 16. Also, one of the awesome things about 960 is that not only can you use divs to do some of these things but you can use li's, h1's, h2's and pretty much any other html tag.

<div class="container_16" id="header">
	  <div class="grid_16">
		  Header
	  </div>
</div>
  <div class="container_16" id="nav">
      <ul>
        <li class="grid_2">
           Nav 1
        </li>
        <li class="grid_2">
           Nav 2
        </li>
        <li class="grid_2">
           Nav 3
        </li>
        <li class="grid_2">
           Nav 4
        </li>
        <li class="grid_2">
           Nav 5
        </li>
        <li class="grid_2">
           Nav 6
        </li>
        <li class="grid_2">
           Nav 7
        </li>
        <li class="grid_2">
           Nav 8
        </li>
      </ul>
  </div>
  <div class="container_16" id="body">
      <div class="grid_4">
        Body Column 1
      </div>
      <div class="grid_4">
        Body Column 2
      </div>
      <div class="grid_4">
        Body Column 3
      </div>
      <div class="grid_4">
        Body Column 4
      </div>
  </div>
  <div class="container_16" id="footer">
      <div class="grid_4">
        Footer Column 1
      </div>
      <div class="grid_4">
        Footer Column 2
      </div>
      <div class="grid_4">
        Footer Column 3
      </div>
      <div class="grid_4">
        Footer Column 4
      </div>
  </div>

There is more to it, but this is the basics so PLEASE, make sure you check it out. I really think it could make your life easier. 960's website

CHECK OUT MY DEMO!!

73 CommentsTags: CSS · Misc

How to Create a Button That Looks Like an HTML Link

April 15, 2010 · 8 Comments

I’ve on several occasions ran into issues where I need to submit a form with a link. Now one of the most common way of doing this is by using JavaScript to submit the form. This is done pretty straight forward.

EXAMPLE
Submit Form

One issue that I’ve run into however is in some high traffic area, there are times where I want users to still have the ability to submit the form even if JavaScript is disabled. As a personal rule, I always try to make my front end pages usable if the user doesn’t have JavaScript enabled, however the appearance of things just may not look very nice.

A common method of doing this without JavaScript is by styling a submit button like a link.

EXAMPLE

One of the issue with this however, is that in some cases all of the links in your site may have a mouse over hover effect, like an underline ect. My conclusion, has been to do a mixture of both. I would recommend using javascript to output a link that will create an html/JavaScript based submit button that will submit on click. After that add inside of a NoScript tag, the submit button that's styled like a link.

EXAMPLE
document.write("Submit Form");

8 CommentsTags: CSS