CSS Menus (with some help from jQuery) " qrayg.com The following dynamic menu examples are driven completely by CSS and work in all modern browsers*. CSS Menus v2 Features Up to 3 sub menus Hover Persistence Uses jQuery for IE fixes Horizontal Example Vertical Example * Internet Explorer is the exception, of course. 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;
ECMAScript Menu System Summary It is far easier to maintain content that is free from presentation and behaviour elements and attributes. Separating content, presentation, and behaviour is not only easier to maintain, it's also more accessible and search engine friendly, as the content is more likely to be machine readable. This article walks through the steps required to build an accessible, dynamic menu, with separate content, presentation, and behavioural layers. Author: Gez Lemon Contents The Behavioural Layer There has been lots written about separating content from presentation, and most developers see the benefit of this approach (cleaner, leaner markup; faster download speeds; easier maintainability, etc). [Back to the contents] ECMAScript All the time JavaScript was a Netscape proprietary technology, its use could not be endorsed by the W3C. Collapsible Menu System To illustrate using a completely separate behavioural layer, I'll demonstrate a collapsible menu system. Hiding Nested Lists window.onload=rollup;
A List Apart: Articles: CSS Design: Taming Lists As early as July of 1999 I was pontificating on email lists about the virtues of style sheets. Some things never change. Article Continues Below What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. Of course the reason that we don’t mark them up in that way is that we don’t want a bullet in front of every link in our navigation area. In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. Setting the stage#section2 For purposes of this article, I am using unordered lists. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5 we'll make a bit longer so that it will wrap</li></ul> Each list is simply placed inside a different DIV, and the CSS is written so that the list’s behavior is determined by the DIV it is in. Without any additional styles applied, the list is rendered in this way in the base DIV: Item 1Item 2Item 3Item 4Item 5 we’ll make a bit longer so that it will wrap
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
stu nicholls | CSS PLaY | image map for detailed information Information A further stage in the use of a css image map. Just hover your mouse over the painting to reveal three areas of interest. Then hover over each area to reveal an enlarged detail with text. This method could be used on an educational site to give information and enhanced details of images in general. The idea is based on my previous image maps but takes it a step further in functionality. Works in IE5.5 and almost works in IE5.01 Copyright You may use this method on your personal 'non-profit' web site without seeking my permission. Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Light Weight Multi Level Menu Horizontal Menu This is a multi level light weight drop down menu example based on the Suckerfish Dropdowns article by Patrick Griffiths and Dan Webb at A List Apart Style Generator I've added a style generator for the menu to the side bar. Just click on a color from the color grid then click the field you wish to apply it to. Once you leave the field (click elsewhere), the style will be applied to the Horizontal menu as a preview. Mark Up The markup used is simply embeded un-ordered lists. <ul id="nav"><li><a href="#" >first Level menu</a><ul><li><a href="#" >second Level menu</a></li><li><a href="#" >second Level menu</a><ul><li><a href="#" >third Level menu</a></li></ul></li></ul></li></ul> Note how the next level menu starts and ends before it's containing li ends. JavaScript This is all the JavaScript required, it's the same for both menus. Files If JavaScript is disabled the menu wont work in any Version of IE but should keep working on all other browsers. Update Browser Support
CSS Layout Starting Points I build a lot of CSS layouts, some incredibly simple, others that cause sleepless nights and remind me of the torturous puzzle books that were given to me at Christmas by aunties concerned for my education. However, most of the time these layouts fit quite comfortably into one of a very few standard formats. For example: Liquid, multiple column with no footer Liquid, multiple column with footer Fixed width, centred Rather than starting out with blank CSS and (X)HTML documents every time you need to build a layout, you can fairly quickly create a bunch of layout starting points, that will give you a solid basis for creating the rest of the design and mean that you don’t have to remember how a three column layout with a footer is best achieved every time you come across one! These starting points can be really basic, in fact that’s exactly what you want as the final design, the fonts, the colours and so on will be different every time. <!
A List Apart: Articles: Drop-Down Menus, Horizontal Style Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! (Actually, a tiny bit of JavaScript is needed, but it’s not what you think.) Here’s a sneak preview of the menu in action. Creating the menu#section1 The first and most important part of creating our menu is the menu structure itself. That’s it: some simple HTML that is both accessible and easy to edit. Visually appealing? If you have previewed the menu above, you’ll see a pretty boring list of items. The first step is to remove the indents and bullets from the unordered list and define the width of our menu items. Next, we need to position our list items. Next step is the sub-menus. Now the fun bit.
CSS Three Column Liquid Layout by Mani Sheriar This is a three-column layout where the side columns are fixed-width and the center column is liquid. The background, header, main column, left column, right column, and footer are all capable of being different colors (or backgrounds), and it does NOT matter which column is longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest.
Crear menus de navegación en CSS usando listas Para completar este tutorial es recomendable leer antes el Tutorial Básico de CSS ¿Qué son las listas?, ¿Para qué se usan?, ¿Por qué ES MEJOR usarlas en un menú? Estas son preguntas que siempre vienen a la mente al hablar de las listas, sobre todo en la transición hacia el uso de XHTML estándar y el maquetado con CSS. Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que el XHTML es un lenguaje diseñado para estructurar datos, y eso es lo que debemos hacer con el. En HTML tenemos dos clases de listas, las ordenadas y las desordenadas, la unica diferencia es que las ordenadas añaden un número correlativo a cada item de la lista, mientras que las desordenadas no: Las Listas Ordenadas: <ol><li>item</li><li>item</li><li>item</li></ol> Nos da como resultado: item item item Mientras que, las listas desordenadas: <ul> <li>item</li> <li>item</li> <li>item</li></ul> Nos queda: item item item Ahora la gran pregunta, Por qué &%$#$@/ tengo que usar eso para hacer mi menú? En el CSS:
Web Design — Div Problems, CSS positioning of div tags, height tweaks Tables or Div? The <div> tag can be very useful, but it's important to keep in mind what div stands for: division. The div tag is supposed to divide the page into parts, and it does this extremely well. See for instance the right column, or the lower left hand tech data box, of the index page to see how the div element can be very effectively used. Of course, you can go all the way, like we did, but we don't recommend that, for one main reason: Div tags only expand to fill their container blocks horizontally, unless they are being sized against another absolutely sized element. However, since that required the use of iframes, which we've since abandonned, the redesign of the site required a new method. This method does not require the ugly hacks most others you'll see out there do, like using background images to make fake columns and borders. We have tried using the CSS overflow:auto; property on div elements to see if we could make them function like frames or iframes.
HTML Tools » CSS Menu Generator Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left. We currently have 3 different styles of menu available to generate, so for this first step, please choose the style you prefer by clicking on the appropriate radio button below then clicking the 'Proceed' button. Disclaimer: By using any of the free webmaster tools on this site you agree that it is you who has sole responsibility and liability for any errors that may occur to your website or web server as a result.
A Complete Guide To Web Analytics Solutions » Conversion Rater The web analytics space is not an easy one to navigate as there are numerous companies and product types which will fit your needs differently. In order to help find the way through it all, I’ll map out the options as they currently stand. Please let me know if I’m missing an application you think should be listed. I’ll check it out and add it. The Freebies There are numerous free solutions out there, and they range from very useful to “you paid for what you got”. As you might expect, the free solutions lack a lot of the power of the paid ones, and they usually don’t offer much support. Analog – One of the oldest web analytic packages available. AWStats – An improvement on Analog, but still a logfile-based solution. Google Analytics – The new kid on the block that made the biggest splash in 2005. SiteMeter – A previously popular solution for bloggers and small websites, Sitemeter has a free version that just requires you put their colorful logo at the bottom of your site.