« предыдущая тема следующая тема »
Страницы: 1   Вниз

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

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

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

*

gitaristxx

  • ***
  • 30
  • + 0 -
Не разобраться с блочным элементом <div>
« : 23.10.2016, 19: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, 20:19:41 от gitaristxx »
Записан
*

aa-novik

  • **
  • 14
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #1 : 24.10.2016, 23:07:52 »
Выложите изображения на любой хостинг картинок и вставьте с помощью кнопки "Вставить изображение".

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

gitaristxx

  • ***
  • 30
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #2 : 25.10.2016, 02:33:52 »
Спасибо за отклик, не совсем,  что, вы предлагаете, но все равно спасибо.
т.е как я понимаю каждый скриншот я должен заливать на свой сайт, и уже с сайта заливать сюда?
как описано в правилах форума, отправка сообщения, в дополнительных опциях должна быть вкладка"Вложения", но у меня ее почему то нет.
Записан
*

aa-novik

  • **
  • 14
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #3 : 25.10.2016, 12:03:32 »
Цитата: gitaristxx от 25.10.2016, 02:33:52
как описано в правилах форума, отправка сообщения, в дополнительных опциях должна быть вкладка"Вложения", но у меня ее почему то нет.
У меня тоже.

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

sergo239

  • ***
  • 43
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #4 : 25.10.2016, 12:25:17 »
Цитата: gitaristxx от 25.10.2016, 02:33:52
Спасибо за отклик, не совсем,  что, вы предлагаете, но все равно спасибо.
т.е как я понимаю каждый скриншот я должен заливать на свой сайт, и уже с сайта заливать сюда?
как описано в правилах форума, отправка сообщения, в дополнительных опциях должна быть вкладка"Вложения", но у меня ее почему то нет.

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

gitaristxx

  • ***
  • 30
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #5 : 25.10.2016, 23:34:35 »
Записан
*

gitaristxx

  • ***
  • 30
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #6 : 25.10.2016, 23:42:12 »
Добрый вечер уважаемые форумчане спасибо за ответ, как выложить фото ^-^ и за поддержку
Теперь подскажите как мне сделать как на фото как полагаю с помощью тега <div>
кому не трудно желательно в коде, т.к. я новичок. 
Записан
*

Sergey1971

  • ***
  • 49
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #7 : 26.10.2016, 00:25:00 »
У специалиста есть курс по верстке. Там все это объясняется. Или float или табличной версткой
http://htmlbook.ru/css/float
Записан
*

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

  • *******
  • 1777
  • + 135 -
Re: Не разобраться с блочным элементом <div>
« Ответ #8 : 26.10.2016, 00:26:08 »
Цитировать
табличной версткой
Археологией занимаетесь?
Записан
Ставь лайк, если согласен, и делай репост!

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

Sergey1971

  • ***
  • 49
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #9 : 26.10.2016, 00:39:54 »
Специалист | 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 -
Re: Не разобраться с блочным элементом <div>
« Ответ #10 : 26.10.2016, 00:43:31 »
Таки замучается разбираться без конкретного примера, если совсем новичок. Многие вещи по поводу центрирования очень неявные.

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 -
Re: Не разобраться с блочным элементом <div>
« Ответ #11 : 26.10.2016, 04:11:17 »
Цитата: Филипп Сорокин от 26.10.2016, 00:26:08
Археологией занимаетесь?
display: table;
https://htmlacademy.ru/blog/29-display-table-anti-hero
таблицы не умирают!
Записан
*

Shustry

  • *****
  • 6426
  • + 733 -
  • Рисую дизайны
Re: Не разобраться с блочным элементом <div>
« Ответ #12 : 26.10.2016, 14:03:56 »
Записан
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Sergey1971

  • ***
  • 49
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #13 : 26.10.2016, 19:50:41 »
Цитата: Shustry от 26.10.2016, 14:03:56
Flex?
Вопрос не понял. Просто есть табличное представление в CSS. Многие путают с табличным представлением HTML.
Записан
*

Shustry

  • *****
  • 6426
  • + 733 -
  • Рисую дизайны
Re: Не разобраться с блочным элементом <div>
« Ответ #14 : 26.10.2016, 20:01:48 »
Цитата: Sergey1971 от 26.10.2016, 19:50:41
Вопрос не понял. Просто есть табличное представление в CSS. Многие путают с табличным представлением HTML.

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

Sergey1971

  • ***
  • 49
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #15 : 26.10.2016, 20:35:41 »
Цитата: Shustry от 26.10.2016, 20:01:48
display:table нет практического применения на настоящее время.
Не согласен, но спорить не буду. Тем более что тема не об этом.

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

gitaristxx

  • ***
  • 30
  • + 0 -
Re: Не разобраться с блочным элементом <div>
« Ответ #16 : 26.10.2016, 21:37:05 »
Цитата: aa-novik от 26.10.2016, 00:43:31
Таки замучается разбираться без конкретного примера, если совсем новичок. Многие вещи по поводу центрирования очень неявные.

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 -
Re: Не разобраться с блочным элементом <div>
« Ответ #17 : 26.10.2016, 21:44:09 »
Уважаемые форумчане, у меня вопрос.
Сколько займет времени в среднем изучения HTML, CSS, php, java script, чтобы верстать сайты.
Записан
*

vipiusss

  • ********
  • 5470
  • + 318 -
  • JoomlaNet
Re: Не разобраться с блочным элементом <div>
« Ответ #18 : 26.10.2016, 22:01:47 »
около 2 лет.зависит от уровня результата. 2 года для устойчивой практики азов.
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Страницы: 1   Вверх
« предыдущая тема следующая тема »