jQuery content slider: CSS

In a previous post I shortly introduced the very basic concepts behind a jQuery content slider. Now it's time to talk about the theory that underlies the development of a content slider. First of all, a jQuery content slider is made up of two components: CSS and jQuery itself. In this post I'm going to cover the CSS component in details.

Content overflow

In CSS, the content exceeding from a container is ruled by the overflow property. When you set this property to hidden, all the exceeding content is hidden from view. This property turns out to be very useful when it comes to content sliders. In fact, by using this content you actually make sure that only a part of the content is visible. For example, consider the following image:

You can achieve this result with the following CSS:

#slider {
  width: 340px;
  height: 100px;
}

div.slide {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

In this case, floats are contained by the fact that we've specified a stated height for their container. Now suppose that you want only the first box to be visible. You can rewrite the above code as follows:

#slider {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

div.slide {
  float: left;
  width: 100px;
  height: 100px;
}

By setting the container's width to the width of a single slide and adding the overflow property to it, you make sure that only the very first box will be visible. For the sake of completeness, bear in mind that CSS3 allows also for the use of the overflow-x and overflow-y properties. As their name says, these properties control the x and y axis of the overflow process, respectively.

Positioning schemes

In CSS, there are two positioning schemes available: relative and absolute. Both rely on the position property and its auxiliary properties to work, namely top, right, bottom and left.

The position of a relatively positioned element always refers to its current position on the page, whereas the position of an absolutely positioned element can actually:

• refer to the global viewport if there are no positioned ancestors
• refer to the position of its ancestors if they're positioned

In other words, if you have a relatively positioned element which contains an absolutely positioned element, then the position of the child element refers to its parent, not to the global viewport. In technical terms, this is called contextual positioning.

One important thing to bear in mind is that the four auxiliary properties named above actually affect the overall computation of the final dimensions of an element. More precisely, top and bottom affect the height of the containing block, while left and right affect the width of the containing block.

This is important because if you have to move an element inside a container, you should always carefully calculate what the final dimensions of the element will be. Otherwise, this could lead to unexpected results.