Форум PHP программистов > Блочная кнопка

[ Поиск ] - [ Пользователи ] - [ Календарь ]

STOphp

28.03.2014 - 14:18

Здравствуйте уважаемые форумчане!

Как сделать кнопки на div блоке?

Вот что я хочу сделать(Рисунок)

Вообщем как Вконтакте, на верхней навигационной панели, и чтоб при нажатии был эфект зажатия, при наводке чтоб вся область подсвечивалась ...
Вообщем вы поняли, спасибо заранее )

Игорь_Vasinsky

28.03.2014 - 14:27

<html>
 <head>
 <title></title>
 <style type="text/css">
  div.href{
    width:60px;
    text-align: center;
    padding: 10px;
    background-color: #4E6E8A;
    border:1px solid #7092AD;
  }
  div.href:hover{
    background-color: #7092AD;
  }
  a{
    color:white;
    font-family: arial;
    font-size: 12px;
    text-decoration: none;
  }
</style>
 </head>
 <body>
  <div class="href">
  <a href="#">This link</a>
  </div>
 </body>
</html>

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

STOphp

28.03.2014 - 14:29

Игорь_Vasinsky
Спасибо большое

Игорь_Vasinsky

28.03.2014 - 14:30

всё для Вас братья украинцы. всё для Вас.

_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker

STOphp

28.03.2014 - 14:39

Игорь_Vasinsky
А как сделать чтоб они по горизантали повторялись?

Игорь_Vasinsky

28.03.2014 - 14:42

<html>
 <head>
 <title></title>
 <style type="text/css">
  div.href{
    width:60px;
    text-align: center;
    padding: 10px;
    background-color: #4E6E8A;
    border:1px solid #7092AD;
    margin:1px;
    float:left;
  }
  div.href:hover{
    background-color: #7092AD;
  }
  a{
    color:white;
    font-family: arial;
    font-size: 12px;
    text-decoration: none;
  }
</style>
 </head>
 <body>
  <div class="href">
  <a href="#">This link 1</a>
  </div>
  <div class="href">
  <a href="#">This link 2</a>
  </div>
  <div class="href">
  <a href="#">This link 3</a>
  </div>
  <div class="href">
  <a href="#">This link 4</a>
  </div>
  <div class="href">
  <a href="#">This link 5</a>
  </div>        
  </div>
 </body>
</html>

Быстрый ответ:

Здесь расположена полная версия этой страницы.