Bloggerrific

Up until recently I’d never implemented a rollover dropdown menu. Then I just decided to build one from scratch for my employer College Prowler to improve upper-level navigation. Basically, with some simple javascript to hide/show the menu and some CSS to style and position it, you’ve got yourself a simple javascript rollover dropdown menu! The code follows the example implementation below.

The Javascript:

function rolloverMenu(showHide, menu)
{
    var link = 'mainLink';
    if (showHide == 0)
    {
        document.getElementById(menu).style.display = 'none';
        document.getElementById(link).setAttribute('class', 'mainNav');
        document.getElementById(link).setAttribute('className', 'mainNav');
    }
    else
    {
        document.getElementById(menu).style.display = 'block';
        document.getElementById(link).setAttribute('class', 'selectedRollover');
        document.getElementById(link).setAttribute('className', 'selectedRollover');
    }
}

This javascript will either hide or show the menu depending on the location of the cursor. The HTML that calls the javascript has a delay on it as well, but you’ll see that later. This javascript also changes the class name of the link so that even though your mouse isn’t technically hovering over that link it will look like it is being hovered over.

The CSS:

#container{
    position: absolute;
    z-index: 1001;
}
a.mainNav{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #1D3E66;
}
a.mainNav:hover{
    background-color: #3D6199;
    color: #AAAAAA;
}
a.selectedRollover{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #3D6199;
}
.rolloverMenu{
    float:left;
    padding: 10px 10px 6px 10px;
    position: absolute;
    z-index: 1000;
    background-color: #3D6199;
    width: 100px;
}
.rolloverMenu#mainMenu{
    top: 40px;
}
.rolloverMenu a{
    color: White;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
}

Change the CSS to fit your own design. I’ve been very specific in this CSS so that it should be easier for you to identify everything. Note that the #container definition is actually very important for an IE6 bug fix. IE6 has issues with z-index when not combined with absolute positioning. Basically, the parent element of the rollover menu needs to have that specific definition.

Lastly, the HTML:

<div id="container">
   <a class="mainNav" href="#" id="mainLink"
      onmouseover="rolloverMenu(1, 'mainMenu');"
      onmouseout="rolloverMenu(0, 'mainMenu');">
         College Search
   </a>
   <div class="rolloverMenu" id="mainMenu" style="display: none;"
      onmouseover="rolloverMenu(1, 'mainMenu');"
      onmouseout="rolloverMenu(0, 'mainMenu');">
         <a href="#">Link 1</a><br />
         <a href="#">Link 2</a><br />
         <a href="#">Link 3</a><br />
         <a href="#">Link 4</a>
   </div>
</div>

And that’s that! The HTML link calls the javascript which implements a series of CSS rules that will hide or show the menu of your choice! Have fun!

CSS has two primary benefits. One is the ability to easily edit the look and feel (the theme if you will) of your website by changing very little code. This is evidenced by a quick visit to the CSS Zen Garden which has the same HTML code, but uses different style sheets to make it all look completely different. The second is positioning and layout which allows to easy move different pieces on a page because it doesn’t ascribe to the rigidity of tables.

However, CSS layout can get a little confusing when you are just starting out. So this article will discuss the different attributes you can assign to tag objects and when each of them is appropriate.

Position:

The position property has 4 possible values of static, absolute, relative, and fixed. Static is essentially the default that lets an element just fall wherever it falls. You’ll only find yourself defining an element as have a static position if you need to correct for a previous assignment of something else other than static. The fixed value will put an element at an exact location within the browser regardless of scrolling or screen size. The fixed value is always used in conjunction with the top, right, bottom, and left properties which will be discussed after positioning.

The remaining two properties are the more common definitions, and are also always used in conjunction with the top, right, bottom, and left properties. Absolute positioning is used when you want an element to exist at an “absolute” location within the page. The only difference between absolute and fixed is that fixed ignores scrolling, whereas absolute does not. So if I wanted the logo of the website I’m designing to always be located exactly 10 pixels from the top of the window, and 30 pixels from the left (and if I scrolled down the page it would go out of view), then I’d use the following CSS:

img#logo{
   position: absolute;
   top: 10px;
   left: 30px;
}

I personally think that absolute positioning is a bad idea because it leaves you with something almost as rigid as a table. To move something around you have to constantly adjust pixel positions, and use z-index in case objects overlap. This can sometimes be useful so you don’t have to layer things using background images with multiple divs, but in general, I personally choose to avoid it. Then there is the relative value. Relative positioning is exactly what it sounds like, it positions an element relative to where it should be located. So if an element naturally falls at a certain location, and you give it a “top: 10px;” and “right: 30px;” then it will appear 10 pixels further down, and 30 pixels left of that certain location. This is also occassionally useful, but I personally prefer another option… floating. This I’ll discuss soon.

Top, Right, Bottom, Left:

These four properties are used when a position of fixed, absolute, or relative has been assigned to the same element (such as a div or an img). These positions can be set using pixels or any other length measurement that CSS accepts, as well as %. They can also have negative values which is helpful to push things around when you need to. Again, I however personally prefer floating my elements.

Float:

If you ask me, the float property is the absolute best characteristic of CSS, and it blows position out of the water. Why do I love it so much? Well, I’ll admit that it can be finicky, but once you get used to how it works, it is absolutely fantastic for building very fluid designs that you can easily change. Float only has three options, left, right, or none. None is the default value. If you add a “float: left;” to your definition then that element will move as far to the left as it can, meaning within its own parent element. Giving is a “float: right;” will do the same thing but obviously to the right instead. Check out the example below of two divs, one floating left, and one floating right:

The HTML:

And the outcome:

So now that you see how the float works, you might be able to see why it can be so helpful. Imagine just having to change two words in your CSS file, and those two divs would switch locations. Now the reason it can get finicky is because of space issues. An element will float within its parent element as high up as it possibly can. So that means if I increased the width of those sample divs to more than half the allotted space, then the second div would be forced below the first (but still on the right side). You can apply float to a whole lot of elements, but primarily you’ll probably be using it with div, img, and p.

More notably, float is used to make text wrap around other elements such as an image. This is incredibly common and incredibly useful. Just apply a float to the image right before the paragraph and the paragraph text will wrap around it. You’ll probably also want to apply a margin so that the text doesn’t touch the image though.

Well, good luck with your positioning escapades. Let me know if you have any problems.

When I started my job as a fulltime web designer, I discovered that my boss used tables for everything. This wasn’t that surprising considering he is a back end developer as opposed to a front end designer. I of course yelled at him (in my mind so as not to get fired) about how horrible tables are. Since then, I’ve settled more in the middle, and I figured I should offer my two cents on the debate of Tables Versus CSS for layout purposes.

First let’s take a look at the oh-so-obvious faults of tables, and why these cons are such an issue.

Con 1. Tables are incredibly rigid. Short of moving the content from one cell to another, changing the layout of anything within your table is incredibly difficult. Especially since you won’t want your layout to look like it uses a table, you’ll end up with rowspans and colspans everywhere.

Con 2. Table code can get messy. If you use tables for all your layout, then you’ll end up with nested tables all over the place. The code becomes hard to read, and almost impossible to edit.

Con 3. Tables have different default settings in different browsers. If you want your site to look the same no matter what browser your user is viewing it through, then you’ll have to go through at set padding, margin, border, et cetera to the values you want them to be. This is a hassle because of all the tags associated with tables. You’ve got table, tr, th, and td. Mind you, even if you don’t use tables, you should be setting default CSS values anyway to avoid cross-browser issues.

Con 4. Tables increase the size of your files. That’s right. Tables just often require more code. Even though the difference in load time for most people is negligable, it is still something to consider.

Alright, and now the benefits of tables, and why it is important to set aside your bias against tables and accept these pros.

Pro 1. Tables can be very helpful for certain design elements. Take rounded corners of any box for example. Though you’ll need anywhere between 1 and 8 images to make a rounded corner box (1 if the box does not need to expand, 3 if it expands in one direction, and 8 if it expands in two), tables will make the implementation of this a lot easier. Of course, you can use divs for this, but you won’t need to edit this table, just the content and images inside. Divs can float incorrectly in different browsers, ruining your rounded corner box, but the table won’t break.

Pro 2. Tables are great when you need to show… tables. That’s right, sometimes the best way to display information is in a table, and obviously the best way to implement that in the web is using… you guessed it, a table!

Pro 3. Tables make certain difficult CSS issues much easier. With tables, you can easily vertically center text, or ensure that two separate sentences of text will always appear next to each other horizontally. Obviously, there are tricks in CSS around this anyway. To vertically center a line of text, you can set the line-height to the same pixel height as the div it is in. So clearly, there is always a way around this problem.

When it comes down to it, every pro or con you find for tables doesn’t really matter. For every pro, using a little CSS magic, you can work around it. For every con, using a little effort or time can work around it too.

In the end, using floating divs is a much safer route to go for your layout. You can change the location of content very easily, your code will be cleaner, and make more sense logically when reading through it. But don’t knock down tables. Use tables for your overarching page layout (header, body, footer for example). These things won’t change as much, so tables are a clean and safe solution. Basically, tables aren’t 100% evil or amazing. Use them when appropriate, and don’t overdo it, and you’ll be just fine.

Half the websites out there have what is called a footer, or a block at the bottom of the page with quick links. For example, my website has a footer at the bottom of the page if you scroll down with links to major sections of my site. When I was looking into implementing this on my site, I ran into some problems. On some pages, the content didn’t fill the whole screen (which also varies with different screen resolutions, so the footer would be in the middle of the screen. Obviously, on pages where the content went past the bottom of the screen, this wouldn’t be a problem because the footer would be pushed to the bottom. So clearly, I needed a footer that would “stick” to the bottom of the screen if the content wouldn’t push it, but if there was enough content, then it would be below the screen bottom. I searched and searched for solutions, and I found one which I adapted just a little bit into my own implementation (in thanks, here is a link to his site, ryanfait.com.

Ryan’s solution was fantastic. However, I did still have some problems with it, probably because of my wrapper div that I used to center my content. So below, I have implemented my fix which I have tested in Firefox 2 and 3, Internet Explorer 6 and 7, Safari, Opera, and Chrome. The footer sticks to the bottom of the screen when content doesn’t push it that far, but goes to the bottom of the page when content goes below the fold. Below is the CSS and HTML for the footer with a wrapper as well. The sticky footer combined with a wrapper allow you to account for pretty much any screen resolution) too, which is fantastic! However, there is just one downside to this sticky footer, you absolutely MUST know the height of your footer. Luckily, there are not many cases where you’d be putting dynamic content into your footer.

First, the CSS:

html{
   height: 100%;
}
body{
   height: 100%;
}
div.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px auto;
   The -100px mentioned above needs to be the exact height of the footer.
}
div.footer{
   height: 100px;
   clear: both;
   position: relative;
}
div.nudge{
   height: 100px;
   clear: both;
}

And now the HTML:

To see a working example of this footer, obviously you can look on this page (because I have one implemented here), or you can check out this example page that I made.

So yeah, it works pretty simply, though I must stress that every line of that CSS is important. You must declare a 100% height for the two parent elements of html and body (and if you have any other tags between those and the wrapper div, then you need a 100% on that as well). This forces the browser to use the whole screen. The three separate height declarations for the wrapper div are each individually important, including the !important addition. !important is a statement which makes that lines declaration take precedence over declarations that come after it. This however does not apply in IE, but that’s okay, because we want it that way for this Sticky Footer. Then most important is how the margins work. By putting a negative margin of the footer’s height on the wrapper, we allow whatever comes after the wrapper to overlap with it. The nudge div creates empty space inside the main wrapper so that when the footer overlaps exactly with the wrapper, nothing is blocked out. If you theoretically wanted a margin between the wrapper and the footer then make your negative margin on the wrapper 100px, your footer div would be 70, and give the footer a 30px margin on top. The nudge div would also still be 100px again to make space for the footer and its margin.

As a last suggestion, I usually put another div inside the wrapper div and the footer div, give them both a width of 990px and make them float left. The float with the full width will make sure that nothing (such as padding or a margin) manages to creep outside the edge of the wrapper or footer div. This is a safety precaution, but one that I highly suggest. If you notice a problem when you try to implement the sticky footer, this is the first thing that I would suggest.

Got any questions? Need help troubleshooting? Critiques are welcomed too! Post a comment.