Odkazy - jiný styly – CSS – Fórum – Programujte.com

sry za tenhle trapnej dotaz... ale nějak si nemohu vzpomenout jak udělat více typů odkazů (myslím tím např: jiné zbarvení pro menu, jiné zbarvení pro odkazy v textu)

ps: jak udělat aby se u odkazu při a:hover objevil nějaký obrázek.. popř symbol. si ted nejsem jistej jestli to u css jde.

díky za váš čas... :-[

To se dela pomoci trid ;P

Styl:



menu:hover{

color:red;

}



Odkaz



<a class=menu href=bla.html>text</a>

to čumim... to je rychlost :-)

ps: k tomu odkazu.. jo tohle je fajn, ale myslel sem něco jiného.
máš normální textový odkaz a když na něj najedeš, zobrazí se před odkazem třeba čtvereček

Já bych to vyřešil takhle:

<span OnMouseOver="this.innerHTML='<img src='obrazek.bmp'> <a href='stranka.htm'>Odkaz</a>'" OnMouseOut="this.innerHTML='<a href='stranka.htm'>Odkaz</a>'">

<a href="starnka.htm">Odkaz</a>

</span>

Fuj dhtml :pche:

Odkazy se ctvereckama se delaji nejjednoduseji pres LI tag s vhodnym stylem, napr.

list-style-image: url(image.gif);

Díkes.. tohle jsem přesně myslel... řešení pomocí dhtml se mi taky moc nelíbí :ok:

Funguje vám to i ve Firefoxu? Mně to nevezme :? , IE to přitom překousne bez problému.
konkrétně:

.menu {list-style-image:url("ctverec2.png")}

Tak už jsem to přepral, chyběla tam mezera :chiche:
.menu {list-style-image: url("ctverec2.png"
ale teď mám ještě jeden problém, chci to udělat jako překrývací obraz

.menu1 a:visited, .menu1 a:link {

color: #000000; list-style-image: url ("ctverec2.png")}

.menu1 a:hover, .menu1 a:active {

color: #FFff00; font-weight: bold; list-style-image: url ("ctverec.png")}

Tedy přesněji:

<div class="menu1"><ul>

<li><a href="index.htm">Menu</a></li>

<li><a href="foto.htm">Foto</a></li>

 ...

</ul></div>

.menu1 a:visited, .menu1 a:link {

list-style-image: url("ctverec2.png")}



.menu1 a:hover, .menu1 a:active {

list-style-image: url("ctverec.png")}

a musí to být seznam? lépe řečeno list-style je zbytečný. udělal bych to takto

.menu a {

padding-left: 15px; /* šířka toho obrázku, aby na něj bylo místo*/

background-image: none;

}



.menu a:hover {

background-image: url('neco.png');

background-repeat: no-repeat;

}

 

<div class="menu">

<a herf="bla">bla</a>

<a herf="bla">bla</a>

<a herf="bla">bla</a>

<a herf="bla">bla</a>

</div>

Já to mám na webu nějak takhle:

CSS:

.menuitems a {

  width: 250px;

  font-family: Verdana;

  font....

  background-image: none;

  padding-left: 15px; /**Tohle mám jinak kvůli IE, ale nechce se mi to tu rozepisovat, tak si to pak uprav aby to šlapalo stejně v IE i FF*/

}

.menuitems a:hover {

  background-image: url("ctverecek.gif");

  backgrond-position: left center;

}

<div class="menuitems">

  <a href="index.php?item=1">Menu 1</a><br>

  <a href="index.php?item=2">Menu 2</a><br>

  ....

</div>