Tutor.blog

Tutor.Blog je online priručnik na hrvatskom jeziku, za lakše snalaženje u HTML i CSS kodu. Ovdje možete naučiti kako učiniti svoj blog vizualno privlačnim, ali i osnove dizajniranja web stranica koje ne moraju biti nužno vezane uz blog.

Ovaj blog nije povezan sa uredništvom Blog.hr-a, te ne pruža podršku za tehničke probleme.

Besplatni predlošci za blog

Izbornik s rollover efektom

Ovo je tutorial kako napraviti lijepo izgledajući meni kao što možete vidjeti ovdje sa strane :)
Zapravo je vrlo jednostavno.


Glavna stvar koju morate napraviti je da vašu listu linkova sortirate u unordered (nenumeriranu) listu. Ovako:


<ul class="meni"><li>linkovi</li><li><a href="http://inobscuro.com/">in obscuro</a></li><a href="http://chattenoire.com/">chatte noire</a></li><li><a href="http://tutor.blog.hr/">tutor.blog</a></li></ul>

to će izgledati ovako:



Za sada to izgleda malo ružno, ali CSS će sve riješiti :) Zato smo listi dali klasu meni kako bi joj mogli pristupiti preko CSS-a, a da to formatiranje ne utječe na možebitne druge liste na vašem blogu.


.meni {
margin: 0px;
padding: 0px;
font-size: 12px;
color: #eee;
width: 200px;
background: #444;
border: #ccc 1px solid;
list-style: none;
}
.meni li {
font-size: 11px;
line-height:18px;
text-align: center;
line-height:18px;
margin: 2px;
padding: 2px;
padding-left: 3px;
letter-spacing: 2px;
}
.meni li a, .meni li a:visited {
padding:0px;
padding-left: 3px;
color: #fff;
display: block;
text-align: left;
border: #ccc 1px solid;
background: #666;
text-decoration: none;
}
.meni li a:hover {
color: #000;
background: #ccc;
border: #000 1px solid;
}


Ako dodam još malo linkova i sortiram ih po kategorijama, koristeći ovaj kod:


<ul class="meni"><li>moji linkovi</li><li><a href="http://inobscuro.com/">in obscuro</a></li><li><a href="http://chattenoire.com/">chatte noire</a></li><li><a href="http://tutor.blog.hr/">tutor.blog</a></li><li>ostali linkovi</li><li><a href="http://www.google.com/">google</a></li><li><a href="http://www.blog.hr/">blog</a></li><li><a href="http://helpblog.blog.hr/">help blog</a></li></ul>


Promijenite boje i veličine u pixelima, jer naravno ne želite imati baš isti ovakav meni :)

16.04.2005. @ 18:10

Blog je neaktivan i nije ga moguće komentirati. Obrazloženje

Nela Dunato Art & Design

Još niste uspjeli naći baš ono što vam treba? Pretražite cijeli Tutor.Blog:

Google

Informacije, razno

Tekstovi, slike i izvorni kod: nelchee


Nela Dunato art & Design
Moj design portfolio


In obscuro
Besplatni predlošci za web stranice


Cwtam - sketchblog
moj sketchblog




Prati me na Twitteru


Ako želite na svoj blog dodati link do Tutor.blog-a, kopirajte kod iz textbox-a (Desni klik --> Select All --> Copy) na mjesto gdje želite da se link pojavi. Hvala! :D


Tutor.Blog


HTML i CSS tutoriali


HTML i CSS tutoriali

Sadržaj ovog bloga je autorski rad. © 2005-2007 Nela Dunato
Login
Google

Blog.hr koristi kolačiće za pružanje boljeg korisničkog iskustva. Postavke kolačića mogu se kontrolirati i konfigurirati u vašem web pregledniku. Više o kolačićima možete pročitati ovdje. Nastavkom pregleda web stranice Blog.hr slažete se s korištenjem kolačića. Za nastavak pregleda i korištenja web stranice Blog.hr kliknite na gumb "Slažem se".Slažem se