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

Safari Web Content Guide: Configuring the Viewport Safari on iOS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iOS. If you are already familiar with the viewport on iOS, read “Using the Viewport Meta Tag” for details on the viewport tag and “Viewport Settings for Web Applications” for web application tips. Read “Layout and Metrics on iPhone and iPod touch” to learn about the available screen space for webpages on small devices.Read “What Is the Viewport?” See “Supported Meta Tags” for a complete description of the viewport meta tag. Layout and Metrics on iPhone and iPod touch Because Safari on iOS adds controls above and below your web content, you don’t have access to the entire screen real estate. What Is the Viewport? Safari on the Desktop Viewport

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.

13 Ways to Browser Test and Validate Your Work - Nettuts+ Every day, when reviewing templates on ThemeForest, I test the submissions for validation and browser compatibility - not to mention my own work as well. Over time, I've scrounged the web for the best validation and browser compatibility testing tools around. Here's my favorites. HTML and CSS Validation First let's take a look at some methods to check HTML and CSS validation. Along with validating your files, you should format your markup nicely as well. 1. Probably most commonly known is the online W3C Validation Service. 2. W3C also has a CSS validation service that you're most likely familiar with. 3. The Web Developer toolbar extension for Firefox is very popular and has tons of great features along with some great tools to check HTML and CSS validation. You can also turn on "Display Page Validation" to show some quick validation information for HTML and CSS without needing to open a new tab. 4. 5. Most development editors offer some sort of validation tool. 6. 7. 8. 9 & 10. 11. 12.

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

» Web Development for the iPhone :: CSS, JavaScript and XHTML Ex Web Development for the iPhone: Targeting the iPhone Safari browser Developing for the iPhone Also check out Creating native looking iPhone web apps with CSS3 (no images). That works on the iPhone and Safari 5 only. Also see CSS, XHTML and JS support in the iPhone. It’s way more relevant than this article, which is about v1. The Safari iPhone user agent string is:Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3Platform string: (iPhone; U; CPU like Mac OS X; en)Version string: Version/3.0 Mobile/1A543a Safari/419.3 To target the iPhone with CSS, use: <! The logic of this is that only browsers that understand screen understand only, and of these, only the iphone has a max-device-width of 480px. To target the iPhone server-side with PHP you can use: if (stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {} :hover pseudoclass on the iPhone iPhone Viewport Orientation The iPhone supports both landscape and portrait views. Notes:

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.

What HTML/CSS would you use to create a text input with a backgr 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. » Articles » CSS » Fun with forms – customized input By Søren Madsen Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility. A few considerations before we begin Before you throw yourself at this, there are some important considerations you have be aware of. Usability Users trust their credit card and personal information with forms on the internet, and that trust is sacred. Differences in user agents The techniques we're about to demonstrate are not generic . Most popular browsers have however provided us with options to do so, but not all of them. So what are we left with? Logical restrictions With this technique, we basically hide the given form element, and replace it with graphic backgrounds. Some form basics – the and elements The fieldset element functions as a structural container for different sections within a form element. Personal information input fields here ... Yes No “Sure!

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

Safari Web Content Guide: Configuring Web Applications A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms. For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in “Specifying a Webpage Icon for Web Clip.” Read “Viewport Settings for Web Applications” for how to set the viewport for web applications on iOS. Specifying a Webpage Icon for Web Clip You may want users to be able to add your web application or webpage link to the Home screen. If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. apple-touch-icon-76x76.pngapple-touch-icon.png Specifying a Startup Image