Build a simple semantically valid carousel from scratch (part 2)

In the previous part of this article we had structured the HTML for our carousel, it has a strongly semantic structure. But it is only HTML. In this article we will discuss how to implement an acceptable style sheet in absence of Javascript in honor of Progressive Enhancement!

Styling the elements.

The goal of this series of article is to get a carousel as shown in the above image and as described in the previous part of this article. But in absence of Javascript, we need to make something that can be graceful as is and, in the limit of the semantic (no further tag must be introduced to the structure) we can think to something like this:

The size of my carousel would be 600 pixels width and 200 pixel height. Just to debug the occupation in the page I set its background color to a light safe color grey and a border to a little bit darker gray than the background. Just to ensure that all the contained elements will fit the entire size i will set the padding to 0.

Of course, the margin is set to auto to auto-center the container into the area he was placed. But I should set it to occupy the entire width of the contained area. I can just do it by removing width property. The overflow: auto property is set  to ensure that the carousel (or at least its content) would be usable without Javascript too. Yes! I’m minding Progressive Enhancement. Then let’s format the unordered list and its list items! The first thing we would do is to reset the common list container and list items default styles:

#my-carousel ul,
#my-carousel li{
    padding: 0;
    list-style: none;
    list-style-type: none;
}

Then we will make sure that the UL will fit the entire area and resetting its margin.

#my-carousel ul{
    position: relative;
    width: 100%;
    margin: 0;
}

And in the end, we want to display just the 5 elements from the list no one more!

Each item will occupy a 20% of the available space including eventual margin, so we define a width of 16% of total width and a margin on both left and right of 2%.

Using the box-sizing property we ensure that the 16% of the content will count the 1px border too and an hypothetical internal padding. In the following way we make a cross-browser box-sizing. To avoid the overflow of the contents just tell it to be hidden.

#my-carousel li{
    display: block;
    border: 1px solid #ccc;
    overflow: hidden;
    width: 16%;
    margin: 2%;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100px;
}

If you want you can see the stylized carousel in action. In the next week we will build our jQuery Simple Semantic Carousel Plug-in.

Stay tuned and happy coding!