darmowe szablony stron www

Rozmieszczanie napisów lub obrazków w wybranym miejscu

Dokładne rozmieszczenie kilku napisów czy obrazków najłatwiej dokonuje się za pomocą właściwości arkuszy stylów: position, top (lub bottom) i left (lub right). Fragment kodu html:

<div id="header">
     <h1>Nazwa strony</h1>
     <h2>Hasło twojej strony</h2>
     <img id="logo" src="images/logo.gif" alt="Nazwa strony"/>
</div>

I odpowiedni fragment arkusza stylów:

#header {
    position: relative;
    height: 150px;
    background: #6681F4;
}

h1 {
    position: absolute;
    top: 60px;
    left: 75px;
    z-index: 1;
    margin: 0;
    font: bold 30px Arial, Helvetica, sans-serif;
    color: #FDCF8B;
}

h2 {
    position: absolute;
    top: 20px;
    right: 100px;
    margin: 0;
    font: bold 15px Arial, Helvetica, sans-serif;
    color: #FDCF8B;
}

#logo {
    position: absolute;
    top: 40px;
    left: 50px;
    z-index: 0;
    width: 60px;
    height: 60px;
    border: none;
}

Elementy h1, h2, i img rozmieszczone są absolutnie (position: absolute), w odległościach od górnej i bocznych krawędzi podanych w "top", "left" i "right". Jeśli nie wskażemy inaczej, pozycja absolutna będzie określana względem lewego, górnego narożnika okna przeglądarki.
Możemy jednak zmienić punkt odniesienia, w przypadku strony wyśrodkowanej jest to nawet konieczne. Wystarczy wówczas dopisać - w naszym przykładzie - do elementu header: "position: relative;" i już "top: 0; left: 0;" będzie oznaczać lewy, górny narożnik niebieskiego tła.

Z-index. W przypadku nachodzenia na siebie dwóch lub więcej elementów można posłużyć się właściwością z-index, by określić, który z nich ma znajdować się na wierzchu. Im większa wartość "z-index", tym bardziej na wierzchu znajduje się dany element. W pokazanym przykładzie bez określenia z-index obrazek logo, jako później występujący w kodzie html, zakrywałby początek napisu "Nazwa strony".

Pobierz przykład