Блоки css

@Jokerrs · Регистрация: 23.02.2013

Студворк — интернет-сервис помощи студентам

Кликните здесь для просмотра всего текста

krabo.ru/index.php?route=product/category&path=88

Я чайник, поэтому не знаю как правильно это назвать таблицы блоки как их реализовать?

@wLight · 06.06.2014, 20:08

Jokerrs, что ты хочешь то ?)

@Олег126 · 06.06.2014, 20:35

Jokerrs если вы про краб-цену, то это скорее всего лучше сделать div'ами, но там они реализуются с помощью БД и PHP, реализуется просто, делаете несколько div'ов, и пишете стили, как бы странно это не казалось, далее php и БД!

@Jokerrs · 06.06.2014, 20:41 **[ТС]**

wLight, таблицы блоки колонки я не знаю как это называется, поэтому я их просто обвел красным цветом.

@kvant355 · 06.06.2014, 20:44

я бы сделал это тегами:

HTML5
1
2
3
4
5
6
7
<ul>
  <li>тут ваш блок 1</li>
  <li>тут ваш блок 2</li>
  <li>тут ваш блок 3</li>
  <li>тут ваш блок 4</li>
   <!--и т.д.-->
</ul>

@Jokerrs · 06.06.2014, 20:47 **[ТС]**

kvant355, очень понятно особенно при условии когда

Сообщение от Jokerrs

Я чайник

Ладно уж, скажите как это называется правильно?

@kvant355 · 06.06.2014, 21:20

отличный ресурс для чайников
http://htmlbook.ru/html
http://htmlbook.ru/css

@wLight · 06.06.2014, 21:20

Jokerrs,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<div class="content">
<ul>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
</ul>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
a {color: inherit; text-decoration: none;}
.content {
  margin: 0 auto;
  width: 900px;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none; 
}
li {
  display: inline-block;
  float: left;
  text-align: center;
  border: 1px solid;
  margin: 5px;
}
.img {
  background: url(img.png);
  width: 140px;
  height: 140px;
  border: solid 1px;
  margin: 8px;
}
a:hover > .img {
  background: url(img2.png);
}
p {
    padding:10px;
    border: solid 1px;
    margin:0;
}

http://jsbin.com/hodupame/1
дальше стилями

@kvant355 · 06.06.2014, 21:22

а называется:
ul - маркированный список
li - элемент маркированного списка

@Jokerrs · 07.06.2014, 01:12 **[ТС]**

wLight
Появились лишние элементы на странице, особенно это заметно на нижнем этаже, мой косяк скорее всего, кому не сложно отформатируйте код правильно.

Кликните здесь для просмотра всего текста

http://elo-boost.by2.by/index.php/test

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DIV</title>
  <style type="text/css">
   a {color: inherit; text-decoration: none;}
.content {
  margin: 0 auto;
  width: 900px;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none; 
}
li {
  display: inline-block;
  float: left;
  text-align: center;
  border: 1px solid;
  margin: 5px;
}
.img {
  background: url(http://s018.***********/i508/1406/f1/7d6997b40e5b.png);
  width: 140px;
  height: 140px;
  border: solid 1px;
  margin: 8px;
}
a:hover > .img {
  background: url(http://s003.***********/i202/1406/99/3f337a0d234e.png);
}
p {
    padding:10px;
    border: solid 1px;
    margin:0;
}
</style> 
 </head>
 <body>
 
 
 
<div class="content">
<ul>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="img"></div>
      <p>Riot Points</p>
    </a>
  </li>
</ul>
</div>

@kvant355 · 07.06.2014, 01:56

о каких лишних элементах идет речь?

@Jokerrs · 07.06.2014, 13:03 **[ТС]**

kvant355, вы только задаете вопросы, но отдачи от вас никакой, кроме как послать или написать то от чего мне не тепло и не холодно. Ради апа темы
Так же в прошлом посте можно открыть спойлер перейти по ссылке и увидеть тоже самое.
Вот для сравнения как должно все работать

Кликните здесь для просмотра всего текста

http://elo-boost.ru

@wLight · 07.06.2014, 17:30

Jokerrs, действительно, задача элементарная, kvant355 выше уже написал проблему, если уж и так не понятно то htmlbook лучший выход
в вашем случае, например http://htmlbook.ru/css/selector/descendant
если все равно нет:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.content {
  margin: 0 auto;
  width: 900px;
}
.content a {color: inherit; text-decoration: none;}
.content ul {
  margin: 0;
  padding: 0;
  list-style: none; 
}
.content li {
  display: inline-block;
  float: left;
  text-align: center;
  border: 1px solid;
  margin: 5px;
}
.content .img {
  background: url(img.png);
  width: 140px;
  height: 140px;
  border: solid 1px;
  margin: 8px;
}
.content a:hover > .img {
  background: url(img2.png);
}
.content p {
    padding:10px;
    border: solid 1px;
    margin:0;
}

опять же вопрос, чего вы собираетесь добиться с таким знанием (точней незнанием) html css
или собираетесь задать сотню элементарных вопросов и склеить на этом сайт? читайте литературу, к примеру тот же html-book достаточно уделить пару дней и многие глупые вопросы сразу отпадут

@Taatshi · 08.06.2014, 07:56

Jokerrs, одна тема - один вопрос

Оффтоп прекращаем - касается всех

@Jokerrs · 08.06.2014, 13:29 **[ТС]**

гуд

Кликните здесь для просмотра всего текста

http://elo-boost.by2.by/index.php/test

wLight, ты что то писал про стили еще там?

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199

	Блоки css 06.06.2014, 19:33. Показов 1453. Ответов 14 Метки нет (Все метки) Кликните здесь для просмотра всего текста krabo.ru/index.php?route=product/category&path=88 Я чайник, поэтому не знаю как правильно это назвать таблицы блоки как их реализовать? 0

@wLight 38 / 38 / 22 Регистрация: 27.04.2014 Сообщений: 131
	06.06.2014, 20:08
	Jokerrs, что ты хочешь то ?) 0

@Олег126 45 / 45 / 4 Регистрация: 21.03.2013 Сообщений: 262
	06.06.2014, 20:35
	Jokerrs если вы про краб-цену, то это скорее всего лучше сделать div'ами, но там они реализуются с помощью БД и PHP, реализуется просто, делаете несколько div'ов, и пишете стили, как бы странно это не казалось, далее php и БД! 0

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	06.06.2014, 20:41 [ТС]
	wLight, таблицы блоки колонки я не знаю как это называется, поэтому я их просто обвел красным цветом. 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	06.06.2014, 21:20
	отличный ресурс для чайников http://htmlbook.ru/html http://htmlbook.ru/css 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	06.06.2014, 21:22
	а называется: ul - маркированный список li - элемент маркированного списка 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	07.06.2014, 01:56
	о каких лишних элементах идет речь? 0

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	07.06.2014, 13:03 [ТС]
	kvant355, вы только задаете вопросы, но отдачи от вас никакой, кроме как послать или написать то от чего мне не тепло и не холодно. Ради апа темы Так же в прошлом посте можно открыть спойлер перейти по ссылке и увидеть тоже самое. Вот для сравнения как должно все работать Кликните здесь для просмотра всего текста http://elo-boost.ru 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	08.06.2014, 07:56
	Jokerrs, одна тема - один вопрос Оффтоп прекращаем - касается всех 0

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 199
	08.06.2014, 13:29 [ТС]
	гуд Кликните здесь для просмотра всего текста http://elo-boost.by2.by/index.php/test wLight, ты что то писал про стили еще там? 0

Блоки css

Решение