'CSS' Category Results

Simple Round Corners in CSS (revisited)

Thursday, January 24th, 2008

Oh No! Not more round corners!

In a previous article we learned how to apply some nice shadowed corners and sides to a fluid width box and I thought it would be good to show a similar method that allows for transparent corners. This will allow the element to sit on any colored background without having to paint the transparent part of the corner with the background color.

I know you might think “Oh no – not another round corner tutorial” but stick with it and I’m sure you’ll find some of this info useful. Round corners are always a bit of a pain to do in CSS so I present here an easy to follow way to make round corners that can be used everywhere. We aren’t going to do anything clever or overly complicated and we aren’t going to bother with shadowed corners/sides because as I mentioned above we have already been there.

Before we begin here is a finished example for you to look at.


What CSS Did We Learn in 2007

Wednesday, January 9th, 2008

Before I start I’d like to wish all readers to this column a “Happy New Year” and thanks for their continued support.

As a new year is already underway it seems like a good time to review what we’ve learned in some of the articles in 2007 and to highlight some key points or just points of interest. The following topics are taken directly from the articles and you should refer to the articles for the full details if you find any topics that interest you. Not all the articles are listed here although I do mention most of them.

January 2007

CSS Floats – Repelling Content

In January we learned that margin, padding and borders on static elements actually slide under any floated content as if the float was not there.

“Floats are removed from the flow and therefore any padding, borders or backgrounds on the repelled content will still slide under the float as if the float wasn’t there.”

This is an important point and the reason that so many authors are left scratching their head when they find that margins don’t seem to be working. Usually the problem is that they are setting a margin from a floated element and of course the float is not really there and so the margin slides under the float until it hits something more solid. The same is true for padding, borders or even background images on the elements concerned.

In the same article we also learned about the infamous double margin bug on floats and how to cure it using display:inline.

Read more …

Relatives – Who Needs Them ?

Still in January we discussed the misconceptions that authors have when using relative positioning. The main point of discussion is that relative elements are not really moved at all.

” That is to say that it has no effect whatsoever on the flow of the document. Although this may seem strange what relative positioning does is that it moves an element visually but not physically. According to all the other elements on the page the element is still in its original position and they will react to it as though it were still in the space it originally occupied in the normal flow of the document.

In technical terms the element is moved the specified distance but the space it previously occupied is preserved. Therefore if you move an element using top:-200px then you will find that there is now a big gap in the page where the element originally was and all content is treating that gap as though it were the original element.

As already mentioned above relative positioning isn’t generally used for structural layout but is more used for more subtle effects. This could be that you want to overlap one element with another without altering the flow of the document at all. If you used negative margins to overlap an element then you would find the flow of the page would also be affected by this 10px shift. Whereas with a relatively positioned element there will be no change to the flow of the page at all and only the relative element gets moved. Everything else remains where it was and totally unaware that anything has happened.”

Read more …



Wednesday, December 19th, 2007

In this article we are going to re-visit a technique we first learned in the Star Matrix Pre-loaded article, except that this time we are going to use it to produce a navigation menu. Before we start it may be worth it to become familiar with the menu we are going to make; you can see a live version here.

At first glance it seems simple enough, but as often is the case there’s more to it than meets the eye. As you roll your mouse over a menu item all the menu items go into the off-state and only the hovered item stays alight. This is quite a subtle difference from the norm where just the item rolled-over changes. Usually this effect can only be done with added JavaScript but today you will learn how to do this with CSS alone.


CSS – A Recipe for Success

Monday, November 26th, 2007

If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean.

Figure 1

Although this may look like an easy thing to replicate in HTML it’s really not as straight forward as it looks and there are a few obstacles to overcome if we want to reproduce this effect. So that’s exactly what we are going to learn how to do in this article!


Hip to Be Square

Wednesday, November 14th, 2007

Have you looked at other people’s style sheets lately? Were you baffled to find square brackets in the CSS code? If so, this article might be of interest to you.

What Does It Mean?

Curly braces should feel comfortable to any CSS author, since you cannot write any useful CSS without them. Regular parentheses should be fairly familiar, too, at least if you’ve used functional notations like background-image:url("/images/bg.png") or color:rgb(128, 128, 255). But square brackets?

The square brackets denote an attribute selector – a concept that was introduced in 1998 in CSS Level 2. An attribute selector modifies a simple selector by imposing an additional constraint on it. Does that sound like Greek to you? (Or like something other than Greek, for those of you who are, in fact, Greek?) Don’t worry, we’ll look at some examples in a short while.

Why Should You Even Bother?

But first, let’s address another question: If attribute selectors really are useful, why didn’t you already know about them? Or, to turn it around, since you’ve managed to get by without them, what’s the point of using them?

The reason you may not have heard about them is quite simple: Internet Explorer for Windows up to and including version 6 don’t support attribute selectors. Since the market share for those browser versions has been well above 80% until very recently, there hasn’t been much incentive for using attribute selectors in public-facing websites.

Version 7 of IE does support attribute selectors, though, and as more and more users upgrade from IE6, attribute selectors gain more interest.

What can those newfangled attribute selectors do then, that’s so useful that you should take some of your precious time to learn about them? The answer is that they allow you to do a lot of things that you hitherto have had no other way to achieve than to pollute your markup with class attributes.


Look What’s Just Popped Up!

Thursday, November 8th, 2007

I was recently asked to create a pop-up message box for a client. The requirements were as follows: as the message box pops up the rest of the screen needs to dim, much in the same way as the lightbox effect. This needed to be achieved with minimal JavaScript; which was quite lucky because my JavaScript skills are minimal anyway. Another requirement was that the message box be vertically and horizontally centered in the viewport while the content underneath should still remain scrollable.

In hindsight I could have directed the client towards the lightbox script. However, I thought it might be fun to see how far I could go using mostly CSS and only using a snippet of JavaScript to swap an ID to effect the changes required.

Before we get started have a look at the end result so that you are familiar with what we are trying to achieve. The CSS has been left in the head on purpose so that you can view it easily.

First Things First

The first thing we need to do is decide on a plan of action. Let’s list the things that need to be done:

1.) Construct the message box itself (difficulty level – easy)

2.) Center the message box in the viewport both vertically and horizontally remembering that we have no fixed height to work with as content will determine the height of the message box (difficulty level – medium)

3.) Fix the message box so that it stays put in the viewport and doesn’t scroll with the document (difficulty level – hard)

4.) Fade everything else on the page except for the message box (difficulty level – awkward)

Let’s Get Busy!


Tables – Anything You Can Do I Can Do Better

Wednesday, October 10th, 2007

Tables handle images with captions nicely — you can easily center an image and have a caption centered underneath it while also having the image centered within a container or viewport. However, the drawback of using tables for this is that you are limited to a fixed number of cells across the screen and although the cells can grow and collapse depending on the image size, you can never have any more or less number of images per row than those you started with. If a table is 4 cells wide then you are restricted to 4 images for every row no matter how big or small they are.

When CSS came along a lot of people said “Aha! We can now float our images across the page”. This was a good start as it allowed the images to float across the page and expand or wrap as the page got smaller or bigger. Adding a caption wasn’t that difficult either as the parent container could be floated with the image and caption within it.

In this article we explore some useful CSS techniques to create a small photo gallery that will allow for a caption to be placed underneath our photos. This technique allows our images to flow and re-align across the screen depending on the width of the browser, unlike a table approach which always limits you to the same number of cells per row that you started with.


mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators

Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading