Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]dopasowanie styli pod jeden z bajerków
Forum PHP.pl > Forum > Przedszkole
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ś? snitch.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.