background preloader

Get down! How to keep footers at the bottom of the page

Get down! How to keep footers at the bottom of the page
by Matthew James Taylor on 10 November 2007 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. See it in action: View my demo with the footer at the bottom The main features Works in all modern, standards compliant browsersCompatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8Fails gracefully on older browsersOlder non-standards compliant browsers position the footer under the content as per normal. There is only one limitation You must set the height of the footer div to something other than auto. So how does it work? The HTML div structure The CSS

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare […] View demoDownload source Today I want to show you how to create an amazing slide out menu or navigation for your website. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: The list is getting an ID because we want to refer to it later in the JavaScript. 2. First, we define the CSS properties for the list: The navigation should always be accessible for the user, even if he scrolls down the page. Now, let’s look at the list element properties: For the links in the list elements, we define the following CSS properties: The JavaScript

CSS Fixed Footer Sometimes it’s the simple things that can be the most infuriating when it comes to dealing with CSS. Positioning a footer to stay at the bottom of the browser window unless the content is larger, sounds like it should be fairly simple, but is in fact quite an advanced technique when it comes to CSS. However, the following tutorial will explain in a few simple steps, how this can be achieved very easily. First up, here’s a demonstration of the kind of thing you’ll be able to achieve with this technique: CSS Fixed Footer I’m going to start off with the code that I used within the 100% Height Layout Using CSS tutorial as this provides the foundations we need for this page. The only extra bit of code that I’ve added to the previous tutorial is the clearfooter div and the footer div. <head><title>CSS Fixed Footer</title> <h1>CSS Fixed Footer</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. <p>Sed non nibh. padding: 0;

Beautiful Slide Out Navigation Revised After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone! Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order […] View demoDownload source After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order to see what menu items exit. Although this tutorial is related to the previous one, I will start again from scratch – for the readers that are only interested in this new navigation. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The only thing we will need for the navigation is a simple unordered list with links and spans inside of the list elements: 2.

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery) Posted by Maggie on 07/01/2009 Topics: accessibility css javascript jQuery progressive enhancement ui design visual design web standards Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images; it's even a challenge to get the margins to appear consistently across browsers. In the past few years web application interface designs have evolved from flat metal gray to having rich color palettes and dimensional background images thanks to the adoption of web standards and advanced CSS techniques. When considering how to build our own customized input script, we set out to do as little as possible — on their own, checkboxes and radio buttons capture data and display feedback, and we wanted to use that native functionality and not reinvent it using JavaScript. Demo jQuery CustomInput plugin demo by Filament Group Markup <form><fieldset><legend>Which genres do you like? Styles Script Usage

The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1-3 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column.

The Best Social Media Icons All In One Place 464 shares 8 Free & Useful Minimal Icon Sets Icons are certainly a very important element of a design. It doesn’t matter if you are putting together a website or app, icons will be the key for several user interactions. Read More 916 shares 8 Beautiful and Free Flat Icon Sets For the past few years in web design, we’ve noticed a trend in moving toward simplicity and minimalism. List of Really Useful Tools for CSS Developers Regardless of size and scope of your project, CSS development process can take quite a lot of time. Even if you are an experienced CSS developer; having good set of tools at your disposal can drastically improve your productivity. W3Avenue has compiled a list of really useful CSS tools that will help you increase both your productivity and knowledge. We have categorized these tools under various categories to help you easily find the right tools for your needs. Layouts CSS Layout Generator This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. CSS Frameworks Boks Boks is an Visual Editor for Blueprint CSS Framework; It allows you visually setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS. Fonts Typetester The Typetester is an online application for comparison of the fonts for the screen. Colors Sprites Forms UI Components Text Wrappers Analysis & Debugging Convertors Maintenance

Essential bookmarks for web designers and web developers The project 'Essential bookmarks for web-designers and web-developers', previously updated on this page, has a new url ( a new design, a new hierarchical structure and, of course, new web-dev-resources. The reason for changing the basic concept of this project was a huge number of suggestions and links, which have overflooded my mailbox recently. Over the last few days, a new project was created and updated. The old version (which also will be updated in future) is still available on the page "Bookmarks: Maxi edition". You are welcome to submit your own links to the directory, filling out this form; besides, I'll be glad to receive feedbacks, comments and new ideas coming from your side. Please update your bookmarks! How did it begin? This page is actualized once a week. This list was created with the help of many web designers and enthusiasts from Germany and United States, but mostly it was created by myself. Thanks!

Web Page Analyzer - free website optimization tool website speed test check website performance report from web site optimization Free Website Performance Tool and Web Page Speed Analysis Try our free web site speed test to improve website performance. Enter a URL below to calculate page size, composition, and download time. Help Speed Up the Web Tired of waiting for slow web sites? <a href=" Page Analyzer</a> - Free web page analysis tool calculates page size, composition, and download time. Consider optimizing your site - with our Website Optimization Secrets book, contacting us about our optimization services, or our Speed Tweak tutorials. Related Website Optimization Services Try our targeted services to optimize your web site's ROI. Version History See the version history for all revisions.

27 Must-Have Starter Kits For Web Designers Starter kits are great timesavers for web designers and they are particularly useful for those who often create mock-ups for project pitching on daily basis. If you are a designer-cum-programmer think of it as your code snippets So what’s in a starter kit? In today’s article, we attempt to show you some of the best design starter kit we’ve come to know. GUI, Form Elements and Web Components From form elements like checkboxes, input fields, textareas to web design components like buttons, arrows, icons, badges and more. Yahoo’s Design Stencil Kit Probably one of the most complete kit for designers. Web Form Elements With all these tabs, buttons, dropdowns in one single PSD file, it’s sure going to give you a kick start in interface design. Browser Form Elements PSD Browser Form Elements PSD for Mac Firefox 3 and another for Vista IE7. Flex Dark Skin Sleek dark skin interface elements. Peter’s DeivantART ID Design ID cards made easy with this PSD template. Turquoise PSD Vista elements. Cursors

Related: