At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.
There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent.
Well, you can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements (for lack of a better term).
Print This Post
The other day I came across a useful site called ScriptSrc.net that allows you to get up-to-date script tag links that point to your favourite JavaScript libraries.
The site has a clickable corner ad promo to get people to “spread the word”. I thought using CSS3 there would be a better way to position such a corner advertisement (or promo, or whatever), because the clickable area for the ad on ScriptSrc.net is actually too big. In some cases, you might prefer the clickable area to be bigger, but I think it’s always best to keep the clickable area limited to the actual ad.
Print This Post
A new feature is included in the Cascading Style Sheets (or CSS) level 2 and CSS 2.1. This feature is called generated content and it represents content which is created by the browser, but which is not represented either by markup or content.
An example of a generated content is list markers. When it comes to representing the markers, nothing in the markup of a list item can be used and the appropriate marker in generated automatically by the browser, thus eliminating the need for the author to write the markers into the document�s content. When the lists are ordered, the marker appears under the form of an incremental counter. Its value is grown one by one for each item present in the list. When the lists are unordered, the marker appears under the form of a bullet (square, circle, and disk).
Print This Post
When writing your CSS, it is possible to write neater, more readable code by making use of CSS shortcuts. A shortcut is a feature of CSS that allows the developer to specify a number of related properties on a single line rather than specify them all separately. Lets look at the following example:
Print This Post
Here’s a neat effect that will allow you to display a thumbnail image for a link on hover.
This technique works in IE6, FireFox and Opera. I haven’t had the opportunity to test it in Safari, though I suspect it will work fine there as well. If someone would like to test it out and let me know, that would be great.
Print This Post
The CSS border property gives you the option to specify the style and color of the border of an element. With this property, we now can create borders with nice effects, which can also be applied to any element.
Print This Post
Coding CSS can quickly run into difficulties with different browsers interpreting code in different ways. Designs will never look the same in every browser but you can help yourself by using a default style set when you start coding.
Print This Post
Speech bubbles are a common sight in comic books, video games and web pages. People have been using them for many years, so it?s only natural that they would crawl their way onto the web. Unfortunately, creating speech bubbles which expand according to its content has been something which was normally achieved using tables. However, creating the neat little bubbles is a simple enough task with the use of CSS by using a series of nested divs. In this tutorial, I?ll describe one manner of creating the speech bubbles with CSS and a few images.
Print This Post
Here’s an article for beginners in the practice of CSS Layouts, my reason for writing this one came from remembering the difficulty I once had position elements in CSS. After many frustrating attempts with relative and absolute position techniques I finally found the holy grail of CSS the “Float” attribute!
Print This Post
Semantic HTML can be a great way to make sense of words and ideas even before grabbing Photoshop to draft out the design.
The usual Web development process implies (very roughly) creating a site structure, generating the copy, shaping it into a certain layout and design, coding the XHTML / CSS and integrating it into whatever platform or programming you have going on.
Print This Post
This article is for people who have little to no experience with CSS. I will explain very detailed which codes to use and how to use them. At the end of this tutorial, you can code yourself this rollover menu, completed in CSS and HTML.
Print This Post
Coding CSS can quickly get out of control. By following a few simple guidelines you can make your life a lot easier.
Print This Post
CSS (Cascading Style Sheets) is the standard technology used to format the styling of the web. It provides designers with more powerful styling options while separating the content of web pages from their design. This article will explore how the need for CSS emerged and what benefits it provides to web designers.
Print This Post
