• Страница 1 из 1
  • 1
Как мне сделать так?
MEDION
Дата: Среда, 20.01.2010, 15:12 | Сообщение # 1
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
Как мне создать такой блок?

http://s005.radikal.ru/i212/1001/16/ee67c628197d.jpg

  
Slimmi
Дата: Среда, 20.01.2010, 16:15 | Сообщение # 2
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38
MEDION, те нужно просто этот блок сделать? или он как-то анимирован?

Большие фотостатусы
  
MEDION
Дата: Среда, 20.01.2010, 16:34 | Сообщение # 3
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
Slimmi, он не анимирован, мне просто блок надо сделать, объяснить как сделать то что внутри него и как сделать так чтобы блок сворачивался/разворачивался..
  
MEDION
Дата: Среда, 20.01.2010, 16:54 | Сообщение # 4
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
хочу сделать блок как на сайте kiwi.kz
  
UnderShot
Дата: Среда, 20.01.2010, 20:03 | Сообщение # 5
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
MEDION, CTRL+U = у тебя все получится

Очень важная тема!
Filmzona — онлайн фильмы.
  
neio
Дата: Среда, 20.01.2010, 20:10 | Сообщение # 6
говорун
Группа: Проверенные
Пользователь №: 128
Сообщений: 195
Получено оценок: 26
UnderShot, ctrl+c и ctrl+v тоже необходимо lol
  
MEDION
Дата: Среда, 20.01.2010, 20:16 | Сообщение # 7
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
UnderShot, я смотрел исходный код, скопировал, но ничего не получается(
  
UnderShot
Дата: Четверг, 21.01.2010, 05:48 | Сообщение # 8
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
MEDION, что тебя именно интересует? Сверстать блок? Или скрипт сворачивания блока?

Очень важная тема!
Filmzona — онлайн фильмы.
  
SinuS
Дата: Четверг, 21.01.2010, 12:52 | Сообщение # 9
говорун
Группа: Модераторы
Пользователь №: 179
Сообщений: 195
Получено оценок: 15
UnderShot, наверное, он скрипт не скопипастил.
P.S. Вообще нужно поговорить с Алеко по поводу рипов, чтобы запретить их. По сути нас просят рипнуть эту менюху.


Talk is cheap.
  
BeSinLi
Дата: Четверг, 21.01.2010, 13:33 | Сообщение # 10
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (SinuS)
P.S. Вообще нужно поговорить с Алеко по поводу рипов, чтобы запретить их. По сути нас просят рипнуть эту менюху.

Полный ПиздеЦ. Зачем рипать? Зачем?!! Тут сразу видно что из себя представляет русский Web-дев. Рип, рип, рип и сразу R.I.P. Никто даже не упомянул что такое меню можно сделать самому. Что скрипт валяется на каждом углу интернета. В общем тут говорить нечего.

Прошу прощения за грубость...

Quote (MEDION)
Как мне создать такой блок?

Головой с помощью рук. Для начала нужно выучить HTML, CSS и JS. Или хотя бы немного в них разбираться и знать адрес google'a.

Что бы что либо выучить нужно учится, учится можно с помощью книг, статей. За книгами идем либо в книжный магазин либо в интернет. Как и что думаю объяснять не нужно.

Дам подсказку. Делается такой блок с из списка или дивов, как на kiwi.kz.


——————————--Tempora mutantur, et nos mutamur in illis
———————————————Si felix esse vis, este!

———————————————————————————————————————————————————————старая аватарка

  
UnderShot
Дата: Четверг, 21.01.2010, 15:11 | Сообщение # 11
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
Скрыть блок можно с помощью JQ:
html
Code
<div id='block'><a href='#' class='hide'>Скрыть блок</a></div>

jQuery
Code
$('a.hide').click(function(){$('#block').hide('slow');});


Очень важная тема!
Filmzona — онлайн фильмы.
  
MEDION
Дата: Четверг, 21.01.2010, 19:22 | Сообщение # 12
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
мне нужно такой блок не дивами, а таблицей сделать :(
  
MadeMan
Дата: Четверг, 21.01.2010, 20:55 | Сообщение # 13
говорун
Группа: Проверенные
Пользователь №: 25
Сообщений: 185
Получено оценок: 6
MEDION, Ну, и в чем проблема?

Code
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class='hide'><a href='#'>Скрыть блок</a></td>
</tr>
</table>
  
MEDION
Дата: Четверг, 21.01.2010, 22:01 | Сообщение # 14
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
MadeMan, мне нужно сделать блок как на сайте kiwi.kz, но тока чтобы он был не дивами, а таблицей...
  
SinuS
Дата: Четверг, 21.01.2010, 22:48 | Сообщение # 15
говорун
Группа: Модераторы
Пользователь №: 179
Сообщений: 195
Получено оценок: 15
Quote (BeSinLi)
Дам подсказку. Делается такой блок из списка или дивов, как на kiwi.kz.

Это для кого человек писал?


Talk is cheap.
  
BeSinLi
Дата: Пятница, 22.01.2010, 00:15 | Сообщение # 16
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (SinuS)
Это для кого человек писал?

Вы о чем? Поконкретнее.

MEDION, вот списком, так лучше как мне кажется. Хотя я не знаю зачем таблицами... Вот пример кода — w3fornoobs.my1.ru/examples/block

И сам код:

Code
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Как мне создать такой блок?</title>
<style>
.block { margin: 84px auto; width: 400px; }
#h {text-align: center; padding: 5px 0 20px 0; font-size: 14px; }
#list, .item { list-style-type: none; padding: 0; margin: 0; }
.item { padding: 8px 20px 7px 20px; }
.block ul li span { float: right; margin-left: 14px; }
.option1, .option1 a { font: 10px; }
.option2 { font: 10px; }
</style>
</head>

<body>

     <div class="block">
       <div id="h">Lorem ipsum dolor sit amet</div>
         <ul id="list">
             <li class="item"> sollicitudin <span class="option1">ridiculus </span> <span class="option2">+444</span></li>
             <li class="item"> laoreet <span class="option1">ridiculus </span> <span class="option2">+444</span></li>
             <li class="item">malesuada   <span class="option1">Donec </span> <span class="option2">+444</span></li>
             <li class="item">Suspendisse <span class="option1">Donec </span> <span class="option2">+444</span></li>
             <li class="item">laoreet <span class="option1">ridiculus </span> <span class="option2">+444</span></li>
             <li class="item">dapibus  <span class="option1">vehicula</span> <span class="option2">+444</span></li>
             <li class="item">Suspendisse   <span class="option1">Nullam </span> <span class="option2"> +444</span></li>
             <li class="item">laoreet <span class="option1">Donec </span> <span class="option2">+444</span></li>
             <li class="item">ltreet <span class="option1">purus</span> <span class="option2">+444</span></li>
             <li class="item">Suspendisse <span class="option1">vehicula</span> <span class="option2">+444.</span></li>
             <li class="item">malesuada  <span class="option1">Nullam </span> <span class="option2">+444</span></li>
             <li class="item">dapibus<span class="option1">purus</span> <span class="option2">+444</span></li>
             <li class="item">hendrerit<span class="option1">vehicula</span> <span class="option2">+444</span></li>
         </ul>
     </div>
          
</body>

</html>

Цвета, шрифты, ширину добавлять по вкусу.


——————————--Tempora mutantur, et nos mutamur in illis
———————————————Si felix esse vis, este!

———————————————————————————————————————————————————————старая аватарка

  
Aleko
Дата: Пятница, 22.01.2010, 01:35 | Сообщение # 17
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Quote (BeSinLi)
...добавлять по вкусу.

Перемешать но не взбалтывать..

Простите, не удержался. ^_^


Бесплатные обои.
  
BeSinLi
Дата: Пятница, 22.01.2010, 01:40 | Сообщение # 18
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (Aleko)
Перемешать но не взбалтывать..

Точку забыл. Третью.


——————————--Tempora mutantur, et nos mutamur in illis
———————————————Si felix esse vis, este!

———————————————————————————————————————————————————————старая аватарка

  
MEDION
Дата: Пятница, 22.01.2010, 12:13 | Сообщение # 19
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
BeSinLi, я же написал, что блок нужен не дивами, а таблицей..
  
Nigelist
Дата: Пятница, 22.01.2010, 20:02 | Сообщение # 20
говорун
Группа: Проверенные
Пользователь №: 192
Сообщений: 141
Получено оценок: 17
MEDION, а здесь вам что не таблица? И все таки если вы еще не отличаете дивы от таблицы :v изучать мат.часть.

Бороться и искать, найти и перепрятать...
  
BeSinLi
Дата: Пятница, 22.01.2010, 20:16 | Сообщение # 21
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
По моему это тролль и ему нужен бан.

——————————--Tempora mutantur, et nos mutamur in illis
———————————————Si felix esse vis, este!

———————————————————————————————————————————————————————старая аватарка

  
MEDION
Дата: Пятница, 22.01.2010, 20:51 | Сообщение # 22
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
Nigelist, этот блок свёрстан таблицей, но он не похож на блок как на kiw.kz, сам попытался сделать, но к сожелению не смог :(

BeSinLi, я не троль)

  
BeSinLi
Дата: Пятница, 22.01.2010, 21:47 | Сообщение # 23
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
MEDION, зачем именно таблицами?

——————————--Tempora mutantur, et nos mutamur in illis
———————————————Si felix esse vis, este!

———————————————————————————————————————————————————————старая аватарка

  
MEDION
Дата: Пятница, 22.01.2010, 22:46 | Сообщение # 24
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
Quote (BeSinLi)
MEDION, зачем именно таблицами?

я прописал блок дивами, но в ИЕ дизайн скривился..вот из-за этого надо прописать таблицей ;)

  
BeSinLi
Дата: Суббота, 23.01.2010, 00:27 | Сообщение # 25
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (MEDION)
я прописал блок дивами, но в ИЕ дизайн скривился..вот из-за этого надо прописать таблицей

Можно элементарно поправить блок через CSS хак.


——————————--Tempora mutantur, et nos mutamur in illis
———————————————Si felix esse vis, este!

———————————————————————————————————————————————————————старая аватарка

  
Nigelist
Дата: Суббота, 23.01.2010, 07:55 | Сообщение # 26
говорун
Группа: Проверенные
Пользователь №: 192
Сообщений: 141
Получено оценок: 17
MEDION, вам разве кто то обещал что будет делать вам блок похожий на блоки kiwi.kz? Вам дали направление куда рыть, вам только и осталось найти скрипт для плавного сворачивания блоков, и нарисовать пару треугольников. Остальное оформляется через CSS...

Бороться и искать, найти и перепрятать...
  
BeSinLi
Дата: Суббота, 23.01.2010, 09:25 | Сообщение # 27
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (Nigelist)
и нарисовать пару треугольников.

Их тоже можно через CSS. Или использовать стрелки — ↓ и ↑.

MEDION, забыл сказать что мой вариант работает везде.


——————————--Tempora mutantur, et nos mutamur in illis
———————————————Si felix esse vis, este!

———————————————————————————————————————————————————————старая аватарка

  
MEDION
Дата: Суббота, 23.01.2010, 13:03 | Сообщение # 28
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
Quote (BeSinLi)
Можно элементарно поправить блок через CSS хак.

я не знаю как это можно сделать, вот и решил прописать таблицей..

  
neio
Дата: Суббота, 23.01.2010, 13:06 | Сообщение # 29
говорун
Группа: Проверенные
Пользователь №: 128
Сообщений: 195
Получено оценок: 26
http://studioad.ru/blog/css_haki_css_hacks_css_filters/2009-09-30-92 не судьба? ;)
  
MEDION
Дата: Суббота, 23.01.2010, 14:48 | Сообщение # 30
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
Quote (neio)
http://studioad.ru/blog/css_haki_css_hacks_css_filters/2009-09-30-92 не судьба? ;)

читал, но не разобрался:(

  
neio
Дата: Суббота, 23.01.2010, 16:38 | Сообщение # 31
говорун
Группа: Проверенные
Пользователь №: 128
Сообщений: 195
Получено оценок: 26
MEDION, пиши помогу чем смогу ^_^
  
MEDION
Дата: Вторник, 26.01.2010, 14:05 | Сообщение # 32
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
neio, ты в асе когда бываешь?
  
Nigelist
Дата: Вторник, 26.01.2010, 19:02 | Сообщение # 33
говорун
Группа: Проверенные
Пользователь №: 192
Сообщений: 141
Получено оценок: 17
MEDION, ты лучше выкладывай что сделал. А мы всем миром поможем... ^_^ Токо не надо копировать блоки с первой страницы... <_<

Бороться и искать, найти и перепрятать...
  
MEDION
Дата: Среда, 27.01.2010, 14:08 | Сообщение # 34
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
http://filmz.my1.ru/ - на этом сайте я дизайн прописал таблицей

http://varis.ucoz.ru/ - тут использовал дивы, взятые у Алеко

подскажите как мне сделать так, чтобы дизайн с дивами был как дизайн с таблицей, у меня не получилось :(

Сообщение отредактировал MEDION - Среда, 27.01.2010, 14:08
  
Nigelist
Дата: Четверг, 28.01.2010, 04:40 | Сообщение # 35
говорун
Группа: Проверенные
Пользователь №: 192
Сообщений: 141
Получено оценок: 17
MEDION, во первых, чтобы значок сворачивания/разворачивания был справа используйте вложенный див в заголовке или две ячейки в таблице, а в нижних ячейках тогда параметр colspan. Во-вторых для для элементов списка используйте свойства CSS:
Code
<style>
селектор {display:block; padding:4px 2px; border-top:#CCC 1px solid; border-bottom:#CCC 1px solid}
</style>


Бороться и искать, найти и перепрятать...

Сообщение отредактировал Nigelist - Четверг, 28.01.2010, 11:55
  
MEDION
Дата: Четверг, 28.01.2010, 13:53 | Сообщение # 36
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
Nigelist, а мог бы ты мне помочь, дизайн дивами прописать?
  
BeSinLi
Дата: Четверг, 28.01.2010, 14:30 | Сообщение # 37
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
MEDION
Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Персональный сайт - Главная страница</title>
<style type="text/css">  
body  {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
  background: #666666;
  margin: 0;  
  padding: 0;
  text-align: center;
  color: #000000;
}

.twoColElsRtHdr #container {  
  width: auto;  
  background: #FFFFFF;
  margin: 0 40px;
  border: 1px solid #000000;
  text-align: left;  
}  
.twoColElsRtHdr #header {  
  background: #DDDDDD;  
  padding: 0 10px;  
}  
.twoColElsRtHdr #header h1 {
  margin: 0;  
  padding: 10px 0;
}

.twoColElsRtHdr #sidebar1 {
  float: right;  
  width: 12em;  
  background: #EBEBEB;
  padding: 15px 0;
}
.twoColElsRtHdr #sidebar1 h3, .twoColElsRtHdr #sidebar1 p {
  margin-left: 10px;
  margin-right: 10px;
}

.twoColElsRtHdr #mainContent {
    margin: 0 13em 0 10px;
}  
.twoColElsRtHdr #footer {  
  padding: 0 10px;  
  background:#DDDDDD;
}  
.twoColElsRtHdr #footer p {
  margin: 0;
  padding: 10px 0;
}

.fltrt {
  float: right;
  margin-left: 8px;
}
.fltlft {
  float: left;
  margin-right: 8px;
}
.clearfloat {
  clear:both;
     height:0;
     font-size: 1px;
     line-height: 0px;
}
</style>
<!--[if IE]>
<style type="text/css">  
.twoColElsRtHdr #sidebar1 { padding-top: 30px; }
.twoColElsRtHdr #mainContent { zoom: 1; padding-top: 15px; }
</style>
<![endif]-->
</head>

<body class="twoColElsRtHdr">

<div id="container">
   <div id="header">
   </div>
   <div id="sidebar1">
   </div>
   <div id="mainContent">
   </div>
  <br class="clearfloat" />
   <div id="footer">
   </div>
</div>
</body>

</html>

Ага. Код не мой а с дрима.


——————————--Tempora mutantur, et nos mutamur in illis
———————————————Si felix esse vis, este!

———————————————————————————————————————————————————————старая аватарка

  
Nigelist
Дата: Четверг, 28.01.2010, 15:00 | Сообщение # 38
говорун
Группа: Проверенные
Пользователь №: 192
Сообщений: 141
Получено оценок: 17
BeSinLi, просвети по поводу этого момента. Для чего оно нужно? И где можно найти инфу какие параметры нужны для HTML 4.1?
Quote (BeSinLi)
<html xmlns="http://www.w3.org/1999/xhtml">

__________________________________
Все разобрался, для HTML 4.1 это не нужно...


Бороться и искать, найти и перепрятать...

Сообщение отредактировал Nigelist - Пятница, 29.01.2010, 06:18
  
MEDION
Дата: Четверг, 28.01.2010, 22:26 | Сообщение # 39
молчун
Группа: Проверенные
Пользователь №: 81
Сообщений: 36
BeSinLi, разве этот код не похож на код Алеко?
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.