С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.93/15: Рейтинг темы: голосов - 15, средняя оценка - 4.93
jakobx86
0 / 0 / 0
Регистрация: 14.07.2013
Сообщений: 18
1

Текст под картинкой

16.07.2013, 03:56. Просмотров 2794. Ответов 5
Метки нет (Все метки)

Всем привет!!
Ходил по поиску но к сожалению не нашел решения.
Мне нужно чтоб под картинкой по средине был текст.Но фишка в том что я хочу задавать размер картинки в процентах.
Если указывать фиксированный размер все получается ,но как только устанавливаю проценты,блок с картинкой почему то увеличивается на всю ширину родительского блока. Скрин и код прикреплены.
0
Миниатюры
Текст под картинкой  
Вложения
Тип файла: rar Photo_concurs.rar (1.7 Кб, 10 просмотров)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.07.2013, 03:56
Ответы с готовыми решениями:

Текст под картинкой
Возникла такая проблема. Мне дали набор html страничек (вообщем сайт). И...

Текст под картинкой
Сайт - anichan.moy.su/load/anime_serialy/dnevnik_budushhego_mirai_nikki/2-1-0-2...

Как разместить текст под картинкой?
как разместить текст под картинкой что бы бы не уходил припустим вот так...

Текст под картинкой - HTML, CSS
У меня есть картинка, как сделать так чтобы при наведении на нее снизу...

Как выровнять текст меню по центру под картинкой?
всем здрасти, не судите строго я еще новичек в этом нелегком деле) короче...

5
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
16.07.2013, 06:53 2
Расположение блоков с картинкой нужно так как у вас на изображении? один блок вверху , четыре во втором и тд ? или одинаковое количество в одно ряду ?
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
16.07.2013, 13:47 3
Да увидел файл твой - чтобы сделать резиновую верстку - создаешь пять дивов - выстраиваешь их в ряд задаешь и ширину в процентах так чтобы они укладывались в ширину основного блока и внутрь каждого блока вкладываешь еще по одному с шириной 100 % и комплект изображение , текст внизу и тогда спокойно равняешь и все будет работать .

Добавлено через 1 минуту
например приблизительно по 19 % ( остальные 5 % пойдут на растояние между ними - все это можно опытным путем подобрать и отцентровать )
0
jakobx86
0 / 0 / 0
Регистрация: 14.07.2013
Сообщений: 18
16.07.2013, 19:04  [ТС] 4
комплект изображение , текст внизу
Все понятно только изображение должно быть как фон выложенного дива или тег img.
Пробовал и так и так, не получается если вставить img и задать размер резиновость пропадает.
А если фон вложенного дива то картинка заполняет весь "content" див.
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
16.07.2013, 19:15 5
можно попробывать для изображения создать отдельный див и под ним будет текст -если есть код выкладывайте будем творить вместе . Если создадите новый див может быть как фон с шириной дива 100% и высотой например 50-60% ( нужно опытным путем подобрать )
0
jakobx86
0 / 0 / 0
Регистрация: 14.07.2013
Сообщений: 18
16.07.2013, 21:55  [ТС] 6
Получилось.Можно использовать свойство background-size.
Вот код может кому понадобится.
Текст под картинкой для резиновой верстки.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-size</title>
  <style>
  body
  {height:800px;}
  .my_img
  {
  height: 20%;/* Здесь можно указывать не опходимую ширину*/
  width: 20%;/* Здесь можно указывать неопходимую высоту*/
  border: 2px solid #000;  
  margin: 2% 1% 10% 2%;
  display:inline-table;
  }
   .img_info {
    height:100%; /* Высота блока */
    width: 100%;     
    background: url(IMG_1.jpg) 100% 100% no-repeat; /* Добавляем фон */
    background-size: cover; /* Масштабируем фон */  
   }
   p{text-align:center;   
   }
  </style>
 </head>
 <body>
  <div class="my_img">
  <div class="img_info">
  </div>
  <p>Название фото</p>
  <p>(Ф.И.О.)</p>
  </div>
  <div class="my_img">
  <div class="img_info">
  </div>
  <p>Название фото</p>
  <p>(Ф.И.О.)</p>
  </div>
  <div class="my_img">
  <div class="img_info">
  </div>
  <p>Название фото</p>
  <p>(Ф.И.О.)</p>
  </div>
  <div class="my_img">
  <div class="img_info">
  </div>
  <p>Название фото</p>
  <p>(Ф.И.О.)</p>
  </div>
  <br/>
  <div class="my_img">
  <div class="img_info">
  </div>
  <p>Название фото</p>
  <p>(Ф.И.О.)</p>
  </div>
  <div class="my_img">
  <div class="img_info">
  </div>
  <p>Название фото</p>
  <p>(Ф.И.О.)</p>
  </div>
  <div class="my_img">
  <div class="img_info">
  </div>
  <p>Название фото</p>
  <p>(Ф.И.О.)</p>
  </div>
  <div class="my_img">
  <div class="img_info">
  </div>
  <p>Название фото</p>
  <p>(Ф.И.О.)</p>
  </div>
 </body>
</html>
0
16.07.2013, 21:55
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.07.2013, 21:55

Как сделать текст строго под маленькой картинкой?
как сделать текст строго под маленькой картинкой (допустим элемент меню с...

Подпись под картинкой
Здравствуйте. Начал оформлять свои заметки на сайте на платформе ucoz и...

Текст с картинкой в рамке
Скажите как сделать так, как на этом изображении. Дело в том, чтоб именно вот...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru