Studio AD : Как мне сделать так?

Дата: Среда, 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

Карма: 68

MEDION, те нужно просто этот блок сделать? или он как-то анимирован?

Большие фотостатусы

Дата: Среда, 20.01.2010, 16:34 | Сообщение # 3

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

Slimmi, он не анимирован, мне просто блок надо сделать, объяснить как сделать то что внутри него и как сделать так чтобы блок сворачивался/разворачивался..

Дата: Среда, 20.01.2010, 16:54 | Сообщение # 4

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

хочу сделать блок как на сайте kiwi.kz

UnderShot

Дата: Среда, 20.01.2010, 20:03 | Сообщение # 5

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Очень важная тема!
Filmzona — онлайн фильмы.

MEDION, CTRL+U = у тебя все получится

neio

Дата: Среда, 20.01.2010, 20:10 | Сообщение # 6

говорун

Группа: Проверенные

Пользователь №: 128

Сообщений: 195

Получено оценок: 26

Карма: 44

UnderShot, ctrl+c и ctrl+v тоже необходимо lol

Дата: Среда, 20.01.2010, 20:16 | Сообщение # 7

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

UnderShot, я смотрел исходный код, скопировал, но ничего не получается(

UnderShot

Дата: Четверг, 21.01.2010, 05:48 | Сообщение # 8

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Очень важная тема!
Filmzona — онлайн фильмы.

MEDION, что тебя именно интересует? Сверстать блок? Или скрипт сворачивания блока?

SinuS

Дата: Четверг, 21.01.2010, 12:52 | Сообщение # 9

говорун

Группа: Модераторы

Пользователь №: 179

Сообщений: 195

Получено оценок: 15

Карма: 20

UnderShot, наверное, он скрипт не скопипастил.
P.S. Вообще нужно поговорить с Алеко по поводу рипов, чтобы запретить их. По сути нас просят рипнуть эту менюху.

Talk is cheap.

Дата: Четверг, 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

Карма: 152

Очень важная тема!
Filmzona — онлайн фильмы.

Скрыть блок можно с помощью JQ:
html

Code

<div id='block'><a href='#' class='hide'>Скрыть блок</a></div>

jQuery

Code

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

Дата: Четверг, 21.01.2010, 19:22 | Сообщение # 12

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

мне нужно такой блок не дивами, а таблицей сделать

MadeMan

Дата: Четверг, 21.01.2010, 20:55 | Сообщение # 13

говорун

Группа: Проверенные

Пользователь №: 25

Сообщений: 185

Получено оценок: 6

Карма: 19

Замечания: 20%

MEDION, Ну, и в чем проблема?

Code

<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class='hide'><a href='#'>Скрыть блок</a></td>
</tr>
</table>

Дата: Четверг, 21.01.2010, 22:01 | Сообщение # 14

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

MadeMan, мне нужно сделать блок как на сайте kiwi.kz, но тока чтобы он был не дивами, а таблицей...

SinuS

Дата: Четверг, 21.01.2010, 22:48 | Сообщение # 15

говорун

Группа: Модераторы

Пользователь №: 179

Сообщений: 195

Получено оценок: 15

Карма: 20

Quote (BeSinLi)

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

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

Talk is cheap.

Дата: Пятница, 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

Карма: 193

Quote (BeSinLi)

...добавлять по вкусу.

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

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

Бесплатные обои.

Дата: Пятница, 22.01.2010, 01:40 | Сообщение # 18

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Quote (Aleko)

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

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

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

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

Дата: Пятница, 22.01.2010, 12:13 | Сообщение # 19

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

BeSinLi, я же написал, что блок нужен не дивами, а таблицей..

Дата: Пятница, 22.01.2010, 20:02 | Сообщение # 20

говорун

Группа: Проверенные

Пользователь №: 192

Сообщений: 141

Получено оценок: 17

Карма: -993

MEDION, а здесь вам что не таблица? И все таки если вы еще не отличаете дивы от таблицы

изучать мат.часть.

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

Дата: Пятница, 22.01.2010, 20:16 | Сообщение # 21

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

По моему это тролль и ему нужен бан.

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

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

Дата: Пятница, 22.01.2010, 20:51 | Сообщение # 22

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

Nigelist, этот блок свёрстан таблицей, но он не похож на блок как на kiw.kz, сам попытался сделать, но к сожелению не смог

BeSinLi, я не троль)

Дата: Пятница, 22.01.2010, 21:47 | Сообщение # 23

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

MEDION, зачем именно таблицами?

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

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

Дата: Пятница, 22.01.2010, 22:46 | Сообщение # 24

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

Quote (BeSinLi)

MEDION, зачем именно таблицами?

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

Дата: Суббота, 23.01.2010, 00:27 | Сообщение # 25

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Quote (MEDION)

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

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

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

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

Дата: Суббота, 23.01.2010, 07:55 | Сообщение # 26

говорун

Группа: Проверенные

Пользователь №: 192

Сообщений: 141

Получено оценок: 17

Карма: -993

MEDION, вам разве кто то обещал что будет делать вам блок похожий на блоки kiwi.kz? Вам дали направление куда рыть, вам только и осталось найти скрипт для плавного сворачивания блоков, и нарисовать пару треугольников. Остальное оформляется через CSS...

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

Дата: Суббота, 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!“

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

Дата: Суббота, 23.01.2010, 13:03 | Сообщение # 28

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

Quote (BeSinLi)

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

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

neio

Дата: Суббота, 23.01.2010, 13:06 | Сообщение # 29

говорун

Группа: Проверенные

Пользователь №: 128

Сообщений: 195

Получено оценок: 26

Карма: 44

http://studioad.ru/blog/css_haki_css_hacks_css_filters/2009-09-30-92 не судьба?

Дата: Суббота, 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

Карма: 44

MEDION, пиши помогу чем смогу ^_^

Дата: Вторник, 26.01.2010, 14:05 | Сообщение # 32

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

neio, ты в асе когда бываешь?

Дата: Вторник, 26.01.2010, 19:02 | Сообщение # 33

говорун

Группа: Проверенные

Пользователь №: 192

Сообщений: 141

Получено оценок: 17

Карма: -993

MEDION, ты лучше выкладывай что сделал. А мы всем миром поможем... ^_^

Токо не надо копировать блоки с первой страницы... <_<

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

Дата: Среда, 27.01.2010, 14:08 | Сообщение # 34

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

http://filmz.my1.ru/ - на этом сайте я дизайн прописал таблицей

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

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

Сообщение отредактировал MEDION - Среда, 27.01.2010, 14:08

Дата: Четверг, 28.01.2010, 04:40 | Сообщение # 35

говорун

Группа: Проверенные

Пользователь №: 192

Сообщений: 141

Получено оценок: 17

Карма: -993

MEDION, во первых, чтобы значок сворачивания/разворачивания был справа используйте вложенный див в заголовке или две ячейки в таблице, а в нижних ячейках тогда параметр colspan. Во-вторых для для элементов списка используйте свойства CSS:

Code

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

Сообщение отредактировал Nigelist - Четверг, 28.01.2010, 11:55

Дата: Четверг, 28.01.2010, 13:53 | Сообщение # 36

молчун

Группа: Проверенные

Пользователь №: 81

Сообщений: 36

Nigelist, а мог бы ты мне помочь, дизайн дивами прописать?

Дата: Четверг, 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>

</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!“

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

Дата: Четверг, 28.01.2010, 15:00 | Сообщение # 38

говорун

Группа: Проверенные

Пользователь №: 192

Сообщений: 141

Получено оценок: 17

Карма: -993