Notka dziś strasznie uboga w dodatki i grafikę, gdyż przez to całe przygotowywanie się do świat nie było czasu aby coś fajniejszego zrobić. Dziś mam tylko dwa nagłówki, z których nie jestem zbytnio zadowolona oraz cztery teksturki, które nie wyszły aż tak źle :) Poza tym mam jeszcze instrukcje na menu, o którą poproszono mnie w poprzednich notkach. Mam nadzieję, że instrukcja jest dość czytelna i zrozumiała. Od razu też przepraszam za liczne powtórzenia. To już wszystko na dziś. Pozdrawiam ;*
Jak zrobić menu z obrazkiem i ramkami jak ukazane jest poniżej?

<div id="sidebar">
<div id="nav">
<a href="http://"><div id="navi" class="aa">link1</div></a>
<a href="http://"><div id="navi" class="b">link2</div></a>
<a href="http://"><div id="navi" class="c">link3</div></a>
<a href="http://"><div id="navi" class="d">link4</div></a>
<a href="http://"><div id="navi" class="e">link5</div></a></div>
<img class="pic" src="http://"/></div>

Kolorami oznaczyłam części kodu, które należy edytować. Przy kolorze niebieskim należy wkleić nasz link do którego będzie dany odsyłacz, fioletowy to zwykła nazwa odsyłacza a czerwony to link naszego obrazka. Kolejnym krokiem jest dodanie naszego kodu CSS, więc wchodzimy w zakładkę szablon, dostosuj, zaawansowane, dodaj arkusz CSS i wklejamy poniższy kod.

#sidebar {
width: 360px;
position: absolute;
height: 522px;
left: 150px;
top: 50px;
background-color: #000000;
border: 10px solid #000000;}
.pic {
width: 360px;
height:522px;
display: block;
position: absolute;}
#nav {
width: 360px;
position: absolute;
margin: -20px 15px;}
#navi {
float: left;
width:60px;
text-align: center;
font-family: consolas;
font-size: 10px;
text-transform: uppercase;
margin: 0 2px;
height: 10px;
line-height: 10px;}
.aa, .b, .c, .d, .e, .f {
background-color: #dfc981;color: #fff;border-top:0 solid #000;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;}
.aa:hover, .b:hover, .c:hover, .d:hover, .e:hover, #nav:hover .aa:hover {
background-color: #000;
color: #ffffff;
border-top: 10px solid #dfc981;}

Teraz po kolei co z czym współgra. Kolor oznaczony fioletem jest odpowiedzialny z tło które schowane jest za naszym obrazkiem, za to fragment zaznaczony na kolor żółty to nasza ramka. Najlepiej, żeby oba kody miały ten sam kolor. Kolejny kolor zaznaczony na niebiesko oznacza kolor tła naszego linka, zielony natomiast to kolor czcionki. Następny jest kolor różowy i on jest naszą ramką górną linku. Widać ją dopiero jak najedziemy na nasz link myszką, dlatego musi ona mieć dokładnie taki sam kolor jak tło po najechaniu myszką czyli nasz następny kod z kolorem czerwonym. Nasz ostatni kod (pomarańczowy) to ramka, która wystaje gdy nasz link zjedzie na dół. Aby edytować położenie gadżetu wystarczy pobawić się troszkę wartościami top i left w selektorze #sidebar. Jeśli chcemy zmienić rozmiar obrazka wystarczy edytować wartość width w selektorach #sidebar, #nav, .pic i height w selektorach #sidebar, .pic.
No i gotowe jeśli coś jest niejasne, albo ktoś ma jakieś pytania lub czegoś nie wie pytać śmiało. Postaram się pomóc i odpowiedzieć na wszystkie pytania. :)

Safetysuit - What If