background preloader

Ten more CSS tricks you may not know

Ten more CSS tricks you may not know
Our article, Ten CSS tricks you may not know has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know. 1. Block vs. inline level elements Nearly all HTML elements are either block or inline elements. Always begin on a new line Height, line-height and top and bottom margins can be manipulated Width defaults to 100% of their containing element, unless a width is specified Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Begin on the same line Height, line-height and top and bottom margins can't be changed Width is as long as the text/image and can't be manipulated Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>. To change an element's status you can use display: inline or display: block. 2. padding: 2em; border: 1em solid green; width: 20em; width/**/:/**/ 14em; The first width command is read by all browsers; the second by all browsers except IE5.x on PC. 3. 4. 5.

Form Help without Popups Summary Thrusting new windows upon visitors of your site is frowned upon, as it goes against device independence by assuming a windowed environment. One situation where developers feel that a new window is appropriate is with web forms. If the visitor requires help on a form field, a new window saves the visitor the trouble of having to leave the form, and possibly losing the data they have entered. Author: Gez Lemon Contents Introduction I don't intend to start a debate about popup windows, but the three biggest complaints about popups are that they're obtrusive, can disorientate/confuse the user, and assume a windowed environment, which goes against the principles of device independence. [Back to the contents] The Form Problem One situation where authors like to use popup windows is providing help for web forms. The ideal situation would be to put the information by each form field, but only when the user requests help. Basic Markup <a href="#firsthelpfieldid">Help for field 1</a>

CSS A work in progress. This version: Rev. 8 2008–11–16 Changelog Translations Table of contents Introduction A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” hasLayout — A Definition “Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events. This quality can be irreversibly triggered by some CSS properties. Microsoft developers decided that elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to as hasLayout, which is set to true when this rendering concept takes effect. Nomenclature We speak of an element “gaining layout” or say that an element “has layout” when the Microsoft-proprietary property hasLayout is set to true for it. In “non-layout” elements, hasLayout is not triggered, i.e. a pure div without a dimension can be a “non-layout ancestor”. Properties Lists

SSH tricks SSH (secure shell) is a program enabling secure access to remote filesystems. Not everyone is aware of other powerful SSH capabilities, such as passwordless login, automatic execution of commands on a remote system or even mounting a remote folder using SSH! In this article we’ll cover these features and much more. Author: Borys Musielak SSH works in a client-server mode. ssh user1@remote_server After entering the password to access the remote machine, a changed command prompt should appear, looking similar to user1@remote_server:~$. SCP – secure file copying SCP is an integral part of the OpenSSH package. scp file.txt user1@remote_server:~/ This will copy the local file.txt to the remote server and put it in the home folder of user1. In order to copy a file from a remote server to the local computer, we can use another SCP syntax: scp user1@remote_server:~/file.txt . Other interesting SCP options: GUIs for SCP SSH without passwords – generating keys Pic 1. Executing commands on a remote system

Max Design - Sample CSS Page Layouts Here are a range of CSS responsive HTML and CSS layouts – including one, two and three column layouts. All layouts are ready to use – as is – with folders, dummy AppleTouch icon, dummy favicon and CSS files in place. All layouts are FREE to use as needed and can be downloaded directly from Github. One-column fixed-width responsive layout A simple, single-column fixed-width responsive layout with pre-defined styles for all common elements, responsive images and more. One-column full-width responsive layout A simple, single-column full-width responsive layout with pre-defined styles for all common elements, responsive images and more. Two-column full width responsive layout A simple, two-column full-width responsive layout with pre-defined styles for all common elements, responsive images and more. Three-column full-width responsive layout A simple, three-column full-width responsive layout with pre-defined styles for all common elements, responsive images and more.

Firefox 3: 8 Untold Secrets - OS, Software &amp; Networking by ExtremeTech This article was originally published on PCMag.com. The latest version of Mozilla’s popular open-source browser enjoyed one of the most successful launches in software history, with a record-setting 8.2 million downloads the first day it was available. With the ability to drastically expand the browser’s functions using plug-in extensions and Greasemonkey scripts, many of Firefox 3′s built-in features are overlooked. 1. 2. Smart bookmarks are live bookmarks that don’t just refer to particular sites but actually generate live lists of sites according to parameters you define. To create a smart bookmark, select Organize Bookmarks from Firefox’s Bookmarks menu.

CSS Mastery: Advanced Web Standards Solutions - Part 2 - webreference.com [next] CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns Fixed-width, liquid, and elastic layout So far (in the previous article), all the examples have used widths defined in pixels. However, fixed-width designs have their downsides. To work around these issues, you could choose to use liquid or elastic layout instead of fixed-width layout. Liquid layouts With liquid layouts, dimensions are set using percentages instead of pixels. However, liquid layouts are not without their own problems. Conversely, if the design spans the entire width of the browser window, line lengths can become long and difficult to read. Be aware that IE 5x on Windows incorrectly calculates padding in relation to the width of the element rather than the width of the parent element. You can use these techniques to turn the previous fixed-width, three-column layout into a fluid, three-column layout. You then need to set the widths of the columns in the content area. Figure 7-6.

Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized | Elliot Swan When developing large sites, stylesheets can get fairly messy and hard to keep track of. If you don’t stay organized, you can end up making them larger than they really need to be and doing more work than you should have to. Here’s just a few ways to can help avoid that. While in most cases semantic class names really don’t help achieve much, there are a few in which they can be quite helpful. One of these is when describing element states, such as .selected. Oftentimes, people only use classes when there are multiple elements on a page that are to share the same styles–this isn’t the only way to use them, however. <ul id="tabs"><li><a href="#">tab 1</a></li><li><a href="#">tab 2</a></li><li><a class="selected" href="#">current tab 3</a></li><li><a href="#">tab 4</a></li></ul> We’re going to want to give the .selected link some extra styles. Using selectors, we can give each of these different styles: li .selected { /* styles go here */ } form .selected { /* styles go here */ }

Future-Proof Your Web Site Design by Planning Your CSS In Advance 0Google + A web site is like a building. Over time it gets lived in. And, regardless of the initial intentions of the designer for how everything within it should be arranged, things get moved around, stuff gets added, some things get taken away, more stuff gets added, the occasional renovation takes place, and yet more stuff gets added. Many web sites are not really designed to be 'lived in' — i.e. to support all these changes by different owners with various intentions. Of course, it's impossible to plan for all the 'home improvements' that will happen to a web site between major redesigns. However, it is possible to be prepared so that the addition of something new to a page doesn't break its design. A good way to future-proof a web site is to create styles in advance for the most common page elements, even if they are not yet being used. Let's take a look at the more common page elements a future-proofed site should plan for. Headings Lists Tables Images Links Forms JavaScript Pull Quotes

How to Style an A to Z Index with CSS I've always been taken with the way that the BBC styles their A-Z index using a simple list and CSS. However, because they use pixels to set the dimensions of each list item, the design breaks when you increase the text size. Consequently, I thought I'd have a go at creating an A to Z index along the same lines that doesn't break when you resize your text. The code is pretty straight forward. Here's the CSS : And here's the HTML : <div id="azindex"> <ul id="index"> <li><a href="#a">A</a></li> <li><a href="#b">B</a></li> <li><a href="#c">C</a></li> <li><a href="#">etc</a></li> <li><a href="#z">Z</a></li> </ul> </div> Pretty simple, but hopefully it'll be useful to someone. ShareThis Posted on: January 16, 2006 | Recent Entries in "CSS" How to Make Data Tables Viewable On Mobile Devices Is This New Browser-Based CSS Editor a Firebug Replacement? Guide to CSS Hacks for IE

CSS: Getting Into Good Coding Habits Set for printing In this article we will look at what might be considered best practices, or perhaps, good coding habits to get into. To begin, we will look at removing any defaults that a browser may add to our elements and then look at how we can explicitly set the values we want. The beauty of CSS is the control it gives us. We can use CSS in three ways. Inline CSS Embedded CSS External CSS Inline CSS is the least flexible of the three options listed above. <p style="margin: 20px;" >My paragraph text</p> The inline style in Listing 1 above is highlighted. This situation is further complicated when we need to make changes to our code. Embedded CSS is somewhat of a halfway house between inline styles and an external style sheet. p { margin: 20px; An embedded style sheet is contained in an opening and closing pair, and it exists in the head of your page. An external CSS file is the way to go. An example of a link to an external style sheet can be seen in Listing 3: Page 1 of 5 1 2 3 4 5 Next

Listless Navigation - Using CSS To Do More With Less - CSS-Tricks The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to: Code much, much less XHTMLSeparate website formatting from contentControl as much of the website theme/design as the developer allows himself with one CSS fileEasily adapt website display to the user instead of the user adapting to the websiteChange the display of our website for specific devices and special circumstances The list goes on and on. Depending on the design of your website, you may use vertical navigation or horizontal navigation. <div id="navigation"><h3>Categories</h3><ul class="nav-list"><li><a href="/css">CSS</a></li><li><a href="/html">HTML</a></li><li><a href="/mootools">MooTools</a></li><li><a href="/php">PHP</a></li><li><a href="/xml">XML</a></li></ul></div> ...into... ...using some very basic, cross-browser compatible CSS. The above example is all you need for vertical navigation. That's all? Before You Comment...

Using CSS to Fix Anything: 20+ Common Bugs and Fixes Jun 15 2008 Without a doubt, a logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better methods, then post a comment below or email me. You might be interested to check our other related post for some inspiration: IE Bug Fixes 1- Bug Fix: IE Double Margin Float Bug- It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size. To something like this: 2-Overcoming the Box Model Hack- If you want to specify a width to any div, do NOT specify padding or margins. Do something like this: 3-Min-height attribute ignored in IE- “min-height” attribute works well in Firefox but IE ignores it. Centering a Block Element Column Issues CSS Positioning

Related: