Pseudo tabele

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-21

szukaj: tabele table css html

Tabele mają to do siebie, że są niezwykle sztywne. Nie można zmieniać elastycznie liczby komórek w wierszu. Co najwyżej szerokość już istniejących komórek. Ale gdzie HTML nie da rady tam CSS pośle:-)

Na początek zbudujmy sobie "komórkę" - kod HTML:

<div class="szablon">
 <img src="grafika2.jpg" alt="zdjęcia" />
 <ul>
  <li><a href="pokaz_2.htm" onclick="this.target='_blanc'">pokaż</a></li>
 </ul>
</div>

Jak widać jest to zwykła, prostokątna warstwa, zawierająca jedną grafikę i listę. Aby zauważyć efekt, skopiuj powyższy kod z kilka, albo i nawet kilkanaście razy. Przejdźmy więc do kodu CSS

div.szablon {  /* tworzę regułę dla warstwy o klasie 'szablon' */
float: left;   /* ustawiam opływanie na left - wszystko będzie dosuwane do lewej strony*/
height: 100px; /* wysokość warstwy na 100px - może być oczywiście inna*/
width: 100px;  /* szerokośc na sto pikseli - może być inna*/
padding: 15px; /* odległość może być także inna*/
margin: 10px;  /* i marginaes, też możesz zmienić wg upodobania*/
}
div.szablon img {  /* reguła dla grafik umieszczanych w wastwie z klasą 'szablon'*/
 border: 1px solid; /* obramowanie 1px linia ciągła*/
 border-color: #444 #AAA #AAA #444;/* kolory obramowania kolejność: góra,  prawa, dół, lewa*/
 height: 100px;     /* wyskosc 100px, można zmienić*/
 width: 100px;      /* szerokośc 100px, można zmienić*/
 margin: 16px 0;    /* marginasy - prawy, lewy: 0px, góra, dół 16px; */
}
div.szablon ul {    /* reguła dla listy */ 
 margin: -25px 0 0 0;/* margines górny uejmny - podciągnij listę o 25px do góry*/
 padding: 0;
 text-align: center; /* wyśrodkuj text - <b>a nie wyśrodkuj listę!</b>*/
 list-style-type: none;/* nie pokazuj żadnych kropek itp. oznakowań kolejnych elementów listy */
}
div.szablon li { /* pozycje listy */
 margin : 0;
 padding: 0;
 display: inline; /* wyświetlaj w lini, dzięki temu pozycje listy będą się  pokazywać obok siebie, nie jedna pod drugą. */
 font: normal 11px arial, sans-serif;
}

I tym sposobem mamy już pełen ciekawy efekt. Dla pewności po skopiowaniu kodu pousuwaj komentarze /* */, bo może się okazać, że w jakiejś przeglądarce powodują błędy.

Patryk 'yarpo' Jar

szukaj: tabele tabele table table css css html html

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!