Threaded Mode | Linear Mode

stefo · 13-08-2008 02:58 PM

Radim jedan sajt i zapeo sam. Moj prijatelj je odradio dizajn u Photoshopu a ja sam to prebacio u web format(izrezao slicice i napravio CSS kod).

U attachmentu sam prilozio sliku headera. I sad u ovim kukicama se nalaze linkovi. I mene zanima kako da definisem za svaki link poseban a:hover?
Znaci link koji se nalazi u zelenoj kukici da ima zelenu boju kad se predje preko njega misem.

Morrissey · 13-08-2008 04:41 PM

Prvo trebaš html markup za svaki od njih :

Code:

<a class="green" href="#">Link 1</a>

<a class="blue" href="#">Link 2</a>

<a class="orange" href="#">Link 3</a>

<a class="velvet" href="#">Link 4</a>

onda CSS :

Code:

a:hover .green

{

  color: green;

}

a:hover .blue

{

  color: blue;

}

a:hover .orange

{

  color: orange;

}

a:hover .velvet

{

  color: velvet;

}

stefo · 13-08-2008 05:30 PM

Nece. Pazi imam divider koji se zove header,a unutar njega je divider koji se zove meni.
Probao sam tvoj nacin i jos par nacina ali ne ide.

Morrissey · 13-08-2008 05:37 PM

Ajd mi uploadaj te fajlove pa ću se poigrat.

Len0 · 13-08-2008 09:31 PM

HTML

Code:

<div id="green"><a  href="#">Link 1</a></div>

<div id="blue"><a  href="#">Link 2</a></div>

<div id="orange"><a  href="#">Link 3</a></div>

<div id="velvet"><a  href="#">Link 4</a></div>

CSS

Code:

#green a:hover

{

  color: green;

}

#blue a:hover 

{

  color: blue;

}

#orange a:hover 

{

  color: orange;

}

#velvet a:hover

{

  color: velvet;

}

Probaj ovako, trebalo bi da radi.

Morrissey · 13-08-2008 10:29 PM

Velika greška LenO, id-ove se treba izbjegavat.
Posebno tolko nepotrebnih divova jer markup mora biti minimalistički što je moguće više.
Tj nije tehnička greška ali je greška dizajna općenito.

Ovo treba radit moje no neznam njegov markup tako da mi je teško reć dok ne vidim.

EDIT: zaboravio sam da tako to nejde, evo rješenja koje radi provjereno

Code:

<html>

<head>

 <title> Hover linkovi </title>

 <style type="text/css" media="screen">

 .green:hover {

  color: green;

 }

 .blue:hover {

  color: blue;

 }

 .orange:hover {

  color: orange;

 }

 .purple:hover {

  color: purple;

 }

 </style>

</head>

<body>

<a class="green"  href="#">Link 1</a>

<a class="blue"   href="#">Link 2</a>

<a class="orange" href="#">Link 3</a>

<a class="purple" href="#">Link 4</a>

</body>

</html>

Threaded Mode \| Linear Mode Definisanje hovera za svaki link
Author	Message