Faux Absolute Positioning. There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it’s time to share the technique with the rest of the world and see how we can work together to improve it. I’m calling it “faux absolute positioning” after the faux columns technique that simulates the presence of a column. Why do we need another CSS layout technique? #section1 Article Continues Below Many website designs are based on a columnar layout with a header and footer. Our use case was even more complex: my team was developing a web-based WYSIWYG form generator that allows the user to drag items to arbitrary locations on a canvas. For example, let’s assume we want a form that puts the postal code and city fields on the same line because they are semantically connected.
A different approach#section2. CSS Swag: Multi-Column Lists. One of the minor holy grails of XHTML and CSS is to produce a single, semantically logical ordered list that wraps into vertical columns. The ideal situation, in my view, would be a single XHTML list whose wrapping is controlled entirely by CSS. Further, the wrapped list should tolerate text resizing (easily accomplished by styling everything in ems). CSS and the browsers that support it don’t yet provide us with “vertical wrap,” so we have to augment basic list markup with additional attributes and styling rules to achieve the effect. I’ll take you there—or as close as we can get using today’s browsers—but along the way let’s look at a variety of ways to accomplish a similar effect. We’ll be shooting for something that looks a bit like this: (Why, you’ve doubtless been pondering, is this article entitled “CSS Swag”? Watch your step#section1 I’ll warn you up front. The reality is not so ideal.
So why do we bother? To work, then. First, expunge all white space#section2 See Example 1. Absolute Positioning Inside Relative Positioning. A page element with relative positioning gives you the control to absolutely position children elements inside of it. To some, this is obvious. To others, this may be one of those CSS "Ah-ha! " Moments. I remember it being a big deal for me when I first "got it". Here is a visual: The relative positioning on the parent is the big deal here. Might not look like a big deal in this small example, but it really is a significant change. Once you "wrap" your head around this concept (rim-shot) you will find little uses for it all over the place, and start noticing examples of other places using it. How about some examples? I'd be delighted.
View Demo Download Files Share On. Slide and Push Menus. Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body. View demo Download source A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”.
There are examples of how to trigger the opening and closing of the menus and some example media queries. The HTML The CSS Note: Classie is being used here – class helper functions by @desandro. Learn How to Make Websites. 15 Fresh and Powerful CSS3 Tutorials. CSS3 is here, it’s fun, and allows us to evolve the look of the web as we go. Features like gradients, drop shadows, rounded corners, animations, and opacity are giving us the promise of more fun. In this post we’ve collected some new and brilliant tutorials that will help you in mastering your CSS3 skills. We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element. When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly.
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Designing a table is a challenge. During this tutorial we’re going to use CSS3 to create ticket-like tags, without relying on any images. We are going to create some thumbnail hover effects with CSS3 transitions. See how easy is to create a spinning rays animation with a bit of CSS. Imagine a cop drama taking place in the 1930s. Getting started with Object-Orientated CSS (OOCSS), creating a button kit. Object-Orientated CSS, or OOCSS to the masses, is a method of structuring your CSS and HTML classes in a specific way. The purpose of OOCSS is to make code more easily usable, and more importantly – reusable.
It can help trim down your stylesheets and you start to think about the object you’re creating and not just the elements inside. This theory (done right) makes your stylesheet more efficient. By writing this post, I do not promote the use of OOCSS for every project, or completely side with it’s lack of HTML class semantics, though one thing’s for sure, it’s awesome. Why OOCSS has it’s place now Prior to CSS3 gradients, box-shadows, border-radius and other fancy features, we used to make buttons from a simple image. Without OOCSS Before we start to ‘think’ OOCSS, let’s look at how a basic button might look in regular HTML/CSS on a typical website: Okay I’ll think you’ll agree, even without the vendor-prefixes it’s a nasty sight. Digging into OOCSS, structure, sizing and style Structure. Don’t Style Headings Using HTML5 Sections. Styling headings is either a deceptively complex problem, or maybe the design of CSS made it appear complex when it need not have done.
When styling headings (or really anything) we want three big goals to be met: DRY – Do not repeat yourself. We want to set headings once and never (ok, rarely!) Repeat those font styles or selectors. This will make our site easier to maintain.Predictable – The heading should look the same no matter where on the page it is placed. The html5 section tag is weird. “The section element represents a generic section of a document or application. The spec goes on to warn us that sections are not really meant to be used just because you want to attach a style a particular piece of content: “The section element is not a generic container element. People seem to have blocked out this last (very important) bit, so I’ll reiterate. HTML Headings Think back to the outlines you wrote for term papers in high school. THE TITLE IS THE H1 I. <h2>Me on the web... or.
Divitis: What it is and how to avoid it (Updated!) | A Padded Cell - Pale Moon. By Megan McDermott, 8 June 2011 - 2:38pm When developing your website in HTML, you might be tempted to use the <div> tag to sovle problems. Things not lining up in every browser? Maybe another containing <div> would help. Don't know how to select that particular element? This article will explain the problems with divitis habits and propose some practical solutions. This is an updated version of an article originally published in 2007. What is a Div? A div is an HTML tag used to group sections of an HTML document. For more detail, read our article on What is a Div? What is Divitis? Divitis refers to the over-use of the div tag for purposes other than dividing a page into meaningful sections.
Wrapping elements in a div in order to insert class and/or id attributes for styling with CSS manipulating page structure to accomplish specific visual goals using a div tag to mark-up items that don't seem to match any other HTML element Why is Div-itis bad? There are a few reasons: How to Avoid it. All About Floats. What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them.
Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances. This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. Clearing the Float The Great Collapse Video. CSS Float Theory: Things You Should Know. Book - Scalable and Modular Architecture for CSS. As briefly mentioned in the previous section, a Module is a more discrete component of the page. It is your navigation bars and your carousels and your dialogs and your widgets and so on.
This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. When defining the rule set for a module, avoid using IDs and element selectors, sticking only to class names. Module example Avoid element selectors Use child or descendant selectors with element selectors if the element selectors will and can be predictable. Styling with generic element The problem is that as a project grows in complexity, the more likely that you will need to expand a component’s functionality and the more limited you will be in having used such a generic element within your rule.
<div class="fld"><span>Folder Name</span><span>(32 items)</span></div> Now we are in a pickle. Only include a selector that includes semantics. New Contexts Subclassing Modules Subclassing. CSS Reusable Clases » Matt Varone. When you regularly work on similar projects, you often find yourself typing the same code over and over. That’s the reason why many of us use code templates and base style sheets. For example, it’s very common to have a base CSS stylesheet with browser resets styles to use as a start point. This practice surely is a great and handy way to speed up our workflow. I found that its also a great addition to include what I like to call helpers. By this I mean reusable classes that do common stuff like floating elements, adding a border, indenting text, etc.
The idea might seem simple and the classes even a bit silly but I can assure you that once you have them incorporated they will surely speed up your coding process. The Classes: I have compiled below some I found myself using lately in almost every project. Usage example: As a simple example you could use helpers to justify a paragraph and align an image with a border to the right of it. I Hope you find them useful!. An Introduction To Object Oriented CSS (OOCSS) Why Abstraction Can Improve Your CSS. For the past two weeks I’ve been talking about css. How we might organize css files differently and whether or not some of our long held best practices aren’t as best as we thought. We might be able to improve things by reaching a little further into the development world and learning to make better use of abstraction in our design process. What Is Abstraction? “Abstraction is the ability to define a new concept in terms of other, more simple concepts,” in the words of Chris Eppstein, who’s post, Why Stylesheet Abstraction Matters, is one I’ll be leaning heavily on in writing this post.
Abstraction attempts to factor out implementation details so you can focus on fewer concepts at one time. The principle of DRY (don’t repeat yourself) calls for abstraction. Other common abstractions you might already use: css classesWordPress template_tagsphp functionsgrid frameworks like 960 and Blueprintlibraries like jQuery Let’s look at the first.
Abstractions make the complex easier to work with. Pros: