Картинка и текст

@SarMat4Life · Регистрация: 29.11.2012

Студворк — интернет-сервис помощи студентам

всем привет! такой вопрос: как разместить на странице картинку и текст на ней? только так чтоб картинка была статичной и область на ней тоже(текстовая), и текст отображался в этой области с скролом?

З.Ы. в будущем планируется размещать эту страницу во фрейме 50% экрана
на всякий случай прикладываю картинку(у нее поля не ровные)

@conformist · 01.02.2013, 18:33

режете картинку на 3 части: head, middle, foot - и в среднем блоке вставляете текст с отступами от краев браузера, чтобы он не вылазил за границы картинки. все в принципе, в среднем блоке - overflow:auto - если будет нужно, появится прокрутка. без полосы прокрутки - на js можно сделать вроде бы

@Sir1us · 01.02.2013, 19:05

в body задать нужную IMG
а тексту написать ID

CSS
1
2
3
4
5
6
7
8
9
10
    
 #scroll
{
     text-align:center;
     border: 2px solid #00F;
     margin: 100px auto 200px auto;
     overflow:auto;
     width:500px;
     height:300px;
}

@SarMat4Life · 01.02.2013, 20:59 **[ТС]**

conformist, а эти картинки (нарезанные) вставлять как фон или с помощью img?

Добавлено через 20 минут
разобрался, сначала в div, потом через img

@Taatshi · 01.02.2013, 21:03

conformist, а не проще одному диву всю картинку целиком бэкграундом, а верх и низ паддингами обозначить - и все...

@SarMat4Life · 01.02.2013, 21:17 **[ТС]**

Taatshi, а можно по-подробнее?

@conformist · 01.02.2013, 21:47

Taatshi, я сразу о другом решении просто подумал, так и написал (о том, когда текст растягивает средний блок)

@SarMat4Life · 01.02.2013, 23:12 **[ТС]**

спасибо за то что натолкнули на путь истинный!!
сделал так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML</title>
 <link type="text/css" rel="stylesheet" media="all" href="css/styles.css"/>
 <style type="text/css">
   BODY {
    background: url(images/img.jpg) no-repeat 30px 15px; /* Параметры фона */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   
  </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
.layer {
    text-align:center;
    overflow: scroll; 
    width: 395px; 
    height: 400px;
    padding: 1px;
    margin-left: 90px;
    margin-top: 110px;
   }

получилось то что нужно!!!

Добавлено через 40 минут
возник новый вопрос как поменять цвет скролла? белые полосы никак не вписываются
пробовал делать через scrollbar-3dlight-color и т.п. вставляя в HTML через <style>, не получилось

@Taatshi · 02.02.2013, 00:22

SarMat4Life, одна тема - один вопрос. Создайте новую.

Новые блоги и статьи Все статьи Все блоги /
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "АккумуляторыИШины", разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого. . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .
Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .

@SarMat4Life 10 / 10 / 3 Регистрация: 29.11.2012 Сообщений: 227

	Картинка и текст 01.02.2013, 18:21. Показов 2604. Ответов 8 Метки нет (Все метки) всем привет! такой вопрос: как разместить на странице картинку и текст на ней? только так чтоб картинка была статичной и область на ней тоже(текстовая), и текст отображался в этой области с скролом? З.Ы. в будущем планируется размещать эту страницу во фрейме 50% экрана на всякий случай прикладываю картинку(у нее поля не ровные) Миниатюры 0

@conformist O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681
	01.02.2013, 18:33
	режете картинку на 3 части: head, middle, foot - и в среднем блоке вставляете текст с отступами от краев браузера, чтобы он не вылазил за границы картинки. все в принципе, в среднем блоке - overflow:auto - если будет нужно, появится прокрутка. без полосы прокрутки - на js можно сделать вроде бы 1

@SarMat4Life 10 / 10 / 3 Регистрация: 29.11.2012 Сообщений: 227
	01.02.2013, 20:59 [ТС]
	conformist, а эти картинки (нарезанные) вставлять как фон или с помощью img? Добавлено через 20 минут разобрался, сначала в div, потом через img 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	01.02.2013, 21:03
	conformist, а не проще одному диву всю картинку целиком бэкграундом, а верх и низ паддингами обозначить - и все... 1

@SarMat4Life 10 / 10 / 3 Регистрация: 29.11.2012 Сообщений: 227
	01.02.2013, 21:17 [ТС]
	Taatshi, а можно по-подробнее? 0

@conformist O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681
	01.02.2013, 21:47
	Taatshi, я сразу о другом решении просто подумал, так и написал (о том, когда текст растягивает средний блок) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.02.2013, 00:22
	SarMat4Life, одна тема - один вопрос. Создайте новую. 0