Не разобраться с блочным элементом <div>

  • 18 Ответов
  • 454 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

Добрый день уважаемые форумчане.
Среди HTML и CSS я человек новый, буду рад любому совету.
Нужно выложить несколько фото в рамке с текстом, горизонтально в одной плоскости.
Догадываюсь что делается это при помощи тега <div>
Вот мой код:html
<!DOCTYPE html>
 <html lang="ru">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content=".............">
    <meta name="description" content="..........">
     <title>Шкафы-купе на заказ</title>
    <link rel="stylesheet" type="text/css" href="css.css">
  </head>
      <body>
       <div>
          <img class="foto" src="Z:/home/image/На главную шкафы-купе/замер.png" alt="Бесплатный замер" width="120" height="120">        
        <img class="foto" src="Z:/home/image/На главную шкафы-купе/Надежная фурнитура.png" alt="Надежная фурнитура" width="120" height="120">
        <img class="foto" src="Z:/home/image/На главную шкафы-купе/Мебель под заказ.png" alt="Мебель на заказ" width="120" height="120">
        <img class="foto" src="Z:/home/image/На главную шкафы-купе/Бесплатная доставка.png" alt="Бесплатная доставка" width="120" height="120">
       </div>

Вот мой код css:
body {
   font-family: Arial, sans-serif;
   font-size: 19px;
   padding: 20px;
}

.foto{
   border-radius:150px
Хотелось бы сделать как на фото.
И подскажите пожалуйста как выложить ФОТО в форуме?
« Последнее редактирование: 23.10.2016, 20:19:41 от gitaristxx »

*

aa-novik

  • **
  • 14
  • + 0 -
Выложите изображения на любой хостинг картинок и вставьте с помощью кнопки "Вставить изображение".

Рискну предположить, что Вам нужно примерно это: http://htmlbook.ru/faq/kak-dobavit-podpis-pod-fotografiey

Спасибо за отклик, не совсем,  что, вы предлагаете, но все равно спасибо.
т.е как я понимаю каждый скриншот я должен заливать на свой сайт, и уже с сайта заливать сюда?
как описано в правилах форума, отправка сообщения, в дополнительных опциях должна быть вкладка"Вложения", но у меня ее почему то нет.

*

aa-novik

  • **
  • 14
  • + 0 -
как описано в правилах форума, отправка сообщения, в дополнительных опциях должна быть вкладка"Вложения", но у меня ее почему то нет.
У меня тоже.

Не надо ничего к себе заливать, введите в Google "хостинг картинок" и заливайте туда.

*

sergo239

  • ***
  • 43
  • + 0 -
Спасибо за отклик, не совсем,  что, вы предлагаете, но все равно спасибо.
т.е как я понимаю каждый скриншот я должен заливать на свой сайт, и уже с сайта заливать сюда?
как описано в правилах форума, отправка сообщения, в дополнительных опциях должна быть вкладка"Вложения", но у меня ее почему то нет.

Заливаете картинку на https://radikal.ru/, и на форуме между тегами
Код
[img][/img]
вставляете адрес картинки что Вам выдал сайт радикал.


Добрый вечер уважаемые форумчане спасибо за ответ, как выложить фото ^-^ и за поддержку
Теперь подскажите как мне сделать как на фото как полагаю с помощью тега <div>
кому не трудно желательно в коде, т.к. я новичок. 

У специалиста есть курс по верстке. Там все это объясняется. Или float или табличной версткой
http://htmlbook.ru/css/float

Цитировать
табличной версткой
Археологией занимаетесь?
Ставь лайк, если согласен, и делай репост!

  => мои публикации
    => мои работы
      => спектр моих услуг

Специалист | HTML и CSS. Уровень 1-2 (Верстальщик Web) (2015) PCRec
Сергей Дмитриевич Алмазов
Или
Игорь Борисов (Специалист) | HTML и CSS. Уровень 1. Создание сайтов по стандартам W3C на HTML 5 и СSS 3 (2014) PCRec
Манера преподавания интересная у товарища
Или то или то. Не плохой материал. Рекомендую. Сами все сделаете.
« Последнее редактирование: 26.10.2016, 01:52:31 от Sergey1971 »

*

aa-novik

  • **
  • 14
  • + 0 -
Таки замучается разбираться без конкретного примера, если совсем новичок. Многие вещи по поводу центрирования очень неявные.

gitaristxx, давайте я Вам дам пример такой страницы, а Вы разберётесь в том, что делает этот код? ;) htmlbook.ru в помощь.
Код
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>abc</title>
<style>
#content {
width: 900px;
margin: 0 auto;
border: 3px double #999;
}
.kartinochki {
text-align: center;
}
.kartinochki figure {
display: inline-block;
margin: 20px;
padding: 10px;
border: 1px solid #0000ff;
}
.kartinochki figcaption {
width: 128px;
text-align: center;
}
</style>
</head>

<body>
<div id="content">
<div class="kartinochki">
<div>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
</div>
<div>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
</div>
</div>
</div>
</body>

</html>

Археологией занимаетесь?
display: table;
https://htmlacademy.ru/blog/29-display-table-anti-hero
таблицы не умирают!

*

Shustry

  • *****
  • 6426
  • + 733 -
  • Рисую дизайны
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

Flex?
Вопрос не понял. Просто есть табличное представление в CSS. Многие путают с табличным представлением HTML.

*

Shustry

  • *****
  • 6426
  • + 733 -
  • Рисую дизайны
Вопрос не понял. Просто есть табличное представление в CSS. Многие путают с табличным представлением HTML.

Я не против табличного представления в CSS. Просто flex перекрывает эти задачи и более того. У display:table нет практического применения на настоящее время.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

display:table нет практического применения на настоящее время.
Не согласен, но спорить не буду. Тем более что тема не об этом.

Во всяком случае для той задачи которая в данной теме вполне.....
« Последнее редактирование: 26.10.2016, 20:58:10 от Sergey1971 »

Таки замучается разбираться без конкретного примера, если совсем новичок. Многие вещи по поводу центрирования очень неявные.

gitaristxx, давайте я Вам дам пример такой страницы, а Вы разберётесь в том, что делает этот код? ;) htmlbook.ru в помощь.
Код
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>abc</title>
<style>
#content {
width: 900px;
margin: 0 auto;
border: 3px double #999;
}
.kartinochki {
text-align: center;
}
.kartinochki figure {
display: inline-block;
margin: 20px;
padding: 10px;
border: 1px solid #0000ff;
}
.kartinochki figcaption {
width: 128px;
text-align: center;
}
</style>
</head>

<body>
<div id="content">
<div class="kartinochki">
<div>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
</div>
<div>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
<figure>
<img src="http://iconizer.net/files/Vista_Style_Base_Software/thumb/128/Circle_Orange.png">
<figcaption>Это подпись к изображению</figcaption>
</figure>
</div>
</div>
</div>
</body>

</html>

спасибо за код, то что надо.
Хороший форум, здесь люди помогают друг другу.

Уважаемые форумчане, у меня вопрос.
Сколько займет времени в среднем изучения HTML, CSS, php, java script, чтобы верстать сайты.

*

vipiusss

  • ********
  • 5470
  • + 318 -
  • JoomlaNet
около 2 лет.зависит от уровня результата. 2 года для устойчивой практики азов.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями