[CSS]dopasowanie styli pod jeden z bajerków Opcje

[Larges]

http://designreviver.com/tutorials/jquery-...ntal-accordion/

- tutaj jest bajerek który chciałbym zamieścić na www.

oto sugerowany wpis do pliku .css

Kod

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

#a1{
  width: 210px;
}

ul li img{
  position: absolute;
  border: 3px solid #881212;
}

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}

niestety takiego kodu wstawić nie mogę, trzeba go odróżnić od pozostałych i robię to następująco:

Kod

.top_obrazki ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.top_obrazki ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
}

.top_obrazki ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

.top_obrazki #a1{
  width: 210px;
}

.top_obrazki ul li img{
  position: absolute;
  border: 3px solid #881212;
}

.top_obrazki ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}

Następnie wklejam kod:

Kod

<ul class="top_obrazki">
  <li>
    <a id="a1">
      <img src="images/free_thumb.jpg" />
      <p>
        <strong>Freebies</strong><br/>
        Download free files to make your job easier.
      </p>
    </a>
  </li>
  <li>
    <a>
       <img src="images/tut_thumb.jpg" />
       <p>
         <strong>Tutorials</strong><br/>
         Tips and tricks to help you
         keep up with the latest technology.
       </p>
    </a>
  </li>
  <li>
    <a>
      <img src="images/inspire_thumb.jpg" />
      <p>
        <strong>Inspiration</strong><br/>
        Get inspired by what other designers are doing.
      </p>
    </a>
  </li>

</ul>

Na tym etapie już efekt nie jest poprawny.

Czy zna ktoś rozwiązanie? Dzięki za podpowiedzi.

[erix]

A kod podpinający (JS) odpowiednio zmodyfikowałeś?