Link text z background boxom

7 naročnikov

Pozdravljeni,

ker sem v CSSju še "malinovec" imam eno vprašanje. Ali je možno, da se za link textom, ko uporabnik "položi" miškin kazalec nanj, prikaže recimo pravokotnik? Upam, da razumete kaj mislim... da bi lahko preko CSSja nadzoroval kolikšen del za in okoli linka se obarva v drugo barvo itd... Trenutno je link text narejen enostavno tako, da se text samo podčrta.

Hvala za nasvete, predloge - skratka vse odgovore! :) Pa lep začetek "skrajšanega" tedna želim vsem skupaj.

Lahko mu spremeniš background.

a:hover {
  background: red;
}

display:block ti naredi "pravokotnik", potem mu pa nastavi margin in padding

Predlagam da si ogledaš w3schools

http://www.w3schools.com/css/default.asp

Vini, hvala za hint :) prav tako hvala za nasvete komacu, study...w3c pa s pridom uporabljam :)

Sedaj me pa še nekaj zanima... Ukvarjam se s komponento AdsManager (joomla) in na vstopni strani te komponente imaš pač kategorije, v mojem primeru štiri. Pri vsaki kategoriji je fotografija in text-link... Po defaultu je slika postavljena na levo stran naslova kategorije, jaz pa bi rad, da je pod njo. Torej najprej štiri slikce, v drugi vrstici pa samo naslovi kategorij.... Prilagam delček kode, če bi mi lahko kdo pomagal kako spraviti tisti text-link pod fotografijo.

function recurseCategories( $id, $level, &$children,$itemid) {

  if (@$children[$id]) {
      $i=0;$first=true;
      foreach ($children[$id] as $row) {
          $link = JRoute::_("index.php?option=com_adsmanager&view=list&catid=".$row->id."&Itemid=".$itemid);
          if ($level == 0)
          {
              if ($i==0)
              {
                  echo '<tr align="center">';
              }
              ?>
              <td width="45%">
              <table width="100%" border="2" cellspacing="0" cellpadding="0" >
              <tr>
                <td rowspan="2" width="80"><div align="center">
                <?php
                  if (file_exists(JPATH_BASE."/images/com_adsmanager/categories/".$row->id."cat.jpg"))
                      echo '<a href="'.$link.'"><img class="imgcat" src="'.$this->get('baseurl').'/images/com_adsmanager/categories/'.$row->id.'cat.jpg" alt="'.$row->name.'" /></a>';
                  else
                      echo '<a href="'.$link.'"><img class="imgcat" src="'.$this->get('baseurl').'/components/com_adsmanager/images/default.gif" alt="'.$row->name.'" /></a>';
                ?>
                </div></td>
                <td>
                  <h2 class="adsmanager_main_cat"><a href="<?php echo $link; ?>"  ><?php echo $row->name." (".$row->num_ads.")"; ?></a></h2>
                </td>
              </tr>
              <tr>
              <td>
              <h3 class="adsmanager_sub_cat">
              <?php
          }
          else
          {
              if ($first == false)
                  echo ' - ';
              echo '<a href="'.$link.'">'.$row->name." (".$row->num_ads.")".'</a>';
              $first = false;
          }
          if ($level == 0)
          {
              $this->recurseCategories( $row->id, $level+1, $children,$itemid);
          }
          if ($level == 0)
          {
              ?>
              </h3>
              </td>
              </tr>
              </table>
              </td>
              <?php
              if ($i==1)
              {
                  echo '</tr>';
              }
          }

P.S. adsmanagermaincat je text-link kategorije...

Aja, pa še CSS koda za ta del, ampak s tem si verjetno ne morem kaj pomagati:

.adsmanager_main_cat,.adsmanager_main_cat a:link,.adsmanager_main_cat a:visited{
 font-size: 11px;
 padding-top: 3px;
 color: #000000;

}

Sem pa čisti začetnik v tem tako, da bom vesel, če mi kdo po "domače" razloži zadevo :))

Tale koda ti prikaže sliko:

<?php
if (file_exists(JPATH_BASE."/images/com_adsmanager/categories/".$row->id."cat.jpg"))
echo '<a href="'.$link.'"><img class="imgcat" src="'.$this->get('baseurl').'/images/com_adsmanager/categories/'.$row->id.'cat.jpg" alt="'.$row->name.'" /></a>';
else
echo '<a href="'.$link.'"><img class="imgcat" src="'.$this->get('baseurl').'/components/com_adsmanager/images/default.gif" alt="'.$row->name.'" /></a>';
?>

Tale pa je za link:

<h2 class="adsmanager_main_cat"><a href="<?php echo $link; ?>" ><?php echo $row->name." (".$row->num_ads.")"; ?></a></h2>

Torej, ti dve zadevi prestavi v tabeli tako, da bo slika pod besedilom. Prestavi kodo za sliko v spodnji <tr> v ustrezen <td>. Upam, da je vsaj približno razumljivo in točno, sem bolj na hitro preletel :) Če daš kakšen link ti lahko jaz uredim.

Gizmo, najlepša hvala! Bom poskusil, upam, da rata... Link bi z veseljem dal ampak je zaenkrat vse še na localhostu (wamp) :(

Evo, uspelo! Pobrisal sem en div, td in tr.... sedaj koda izgleda tako (upam, da ni nič narobe, če sem tisti del pobrisal? Enostavno sem kodo od slike postavil v isti td/tr kot je koda od kategorije, le da sem jo postavil NAD njo... Gizmo hvala
!

<td width="45%">
                    <table width="100%" border="2" cellspacing="0" cellpadding="0" >
                    <tr>
                      <td rowspan="2" width="80"><div align="center">
                    <tr>
                    <td>
                    <?php
                        if (file_exists(JPATH_BASE."/images/com_adsmanager/categories/".$row->id."cat.jpg"))
                            echo '<a href="'.$link.'"><img class="imgcat" src="'.$this->get('baseurl').'/images/com_adsmanager/categories/'.$row->id.'cat.jpg" alt="'.$row->name.'" /></a>';
                        else
                            echo '<a href="'.$link.'"><img class="imgcat" src="'.$this->get('baseurl').'/components/com_adsmanager/images/default.gif" alt="'.$row->name.'" /></a>';
                      ?>
                     <h2 class="adsmanager_main_cat"><a href="<?php echo $link; ?>"  ><?php echo $row->name." (".$row->num_ads.")"; ?></a></h2>

                    <h3 class="adsmanager_sub_cat">
                    <?php
                }

No, še eno vprašanje v zvezi s CSS-jem imam... Rad bi, da ko uporabnik položi miškin kazalec na sliko, se za njo prikaže box-shadow... Vendar pa to pri temle atributu nikakor ne deluje div.adsmanageradsimage a img a:hover....

div.adsmanager_ads_image {
    border-left: 1px solid #FFFFFF;
    float: left;
    width:30%;
    padding: 5px;
    text-align : center;
}

div.adsmanager_ads_image a{
    display : block;
    margin-top: 10px;   
}

div.adsmanager_ads_image a img{
    border: none;

Takole zgleda koda... Če box-shadow in a:hover vključim v atribut div.adsmanageradsimage se sicer prikaže vendar ne samo okoli slike pač pa to vpliva na celotno celico tabele (ki pa je širša od fotografije)...Kot sem rekel, tole pa ne deluje

div.adsmanager_ads_image a img a:hover{
box-shadow: 5px 5px 5px 5px;
}

Verjetno je kakšen problem v img tagu?

div.adsmanageradsimage a img a:hover{
box-shadow: 5px 5px 5px 5px;
}

kako ti je pa uspelo dat <a> v <img> tag ?

Probaj:

div.adsmanageradsimage a:hover img