Войти
  1. ВКонтакте
  2. Facebook
  1. » » » Поиск уроков CSS - 2 страница
Новые публикации Скрыть панель справаПоказать панель справа

Поиск уроков CSS

2008-07-09T16:17:26+04:00 2014-12-19T21:13:45+03:00
Ректор
  1. Офлайн
  2. Администраторы
  3. 59 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 16 отправлено 00:42, 23.07.2008
lilipyh, Так это же просто совсем.
Например: Вот у нас есть 2 картинки: 1.png и 2.png размерами 100х30 пикселей. Есть такой код ссылки:
php code:
  1. <div id="link"><a href="#"> </a></div>

Чтобы при наведении картинка сменилась надо поиграть с CSS (именно поиграть, ведь код будет меняться в зависимости от размеров картинки).
Примерно такое пишим:
php code:
  1. #link a {
  2.   display:block;
  3.    background-image:url('1.png');
  4.    height:30px;
  5.    width:100px;
  6. }
  7.  
  8. #link a:hover {
  9.   background-image:url('2.png');
  10. }


Вот, кажется и всё
Абитуриент
  1. Офлайн
  2. Посетители
  3. 7 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 17 отправлено 08:22, 23.07.2008
а можно тоже самое только не png а gif выходит для каждой каждой строки свой идентихикатор?! *все картинки разные.....

Блин попробовал нормально все заработало..вот только касячит что-то в IE 5!!!-а именно: картинка с надписью например клуб такое чувство что дублируется в низ....в параметрах width & higth указывал даже заменьшенные параметры все равно дублируется частично(*окало 1/3 картинки)
Доцент
  1. Офлайн
  2. Администраторы
  3. 89 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 18 отправлено 13:07, 23.07.2008
lilipyh,
Код покажите.
Метод OniX не совсем подходит если на картинке будет текст, а не пробел.
Абитуриент
  1. Офлайн
  2. Посетители
  3. 7 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 19 отправлено 14:37, 23.07.2008
html код:


php code:
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. <!--
  5. browserName = navigator.appName;
  6. browserVer = parseInt(navigator.appVersion);
  7. version = "old";
  8. if (browserName == "Netscape" && browserVer >=3)
  9. version = "new";
  10. if (browserName == "Microsoft Internet Explorer" && browserVer
  11. >=4)
  12. version = "new";
  13. if (version == "new"){
  14. toc1off = new Image(244,22);
  15. toc1off.src = "img/klub.gif";
  16. toc1on = new Image(244,22);
  17. toc1on.src = "img/klub1.gif";
  18. toc2off = new Image(244,22);
  19. toc2off.src = "img/info.gif";
  20. toc2on = new Image(244,22);
  21. toc2on.src = "img/info1.gif";
  22. toc3off = new Image(244,22);
  23. toc3off.src = "img/obuch.gif";
  24. toc3on = new Image(244,22);
  25. toc3on.src = "img/obuch1.gif";
  26. toc4off = new Image(244,22);
  27. toc4off.src = "img/forum.gif";
  28. toc4on = new Image(244,22);
  29. toc4on.src = "img/forum1.gif";
  30. toc5off = new Image(244,22);
  31. toc5off.src = "img/kont.gif";
  32. toc5on = new Image(244,22);
  33. toc5on.src = "img/kont1.gif";
  34. toc6off = new Image(244,22);
  35. toc6off.src = "img/mero.gif";
  36. toc6on = new Image(244,22);
  37. toc6on.src = "img/mero1.gif";
  38. }
  39. function img_act(imgName) {
  40. if (version == "new") {
  41. imgOn = eval(imgName + "on.src");
  42. document [imgName].src = imgOn;
  43. }
  44. }
  45. function img_inact(imgName) {
  46. if (version == "new") {
  47. imgOff = eval(imgName + "off.src");
  48. document [imgName].src = imgOff;
  49. }
  50. }
  51. //-->
  52. </script>
  53. <title>Кадровый Клуб</title>
  54. <link rel="stylesheet" type="text/css" href="style.css" />
  55. </head>
  56. <body>
  57. <div id="all">
  58. <div><img name="header1.jpg" src="img/header1.jpg" higth="150px">  </div><br>
  59.   <div id="templ">br>
  60.     <div id="content">
  61.       <p><font face="Verdana" color="575757" size="4"
  62. align="center"><strong>Кадровый клуб Республики
  63. Коми</strong></font></p><br>
  64. <p><U><strong>Цели и задачи деятельности:</strong></U></p>
  65. <ul>
  66. <p><font face="Verdana"><li>Объединение кадровиков в
  67. профессиональный союз;</li>
  68. <li>Создание условий для формирования сообщества профессионалов
  69. кадровиков Республики Коми;</li>
  70. <li>Содействие в защите профессиональных интересов;</li>
  71. <li>Оказание помощи: организационной, методической,
  72. информационной, образовательной;</li>
  73. <li>Формирование условий для диалога с представителями органов
  74. государственной власти и всеми заинтересованными
  75. лицами.</li></p></ul><p><U><strong>Направления работы
  76. Клуба:</strong></U></p><ul>
  77. <p><li>Организация и проведение тематических мероприятий и
  78. конкурсов;</li>
  79. <li>Поиск и привлечение стратегических партнеров (организаций
  80. специализирующиеся по вопросам управления человеческими
  81. ресурсами, с органами государственной власти);</li>
  82. <li>Сотрудничество с Некоммерческим партнерством
  83. «ВКК-Национальный союз кадровиков» и общественными организациями
  84. специалистов кадровых служб регионов России;</li>
  85. <li>Методическая работа с членами Клуба;</li>
  86. <li>Участие в исследованиях в области кадрового менеджмента и
  87. обнародование их результатов;</li>
  88. </ul><p><U><strong>Условия членства и порядок вступления в
  89. Клуб:</strong></U></p><ul><li>Членство в Клубе может быть
  90. индивидуальным или коллективным. Для вступления необходимо
  91. ознакомиться с Положением о Клубе и подать заявление на
  92. вступление.</li><li>Процесс оформления членства в Клубе
  93. завершается уплатой вступитель-ного взноса и выдачей карты,
  94. содержащей персональные данные члена Клуба, она же является
  95. членским билетом.</li><li>Вступительный взнос для физических лиц
  96. (индивидуальное членство) составляет 1000 рублей. Оплата членских
  97. взносов может осуществляться за полугодие или за год.</li>
  98. </ul></p></font>
  99.     </div>
  100.   </div>
  101.   <div id="navigation">
  102. <table cellpadding="0" border="0" cellspacing="0" width="244">
  103. <tr><td><img src="img/menutop.jpg" width="244 higth="101"
  104. border="0"></td></tr>
  105. <tr><td><div id="link"><a href="#"></a></div></td>
  106. </tr>
  107. <tr><td width="244" higth="12"><div id="link1"><a
  108. href="#"></a></div></td>
  109. </tr>
  110. <tr><td><div id="link2"><a href="#"></a></div></td>
  111. </tr>
  112. <tr><td><a href="index.htm" onMouseover="img_act('toc4')"
  113. onMouseout="img_inact('toc4')"><img src="img/forum.gif"
  114. width="244" higth="22" name="toc4" border="0"></td>
  115. </tr>
  116. <tr><td><a href="index.htm" onMouseover="img_act('toc5')"
  117. onMouseout="img_inact('toc5')"><img src="img/kont.gif"
  118. width="244" higth="22" name="toc5" border="0"></td>
  119. </tr>
  120. <tr><td><a href="index.htm" onMouseover="img_act('toc6')"
  121. onMouseout="img_inact('toc6')"><img src="img/mero.gif"
  122. width="244" higth="22" name="toc6" border="0"></td>
  123. </tr>
  124. <tr><td><img src="img/menuflour.gif" width="244"></td></tr>
  125. </table><br><br><br><br><img src="img/vsklubt.gif">
  126. <a href="#"><img src="img/vsklub1.jpg" border="0"
  127. cellpadding="0"></a>
  128. <img src="img/vsklubf.gif">
  129.   </div>
  130.   <div id="extra">
  131. <img src="img/menu2top.gif">
  132. <p align="center"><b>Новости</b></p>
  133. <p>Дорогие коллеги, поздравляем<br> Вас открытием нашего
  134. сайта.<br> Ждем Ваших... <a href="#"><font сolor="e06a2c">подробно</font></a></p>
  135. <img src="img/menu2flour.gif">
  136.  </div>
  137. <img src="content_bottom.jpg">
  138.  
  139. </div>
  140. </body>
  141. </html>


сss код:

php code:
  1. body {
  2.      font: 80% Arial;
  3.      text-align:center;
  4. }
  5. p {margin:0 10px 10px;}
  6. a {
  7.      padding:5px;
  8.      text-decoration:none;
  9.      color:#0053a1;
  10. }
  11. a:hover {
  12.      text-decoration:underline;
  13.      color:#067a00;
  14. }
  15. div#header {
  16.     background-color:;
  17.      color:#fff;
  18.     height:100%;
  19.      line-height:100%;
  20.      padding-left:;
  21. }
  22. div#all {
  23.     text-align:left;
  24.      width:950px;
  25.      margin:0 auto;
  26. }
  27. div#navigation {
  28.     background:#ffffff;
  29.     float:left;
  30.      width:50px;
  31.      margin-left:-950px;

  32. Последний раз редактировал lilipyh 14:38, 23.07.2008
Абитуриент
  1. Офлайн
  2. Посетители
  3. 7 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 20 отправлено 15:55, 24.07.2008
Разобрался! дела в css а именно в
php code:
  1. a {
  2.      padding:5px;
  3.      text-decoration:none;
  4.      color:#0053a1;

заменил значение 5 на 0 и все нормал стало!

Последний раз редактировал lilipyh 15:56, 24.07.2008
Абитуриент
  1. Офлайн
  2. Посетители
  3. 5 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 21 отправлено 21:11, 24.07.2008
Извините если не там пишу, но я хотел бы узнать, как добиться результата: в предыдущем дизайне(этого сайта) были использованы закругленные уголки бмаги, и я хотел бы узнать как их разместить в разных сторонах. Я пробовал размещать, но при смещении одного уголка смещался и другой, в чем причина не могу понять.
Студент
  1. Офлайн
  2. Модераторы
  3. 19 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 22 отправлено 01:48, 25.07.2008
alucardopx, Стандартный див по моему там. Посмотрите в исходном коде.
Ректор
  1. Офлайн
  2. Администраторы
  3. 59 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 23 отправлено 03:28, 25.07.2008
Закруглённые, или загнутые (css-school 1 или 2)?
Абитуриент
  1. Офлайн
  2. Посетители
  3. 4 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 24 отправлено 01:19, 27.03.2009
ВСЕМ Привет ! ) вопросик такой :) как можно сделать в CSS селекты как на картинке ?
Абитуриент
  1. Офлайн
  2. Посетители
  3. 4 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 25 отправлено 16:57, 02.07.2009
Здравствуйте.
Не могли бы вы подробно объяснить (написать урок) как сделать для IPB форума всплывающую подсказку? Пробовала сама не получилось (( Видела у вас на сайте, по нему и делала.
Мне хочется чтоб это стандартно выскакивало на форуме при наведении.

Готова предоставить доступ на IPB форум для тестирования временно.
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 26 отправлено 22:01, 02.07.2009
White_Lad, это js-библиотека nice forms
Nina, всё зависит от того, какую функциональность будут нести подсказки. И один вопрос - при наведении на что?)
А вообще мой совет - такие вещи проще делать в js, есть хорошая библиотека jQuery


------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Абитуриент
  1. Офлайн
  2. Посетители
  3. 4 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 27 отправлено 12:17, 03.07.2009

Медведь писал:И один вопрос - при наведении на что?)


На все, на пример на аватар, или на туже кнопку цитата или картинки, в общем как тут всплывающая подсказка.
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 28 отправлено 16:03, 03.07.2009
спешу поздравить,на этом сайте они сделаны с помощью js


------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
Абитуриент
  1. Офлайн
  2. Посетители
  3. 5 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 29 отправлено 17:01, 03.07.2009

Медведь писал:спешу поздравить,на этом сайте они сделаны с помощью js


А как реализовать это на js? интересная тема конечно.
Профессор
  1. Офлайн
  2. Посетители
  3. 444 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 30 отправлено 18:47, 03.07.2009
ну что ж, постараюсь объяснить это с помощью моих скромных познаний)
существует библиотека js, подключённая к странице. в ней самой или уже на странице прописывается название класса, к которому будет применена эта библиотека. пример:
php code:
  1. <script type="text/javascript" src="js/podskaski.js"></script>
  2. <script>pod('alt');</script>

поясняю - т.е. во всем элементам с классом "alt" будет применяться функция pod() из файла podskaski.js
Что будет делать эта функция? например выводить в оформленном в css
содержание атрибута alt у элемента с классом "alt".

ЗЫ.содержание js не привожу, потому что у меня нету,а сам могу набросать лишь жалкое подобие)))

Что мы получаем?
Для элемента с подсказкой остаётся только прописать (пример)
сцылко

Последний раз редактировал Медведь 18:56, 03.07.2009

------------------------------------------
Присутствие силы чувствую я.

Задавать вопросы по web-дизайну напрямую мне лучше всего здесь http://vkontakte.ru/club25971247
По вопросам обучения обращаться в icq или skype (номера в профиле)
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011