Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 26.01.2010, 05:48   #1
Manonia
Пользователь
 
Регистрация: 13.01.2010
Сообщений: 77
По умолчанию Не могу разобраться с картинками

Добрый день! У меня есть 5 нарезанных картинок(см. вложение), все их надо разместить друг с другом, чтобы получилась цельная картинка. Дело в том, что ширина трех основных суммарно равна 1 100 px, и ещё нужно присоединить к ним справа и слева по картинке шириной каждая по 70 px, т.е. суммарно получается 1 240 рх. Вроде должно всё входить на монитор, но у меня не входит, т.е. такое чувство будто ширина получается не 1 240 рх, а больше и соответственно поэтому не входит...

Код HTML:
[CODE] <div id="leftside">&nbsp;</div>
		<div id="part1">&nbsp;</div>
		<div id="part2">&nbsp;</div>
		<div id="part3">&nbsp;</div>
		<div id="rightside">&nbsp;</div>[/CODE]

Код:
#leftside
{
	background: url(../images/left.jpg) no-repeat;
	float: left;
	height: inherit;
	width: 15px
}

#rightside
{
	background: url(../images/right.jpg) no-repeat;
	float: left;
	height: inherit;
	width: 15px
}

#part1
{
	width: 460px;
	height: inherit;
	background:url(../images/part_1.jpg);
	float: left;

}

#part2
{
	width: 460px;
	height: inherit;
	background:url(../images/part_2.jpg);
	float: left
}

#part3
{
	width: 180px;
	height: inherit;
	background:url(../images/part_3.jpg);
	float: left
}
Изображения
Тип файла: jpg part_1.jpg (37.8 Кб, 110 просмотров)
Тип файла: jpg part_2.jpg (47.7 Кб, 115 просмотров)
Тип файла: jpg part_3.jpg (4.3 Кб, 112 просмотров)
Тип файла: jpg right.jpg (24.5 Кб, 115 просмотров)
Тип файла: jpg left.jpg (26.0 Кб, 116 просмотров)
Manonia вне форума Ответить с цитированием
Старый 26.01.2010, 06:10   #2
Manonia
Пользователь
 
Регистрация: 13.01.2010
Сообщений: 77
По умолчанию

Вопрос тоже в тему - как делать такое: есть центральная картинка, слева и справа у нее есть разные продолжения. Надеюсь понятно объяснила По картинкам думаю будет более понятно.
Изображения
Тип файла: jpg footer.jpg (3.8 Кб, 147 просмотров)
Тип файла: jpg right_line.jpg (468 байт, 114 просмотров)
Тип файла: jpg left_line.jpg (459 байт, 115 просмотров)
Manonia вне форума Ответить с цитированием
Старый 26.01.2010, 11:12   #3
cooperOk
Пользователь
 
Регистрация: 11.11.2009
Сообщений: 66
По умолчанию

Во-первых, у тебя для body стоит падинг в 10 пикселей, соответственно ширина уменьшается уже на 20 пикселей. Во-вторых, 1240 это ширина без скролл-бара, надо учитывать что если он появится - ширина уменьшится.
Надо все таки учитывать что есть мониторы 17-дюймовые и меньше.

Второй вопрос непонятен. Что с картинками сделать надо ?
cooperOk вне форума Ответить с цитированием
Старый 26.01.2010, 12:32   #4
Manonia
Пользователь
 
Регистрация: 13.01.2010
Сообщений: 77
По умолчанию

Спасибо, у body я проставила padding : 0px.
На счёт второго вопроса:
Есть картинка(та которая самая большая), она должна помещаться в подвале страницы посередине. Она как видно не равномерно залитая, а как градиент, соответственно слева и справа у нее разные цвета. Есть две маленьких полосочки(разного цвете), одна-для того, чтобы футер продолжить влево, другая - вправо(если монитор 17 дюймов и дальше). Не знаю как это сделать. Вот в общем.
Manonia вне форума Ответить с цитированием
Старый 26.01.2010, 13:56   #5
cooperOk
Пользователь
 
Регистрация: 11.11.2009
Сообщений: 66
По умолчанию

отрезать левый и правый кусочек от большой картинки, и отдельно их "растягивать". А середина останется с большой картинкой.
cooperOk вне форума Ответить с цитированием
Старый 26.01.2010, 18:26   #6
DomiNick
Студент, не
Старожил
 
Аватар для DomiNick
 
Регистрация: 29.01.2009
Сообщений: 2,067
По умолчанию

На скриншоте фиолетовый край не с той стороны... :3

Насчёт растягивания краёв - не думаю что получится хорошо, почему б всю картинку не растягивать равномерно?

И зачем её вообще нужно было разрезать? о_О
I am the First of Cyber Evolution...
I am the First to Program your Future...
DomiNick вне форума Ответить с цитированием
Старый 29.01.2010, 05:16   #7
Manonia
Пользователь
 
Регистрация: 13.01.2010
Сообщений: 77
По умолчанию

Смотрите, у меня должен быть подвал в виде градиентной полоски. Можно было бы конечно ничего не разрезать, так её поместить в подвал и всё. Но что, если экран больше 15 дюймов? Нужно чтобы он растягивался в обе стороны соответственно.(см. вложение) Так как подвал градиентный(т.е. не одного цвета), то соответственно продолжения вправо и влево будут разными(влево фиолетовый, вправо-желтый). Вот как это реализовать? т.е. центральная картинка не повторяется, а вот слева и справа линии будут повторяться по х.
Изображения
Тип файла: jpg example.jpg (88.8 Кб, 85 просмотров)
Manonia вне форума Ответить с цитированием
Старый 29.01.2010, 08:30   #8
DomiNick
Студент, не
Старожил
 
Аватар для DomiNick
 
Регистрация: 29.01.2009
Сообщений: 2,067
Лампочка

Цитата:
Но что, если экран больше 15 дюймов?
Я привык в пикселях всё мерить... А если у пользователя ширина экрана не 1240, а 1920? А если вообще 800?
Мне просто кажется, что лучше всю изображению масштабировать...

А так как вы хотите можно просто таблицей сделать, даже почти без css...

Код HTML:
<html>
<head>
<title>title</title>
</head>
<body style="margin: 0px;">

<table width="100%" height="500" cellspacing="0" cellpadding="0">
<tr width="100%">
<td><img src="left.jpg" width="100%" height="500"></td>
<td width="1100"><img src="center.jpg" width="1100" height="500"></td>
<td><img src="right.jpg" width="100%" height="500"></td>
</tr>
</table>

</body>
</html>
Правда в IE7 немного не так работает с уменьшением...
I am the First of Cyber Evolution...
I am the First to Program your Future...
DomiNick вне форума Ответить с цитированием
Старый 29.01.2010, 10:35   #9
cooperOk
Пользователь
 
Регистрация: 11.11.2009
Сообщений: 66
По умолчанию

Можно просто отрезать правый и левый кусок в ширину по одному пикселю и повторять его
Код:
background: url('img.jpg') repeat-x;
cooperOk вне форума Ответить с цитированием
Старый 29.01.2010, 11:08   #10
Manonia
Пользователь
 
Регистрация: 13.01.2010
Сообщений: 77
По умолчанию

DomiNick, а в дивах не подскажете?

cooperOk, выше есть сообщение где я выложила и сам подвал и полоски по 1 пикселю. Не могли бы вы привести код уже со всеми тремя картинками?
Manonia вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не могу разобраться Var17 Общие вопросы Delphi 6 27.03.2010 01:21
Не могу разобраться Zmaxer Помощь студентам 24 10.10.2009 18:52
не могу разобраться Инспектор ГУЛ Свободное общение 7 20.09.2009 09:29