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

gitaristxx

  • Осваиваюсь на форуме
  • 30
  • 0 / 0
Добрый день уважаемые форумчане.
Среди 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, 18:19:41 от gitaristxx »
*

aa-novik

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

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

gitaristxx

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

aa-novik

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

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

sergo239

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

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

gitaristxx

  • Осваиваюсь на форуме
  • 30
  • 0 / 0
*

gitaristxx

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

Sergey1971

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

Филипп Сорокин

  • Завсегдатай
  • 1918
  • 160 / 4
  • разработчик.москва
Цитировать
табличной версткой
Археологией занимаетесь?
*

Sergey1971

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

aa-novik

  • Осваиваюсь на форуме
  • 14
  • 0 / 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>
*

Sergey1971

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

Shustry

  • Гуру
  • 6434
  • 745 / 3
*

Sergey1971

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

Shustry

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

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

Sergey1971

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

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

gitaristxx

  • Осваиваюсь на форуме
  • 30
  • 0 / 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>

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

gitaristxx

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

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
около 2 лет.зависит от уровня результата. 2 года для устойчивой практики азов.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Разобраться с отображением

Автор Дмитрий1444

Ответов: 4
Просмотров: 316
Последний ответ 10.02.2021, 14:51:12
от Дмитрий1444
Разобраться в Joomla коде

Автор OnePrg

Ответов: 4
Просмотров: 461
Последний ответ 24.09.2020, 10:34:20
от draff
Нужна помощь! разобраться по сайту

Автор dr.lezgin

Ответов: 2
Просмотров: 516
Последний ответ 20.02.2020, 18:47:34
от beliyadm
Нужна помощь! разобраться по сайту

Автор dr.lezgin

Ответов: 0
Просмотров: 401
Последний ответ 18.02.2020, 18:14:55
от dr.lezgin
Помогите разобраться: повышенная нагрузка на сайт

Автор Lovenokia

Ответов: 5
Просмотров: 1110
Последний ответ 11.02.2020, 09:11:42
от Gerostrat