Форум русской поддержки Joomla!® CMS
06.12.2016, 10:01:13 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 259 раз)
0 Пользователей и 1 Гость смотрят эту тему.
gitaristxx
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 19


« : 23.10.2016, 18:51:21 »

Добрый день уважаемые форумчане.
Среди 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, 19:19:41 от gitaristxx » Записан
aa-novik
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #1 : 24.10.2016, 22:07:52 »

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

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

Репутация: +0/-0
Offline Offline

Сообщений: 19


« Ответ #2 : 25.10.2016, 01:33:52 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #3 : 25.10.2016, 11:03:32 »

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

Не надо ничего к себе заливать, введите в Google "хостинг картинок" и заливайте туда.
Записан
sergo239
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 57


« Ответ #4 : 25.10.2016, 11:25:17 »

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

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

Репутация: +0/-0
Offline Offline

Сообщений: 19


« Ответ #5 : 25.10.2016, 22:34:35 »

Записан
gitaristxx
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 19


« Ответ #6 : 25.10.2016, 22:42:12 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 49


« Ответ #7 : 25.10.2016, 23:25:00 »

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

Репутация: +120/-3
Offline Offline

Пол: Мужской
Сообщений: 1451


« Ответ #8 : 25.10.2016, 23:26:08 »

Цитировать
табличной версткой
Археологией занимаетесь?
Записан
Sergey1971
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 49


« Ответ #9 : 25.10.2016, 23:39:54 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #10 : 25.10.2016, 23:43:31 »

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

gitaristxx, давайте я Вам дам пример такой страницы, а Вы разберётесь в том, что делает этот код? Wink 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>
Записан
Sergey1971
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 49


« Ответ #11 : 26.10.2016, 03:11:17 »

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #12 : 26.10.2016, 13:03:56 »

display: table;
https://htmlacademy.ru/blog/29-display-table-anti-hero
таблицы не умирают!

Flex?
Записан
Sergey1971
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 49


« Ответ #13 : 26.10.2016, 18:50:41 »

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

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #14 : 26.10.2016, 19:01:48 »

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

Я не против табличного представления в CSS. Просто flex перекрывает эти задачи и более того. У display:table нет практического применения на настоящее время.
Записан
Sergey1971
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 49


« Ответ #15 : 26.10.2016, 19:35:41 »

display:table нет практического применения на настоящее время.
Не согласен, но спорить не буду. Тем более что тема не об этом.
https://www.youtube.com/watch?v=yZfhqw754Xc
Во всяком случае для той задачи которая в данной теме вполне.....
« Последнее редактирование: 26.10.2016, 19:58:10 от Sergey1971 » Записан
gitaristxx
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 19


« Ответ #16 : 26.10.2016, 20:37:05 »

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

gitaristxx, давайте я Вам дам пример такой страницы, а Вы разберётесь в том, что делает этот код? Wink 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>

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

Репутация: +0/-0
Offline Offline

Сообщений: 19


« Ответ #17 : 26.10.2016, 20:44:09 »

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

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #18 : 26.10.2016, 21:01:47 »

около 2 лет.зависит от уровня результата. 2 года для устойчивой практики азов.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet