darmowe szablony stron www
Przykłady CSS
- Nietypowe podkreślenia hiperłączy
- Menu pionowe składające się z kilku bloków
- Menu pionowe zmieniające kolor po najechaniu kursorem
- Menu poziome 2
- Menu poziome 1
- Rozmieszczanie napisów lub obrazków w wybranym miejscu
- Strona z trzema kolumnami
- Strona z dwiema kolumnami
- Wyśrodkowanie strony
Video Kurs:
GIMP - Warstwy
Pomoc
- Zasady użycia szablonów
- O szablonach flash
- Edycja pliku data.txt
- Edycja pliku style.css
- Polskie znaki w data.txt
- Znaki specjalne w data.txt
- Obrazki w szablonach flash
Na zakupy
Strona z dwiema kolumnami
Oto kod html:
<body>
<div id="main">
<div id="header">
Nazwa strony...
</div>
<div id="menu">
Menu strony...
</div>
<div id="middle">
<div id="left">Zawartość kolumny lewej...</div>
<div id="right">Zawartość kolumny prawej...</div>
</div>
<div id="footer">
Footer...
</div>
</div>
</body>
W części "middle" umieszczamy dwa elementy div: "left" i "right", które będą tworzyć dwie kolumny o stałej szerokości. Aby ustawić je obok siebie wykorzystamy się właściwość arkusz stylów "float;" ustawioną na "left;" oraz "right;", co spowoduje wyrównanie kolumn odpowiednio do lewej i prawej krawędzi strony. Dla elementu "footer" znajdującego się poniżej dodajemy jeszcze "clear: both;". Oto interesujący nas fragment kodu CSS:
#left {
float: left;
padding: 10px;
width: 220px;
background: #D9DFFC;
}
#right {
float: right;
padding: 10px;
width: 540px;
}
#footer {
clear: both;
height: 40px;
line-height: 40px;
text-align: center;
background: #F5D8A4;
}
Szerokość kolumn a padding. Jeśli w elementach div zastosujemy padding, należy pamiętać o zmianie ich szerokości. Przykładowo, kolumna lewa posiada padding 10-pikselowy, i szerokość: 220 pikseli, tak więc rzeczywista szerokość kolumny będzie wynosić 240px (10px + 220px + 10px).
Tło lewej kolumny. Jeśli jedna z kolumn będzie mieć inne tło, to najprawdopodobniej zdarzy się sytuacja jak na obrazku obok, gdzie lewa kolumna nie rozciąga się na całą wysokość, aż do stopki.
Aby tego uniknąć tworzymy obrazek będący poziomym wycinkiem z tła - dla jednolitych kolorów wystarczy wysokość 1px. Gotowy obrazek będzie stanowić tło elementu "main" powtarzające się w pionie:
#main {
background: #F5FFFA url(images/bg.gif) repeat-y;
}