Post #4: The Positioning of Images on TOMS


TOMS Shoes

Since I am a frequent consumer of TOMS shoes, I thought I should give a look into the business’s website. Also, since I’d also love to work for this company one day, I thought I should gain an understanding for how its website works.

The main point of today’s blog is to look at positioning of content on the website. I wanted to understand how TOMS placed their images, items and text along their website, and because of this, the assignment called that I look into the company’s use of CSS.Screen Shot 2015-03-04 at 10.07.33 PM

The website uses some abbreviated CSS language in some areas, but this does not take away from the complexity of the site.

For this screenshot above, I mainly looked into the main image of the home page. The height of the image is 847 px, and it has a block display. There is no padding on the image,

The main image here is along a slider. When the image is stable, its code for margin-left is 0 percent, but once the image slides to the left, the margin-left changed to 100 percent. There is no max-height for the image, and the image doesn’t have a background.

The programmers of the website placed  the image in its own container, and this feature helped center the image on the homepage.

The image was also placed in an unordered list. This list had a class, and the class centered the image and spread it throughout the width of the homepage.

Each section and image on the homepage had its own div and class.

The “One for One” logo is actually an image taken from Photoshop. It was given a title and an alt tag, and the name of its class looked like this:


<div id=”one for one” class=”row text-center canvas-big”>


This language allows the logo to be centered in the page, and it allows the picture to stand out. The programmers of the site used a “before” tag to place the image in front of the other elements on the page.

When looking at one of the shop pages of the site, I decided to look at one of the main pages for women’s shoes.

Screen Shot 2015-03-04 at 10.35.42 PM

The entire page is positioned in 12 columns, and they’re in a div and a class.

The “SHOP WOMEN’S SHOES” banner has 17 px in padding-right, and the maximum width of the entire page is 1016 px.

The shoe called “Whisper Canvas Shashiko Women’s Desert Wedge,” is a picture from Photoshop. It is positioned in the middle column, and the “margin-top” attribute of the image is 0 px. A span is used for the “NEW” button locate under the image of the shoe.

There is a stacked structure to the site’s CSS. The CSS language is also extremely complex, but the simple techniques used are easy to recognize.

Each image on the page is given a border of 1 px solid, and the color is white for all of the borders for the images of shoes.

The use of spans, classes, divs, and ids create the skeleton of the CSS language used on the website.

The use of the column tag allowed for the site to be arranged in this style. The company uses this technique and style when it comes to positioning products throughout its entire website.


Screen Shot 2015-03-04 at 10.48.04 PM


This screenshot shows a picture of men’s apparel that the website sells. The CSS is the same as that of the shoes in the previous explanation. The entire page is in rows of 12, and the maximum size of the page is 1016 px.

The columns have a margin-top tag of 20 px, and every image has a box display. The margin on the body of the columns is 8 px, and the line height of each image is 16 px.

There isn’t much padding used on the site, and there isn’t a border around the main background of the site or many of the images. The position of the images has a “relative” tag, and the width of the page is 1,488 px.

By using these techniques, TOMS is able to create a clean and sophisticated website with the use of its positioning of various elements on the pages. The positioning of the images, text and logos on the website allow the website to be clear to the consumer. Also, it helps to add to TOMS brand.

I found it interesting to see the complexity of the HTML and CSS languages used in the site. There are many elements in the site that the average person overlooks, and by looking at the code for the website, I was able to discover the various elements that are used to create a functioning and visually-appealing website.

–Natasha Brewer



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s