Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
1 / 1 / 2
Регистрация: 23.02.2013
Сообщений: 164
1

Блоки css

06.06.2014, 19:33. Просмотров 1157. Ответов 14
Метки нет (Все метки)


Кликните здесь для просмотра всего текста
krabo.ru/index.php?route=product/category&path=88

Я чайник, поэтому не знаю как правильно это назвать таблицы блоки как их реализовать?
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.06.2014, 19:33
Ответы с готовыми решениями:

CSS Задание CSS блоки
Создайте страницу

блоки CSS
Делаю блоки CSS. Что я заметил. Во первых: при уменьшении окна браузера блоки могут немного...

блоки в css
Здравствйте ребята. Подскажите пожалуйста, какую команду прописать, чтобы блоки при перемещние не...

Блоки в CSS
Доброго времени суток! Помогите плиз с DIVфами... Существует резиновый сайт. Мне нужно в...

14
38 / 38 / 22
Регистрация: 27.04.2014
Сообщений: 131
06.06.2014, 20:08 2
Jokerrs, что ты хочешь то ?)
0
45 / 45 / 4
Регистрация: 21.03.2013
Сообщений: 259
06.06.2014, 20:35 3
Jokerrs если вы про краб-цену, то это скорее всего лучше сделать div'ами, но там они реализуются с помощью БД и PHP, реализуется просто, делаете несколько div'ов, и пишете стили, как бы странно это не казалось, далее php и БД!
0
1 / 1 / 2
Регистрация: 23.02.2013
Сообщений: 164
06.06.2014, 20:41  [ТС] 4
wLight, таблицы блоки колонки я не знаю как это называется, поэтому я их просто обвел красным цветом.
0
43 / 43 / 25
Регистрация: 21.07.2013
Сообщений: 349
06.06.2014, 20:44 5
я бы сделал это тегами:
HTML5
1
2
3
4
5
6
7
<ul>
  <li>тут ваш блок 1</li>
  <li>тут ваш блок 2</li>
  <li>тут ваш блок 3</li>
  <li>тут ваш блок 4</li>
   <!--и т.д.-->
</ul>
0
1 / 1 / 2
Регистрация: 23.02.2013
Сообщений: 164
06.06.2014, 20:47  [ТС] 6
kvant355, очень понятно особенно при условии когда
Цитата Сообщение от Jokerrs Посмотреть сообщение
Я чайник
Ладно уж, скажите как это называется правильно?
0
43 / 43 / 25
Регистрация: 21.07.2013
Сообщений: 349
06.06.2014, 21:20 7
отличный ресурс для чайников
http://htmlbook.ru/html
http://htmlbook.ru/css
0
38 / 38 / 22
Регистрация: 27.04.2014
Сообщений: 131
06.06.2014, 21:20 8
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
дальше стилями
1
43 / 43 / 25
Регистрация: 21.07.2013
Сообщений: 349
06.06.2014, 21:22 9
а называется:
ul - маркированный список
li - элемент маркированного списка
0
1 / 1 / 2
Регистрация: 23.02.2013
Сообщений: 164
07.06.2014, 01:12  [ТС] 10
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>
0
43 / 43 / 25
Регистрация: 21.07.2013
Сообщений: 349
07.06.2014, 01:56 11
о каких лишних элементах идет речь?
0
1 / 1 / 2
Регистрация: 23.02.2013
Сообщений: 164
07.06.2014, 13:03  [ТС] 12
kvant355, вы только задаете вопросы, но отдачи от вас никакой, кроме как послать или написать то от чего мне не тепло и не холодно. Ради апа темы
Так же в прошлом посте можно открыть спойлер перейти по ссылке и увидеть тоже самое.
Вот для сравнения как должно все работать
Кликните здесь для просмотра всего текста
http://elo-boost.ru
0
38 / 38 / 22
Регистрация: 27.04.2014
Сообщений: 131
07.06.2014, 17:30 13
Лучший ответ Сообщение было отмечено Jokerrs как решение

Решение

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 достаточно уделить пару дней и многие глупые вопросы сразу отпадут
1
Администратор
11871 / 5176 / 261
Регистрация: 05.04.2011
Сообщений: 13,924
Записей в блоге: 2
08.06.2014, 07:56 14
Jokerrs, одна тема - один вопрос

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

wLight, ты что то писал про стили еще там?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.06.2014, 13:29

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Блоки CSS
Есть код, который делает три блока как на 1 скрине, при добавлении текста в левый блок(1) , 2 и 3...

Блоки в css
два блока текста с разным цветом и единым фоном

Div Блоки CSS
Вот песочница. Можно блок css использовать многократно? допустим у нас есть блок: #blockshop {...

Блоки в css html
подскажите как сделать 3 блока подряд &lt;div id=&quot;vse&quot;&gt; &lt;div id=&quot;vse1&quot;&gt;&lt;/div&gt; &lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.