Witam wszystkich:)


Regularnie zamieszczam coraz to nowsze artykuły, które dotyczą obu kursów:

I. Kurs Gitarowy dla początkujących - w lewym nagłówku !

II. Kurs HTML i CSS - w prawym nagłówku !


Polecane blogi:



11 marca 2013

CSS - Pozycjonowanie elementów na stronie

(tabeli, tekstu, nagłówka, zdjęć, filmów)
1. Na początku elementy otrzymują położenie statyczne-nadawane automatycznie.

2. Pozycjonowanie relatywne-przesunięcie elementu w dowolną stronę względem jego położenia spoczynkowego.
np.pozycjonowanie obrazka
img
{
position: relative; left: 40px; top: 30px;
}

(wyjaśnienie: left-przesunięcie z lewej strony, top-przesuniecie z góry strony)
Można używać także składni right.

3. Pozycjonowanie absolutne-przesunięcie elementu strony względem wybranych brzegów strony lub obejmującego bloków.Zostanie utworzony na stałe.
np.
img
{
position: absolute; right:50px; top: 50px;
}

4. Pozycjonowanie ustalone-pozycja elementu jest obliczana względem krawędzi okna przeglądarki. Element nieruchomy podczas przewijania strony, dokładnie w tym samym miejscu.
img
{
position: fixed; right: px; top: px;
}

5. Pozycjonowanie nagłówka
h1
{
position: absolute; left: px; top: px;
}
b) tworzenie klasy dla kilku tych samych nagłówków
h1.nazwa1
{
position: absolute; left: px; right: px;
}
h1.nazwa2
{
position: absolute; left: px; right: px;
}
ważne: do html w nagłówku nadajemy znacznik class="nazwa"
W taki sposób możemy tworzyć cień dla naszego nagłówka

Także dla każdej klasy możemy tworzyć osobne kolory, np.
h1.nazwa1
{
position: absolute; left: px; right: px; color: red;
}
h1.nazwa2
{
position: absolute; left: px; right: px; color: silver;
}
c)Kolejność wyświetlenia poszczególnych nagłówków
wartość z-index: 1
np. h1
{
position: absolute; left: px; right: px; color: red; z-index: 1;
}

6. Oblowanie obrazka tekstem
img
{
float: left; -obrazek wyświetla się z lewej strony, a tekst oblewa go ze strony prawej
}

Możliwość stosowania wartości right; top; bottom;

7. Ustawienie tekstu względem obrazka (znacznik obrazka musi być wklejony w html do tekstu)
img
{
vertical-align: text-top; -przeniesienie tekstu na górę
}
Możliwość stosowania tekstu na środku w pionie, względem obrazka
vertical-align: text-middle;