Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 17, средняя оценка - 4.76
jakobx86
0 / 0 / 0
Регистрация: 14.07.2013
Сообщений: 18
#1

Текст под картинкой - HTML, CSS

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

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

Текст под картинкой - HTML, CSS
Сайт - anichan.moy.su/load/anime_serialy/dnevnik_budushhego_mirai_nikki/2-1-0-2 Как сделать так, чтобы текст справа, сразу после...

Текст под картинкой - HTML, CSS
Возникла такая проблема. Мне дали набор html страничек (вообщем сайт). И сказали чтобы я выложил его на каком-нибудь хостинге. С выбором...

Как разместить текст под картинкой? - HTML, CSS
как разместить текст под картинкой что бы бы не уходил припустим вот так (картинка) ну и так дальше только в этих рамках

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

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

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

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
Привет! Вот еще темы с ответами:

Текст перед картинкой - HTML, CSS
Пытаюсь поставить текст из двух строк перед картинкой, причем он должен быть выровнен по высоте по середине картинки и по ширине правому...

Текст над картинкой - HTML, CSS
Помогите поставить текст над или под картинкой! Как это сделать? Заранее спасибо!

Текст над картинкой - HTML, CSS
Вот есть сайт: http://shot.qip.ru/00d6lK-3jAMAwjSg/ вот есть текст все норм а когда пытаюсь вставить картинку :...

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


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

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

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