HTML EMAIL BOILERPLATE v 0.5 updated 11/5
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:
Workshop / Chrome Experiments
Unfortunately, either your web browser or your graphics card doesn't support WebGL. We recommend you try it again with Google Chrome.
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.
.htaccess Files for the Rest of Us
.htaccess files are used to configure Apache, as well a range of other web servers. Despite the .htaccess file type extension, they are simply text files that can be edited using any text-editor. In this article, we'll review what they are, and how you can use them in your projects. Please note that .htaccess files don't work on Windows-based systems, although they can be edited and uploaded to a compatible web server, and on Linux-based systems they are hidden by default. In order to work with htaccess files locally, to see how they work and generally play around with them, we can use XAMPP (or MAMP) on the Mac - a package that installs and configures Apache, PHP and MySQL. A .htaccess file follows the same format as Apache’s main configuration file: httpd.conf. A setting configured in an .htaccess file will override the same setting in the main configuration file for the directory which contains the file, as well as all of its subdirectories. A rewrite rule can be as simple as this:
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
Expanding Text Areas Made Elegant
An expanding text area is a multi-line text input field that expands in height to fit its contents. This UI element is commonly found in both desktop and mobile applications, such as the SMS composition field on the iPhone. Examples can also be found on the web, including on Facebook, where it’s used extensively. It’s a good choice wherever you don’t know how much text the user will write and you want to keep the layout compact; as such, it’s especially useful on interfaces targeted at smartphones. Issue № 338 Despite the ubiquity of this control, there’s no way to create it using only HTML and CSS. Trawling the internet, you can find several attempts at creating expanding text areas, but most suffer from one or more of the following problems: The height is calculated by guessing where wrapping occurs based on the cols attribute. The best solution I’ve seen uses a separate pre element absolutely positioned off screen, styled the same as the textarea; let’s call this the mirror element.
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.
