CSS框式布局，重点突出中心项目

Question

Good Morning,

I'm attempting to design a webpage, what I believe to be a simple CSS layout, but I want to make sure I'm handling it the most efficient way possible. I'm unable to attach an image of my mockup due to my reputation but hopefully the JSfiddle below will make it clear what my end goal is.

I have also mocked up a jsFiddle with what I have already completed. But there are some items I'm not sure how to accomplish. IE, the width of 'option 1' I want to overlap 'option3 and 4' slightly. As well as some dropdshadow that overlays 3&4 to give some depth and focus to option 1.

http://jsfiddle.net/rXq7F/3/

I'm not sure if there is a name for this kind of design, but any help in the proper way to accomplish something like this is appreciated!

Thanks!

     <div class="row">
    <div class="span4">
      <h2>2</h2>
      <p> </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span4">
      <h2>3</h2>
      <p></p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
   </div>
    <div class="span4 middle" style="">
      <h2>1</h2>
      <p></p>
      <p></p>
    </div>

    <div class="span4">
      <h2>4</h2>
      <p></p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>


    <div class="span4">
      <h2>5</h2>
      <p></p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>        

  </div>

Answer 1

Than you'll have to play with z-index .

I gave to the middle one z-index: 2 , and to the others z-index: 1 .

Fiddle

Answer 2

Try to make it responsiv.

<div class="row">
<ul class="span4">
<li>2</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

<div class="row">
<ul class="span4">
<li>3</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

<div class="row middle">
<ul class="span4">
<li>1</li>
<li></li>
<li></li>
</ul>
</div>

<div class="row">
<ul class="span4">
<li>4</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

<div class="row">
<ul class="span4">
<li>5</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

body {
    clear: both;
    width: 70%;
    margin: 0 auto;
    padding-top: 10%;
}
.span4 {
    list-style: none;
    z-index: 1;
}
.row {
    float: left;
    margin: 0;  
    width: 18.6%;
    border: 1px solid #EEE;
    height: 150px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    z-index: 1;
}
.row:first-child {
    margin-left: 3%;
}
.row:last-child {
    margin-right: 3%;
}
.middle {
    height: 200px;
    margin-top: -25px;
    box-shadow: 0 10px 5px #EC6262, 0 -10px 5px #EC6262;
    -webkit-box-shadow: 0 10px 5px #EC6262, 0 -10px 5px #EC6262;
    z-index: 2;
}
.row li {
    padding: 8% 0;
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #F5F5F5;
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    text-decoration: none;
}