OCT 27
Code

I work with a lot of clients who are really visually oriented and minimal. Especially in their shops, the more screen real-estate that’s taken up by their imagery, the better. To that end, I came up with a method of making interesting store elements that maximizes the amount of space each image gets, while not sacrificing information that customers need to make their decisions.

You can see the effect here:

The code is relatively straightforward – you start with HTML markup that creates a elements for the image and info boxes, wrapped by a containing div:

<div class="store_element">
  <a href="#" title="Echo Bloom Presents Jamboree"><i mg src="/oneoffs/media/images/echobloom_jamboree.jpg" /></a>
  <div class="element_info">
    <a href="#"><span class="element_title">Echo Bloom Presents Jamboree</span>
    <span class="element_price">$10.00</span></a>
  </div>
</div>

The element_title and element_price pieces then only need to be correctly aligned to function correctly:


.element_info {
  position: relative;
  top: -288px;
  color: #fff;
  display: none;
  font-weight: bold;
}

.element_info a {
  color:#FFF;
}

.element_title {
  background-color:#333;
  display:block;
  padding:5px;
  width:240px;
  height:auto;
}

.element_price {
  background-color:#333;
  display:block;
  float:right;
  position:relative;
  top:100px;
  padding:5px;
  width:70px;
  height:auto;
  text-align:center;
}

The result allows you to tile elements in a store without having to make room for a ‘Buy’ button or include additional space for text descriptions – perfect for minimal layouts.

You can download the code for this here.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>