kursy
Pseudo tabele
Tabele mają to do siebie, że są niezwykle sztywne. Nie można zmieniać elestycznie liczby komórek w wierszu. Co najwyśzej szerokośc już istaniejących komórek. Ale gdzie HTML nie da rady tam CSS pośle:-)
<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, prostokatna 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ęzie 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 - a nie wyśrodkuj listę!*/
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 jakiejsć ptrzeglądarce powodują błędy.
Patryk 'yarpo' Jar
