fentg.com
https://forum.fentg.com:443/

Hover на линкове, HTML и CSS
https://forum.fentg.com:443/viewtopic.php?f=19&t=307
Страница 1 от 1

Автор:  PIPO [ Вто Ное 03, 2009 9:44 pm ]
Заглавие:  Hover на линкове, HTML и CSS

Айде Бат Емо... тествах го под FF 3.5 и под IE 6 => ще бачка и под IE 7 :D

Код:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
   'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
   <head>
      <title>Тест за Бат Емо</title>
      <meta http-equiv='Content-Type' content='text/html; charset="windows-1251"' />
      <style>
         #container {
            width:500px;
            margin:auto;
            
            /*1-во дължина от 500 пиксела,
            която е сбор от дължините на
            .left, .center и .right.
            2-ро margin:auto; за да се
            центрира по хоризонталата.  */
         }
         #container a:hover {
            background-color:red;
            /*
               При линк, чийто родител се явява
               дива с id container - се променя
               bg color-a на червен.
            */
         }
         .left {
            width:100px; /* Дължина 100 пиксела */
            float:left;  /* флоутваме всички елементи вляво, за да са на 1 ред. */
            text-align:left; /* подравняване на текста вляво. */
         }
         .center {
            width:300px; /* Дължина 100 пиксела */
            float:left;      /* флоутваме всички елементи вляво, за да са на 1 ред. */
            text-align:center;  /* подравняване на текста в центъра. */
         }
         .right {
            width:100px; /* Дължина 100 пиксела */
            float:left;  /* флоутваме всички елементи вляво, за да са на 1 ред. */
            text-align:right; /* подравняване на текста вдясно. */
         }
         .lnk{
            float:left; /* Флоутваме класа lnk */
         }
         .clr {clear:both;}
      </style>
      
   </head>
   <body>
      <div id="container">
         <a class="lnk" href="#">
            <div class="left">XXX</div>
            <div class="center">YYY</div>
            <div class="right">ZZZ</div>
         </a>
         <div class="clr"><!-- Tova e div za izchistvane na floata. --></div>
         <br/>
         
         <a class="lnk" href="#">
            <div class="left">AAA</div>
            <div class="center">BBB</div>
            <div class="right">CCC</div>
         </a>
         <div class="clr"><!-- Tova e div za izchistvane na floata. --></div>
         <br/>
         
         <a class="lnk" href="#">
            <div class="left">Георги</div>
            <div class="center">Хапчета против простуда</div>
            <div class="right">15.58 лв.</div>
         </a>
         <div class="clr"><!-- Tova e div za izchistvane na floata. --></div>
      </div>
   </body>
</html>

Автор:  emilang [ Сря Ное 04, 2009 11:22 am ]
Заглавие:  Re: Hover на линкове, HTML и CSS

Ето за това те обичам!

Страница 1 от 1 Часовете са според зоната UTC + 2 часа [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/