Блоки 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

<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

<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

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

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

.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, ты что то писал про стили еще там?

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

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

@Jokerrs 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

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

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

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

@Jokerrs 1 / 1 / 2 Регистрация: 23.02.2013 Сообщений: 164
	06.06.2014, 20:47 [ТС]	6
	kvant355, очень понятно особенно при условии когда Сообщение от Jokerrs Я чайник Ладно уж, скажите как это называется правильно? 0

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

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

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

@Taatshi Администратор 11871 / 5176 / 261 Регистрация: 05.04.2011 Сообщений: 13,924 Записей в блоге: 2
	08.06.2014, 07:56	14
	Jokerrs, одна тема - один вопрос Оффтоп прекращаем - касается всех 0

Опции темы

Блоки css

Решение