Помогите с выравнивание изображения под любое разрешение.

AstraZak · July 20, 2007

Привет всем.

У меня возникла проблема и я не могу е? решить,надеюсь вы сможите мне помоч.

Я плохо разбираюсь в хтмл поэтому и попросил помощи.

Что мне нужно,привратить это:

Вот код этого:

<!-- Header -->
<table border="0" cellpadding="0" cellspacing="0" height="204" width="100%">
<tr><td align="left" width="357"><img src="http://src.ucoz.ru/t/601/1.jpg" border="0"></td><td style="background:url('http://src.ucoz.ru/t/601/2.jpg');" align="right"><a href="$HOME_PAGE_LINK$" title="Главная"><img src="http://src.ucoz.ru/t/601/3.gif" border="0" alt="Главная"></a><img src="http://src.ucoz.ru/t/601/4.gif" width="10" height="1" border="0">%IF($USER_LOGGED_IN$)%<a href="$PERSONAL_PAGE_LINK$" title="Мой профиль"><img src="http://src.ucoz.ru/t/601/5.gif" border="0" alt="Мой профиль"></a>%ELSE%<a href="$REGISTER_LINK$" title="Регистрация"><img src="http://src.ucoz.ru/t/601/6.gif" border="0" alt="Регистрация"></a>%ENDIF%<img src="http://src.ucoz.ru/t/601/4.gif" width="10" height="1" border="0">%IF($USER_LOGGED_IN$)%<a href="$LOGOUT_LINK$" title="Выход"><img src="http://src.ucoz.ru/t/601/7.gif" border="0" alt="Выход"></a>%ELSE%<a href="$LOGIN_LINK$" title="Вход"><img src="http://src.ucoz.ru/t/601/8.gif" border="0" alt="Вход"></a>%ENDIF%</td><td align="left" width="243"><img src="http://src.ucoz.ru/t/601/9.jpg" border="0"></td></tr>
<tr><td align="left" width="357"><img src="http://src.ucoz.ru/t/601/10.jpg" border="0"></td><td style="background:url('http://src.ucoz.ru/t/601/11.gif') left no-repeat;"><span style="color:#F8F3C9;font:20pt bold Verdana,Tahoma;"><b>SITE LOGO</b></span></td>
<td width="193" style="background:url('http://src.ucoz.ru/t/601/12.jpg');padding-right:50px;padding-bottom:5px;" align="right" valign="bottom">%IF($USER_LOGGED_IN$)%Вы вошли как <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | Группа "<u>$USER_GROUP$</u>"%ELSE%Приветствую Вас <b>$USERNAME$</b>%ENDIF% | <a href="$RSS_LINK$">RSS</a></td></tr>
</table>
<!-- /Header -->

В это: (выложить код)

Ссылки для оформления:

Я понимаю это довольно сложно,но постарайтесь помочь.

Заранее сп.

shkoda · July 20, 2007

Там у тебя используются какие-то странные конструкции $HOME_PAGE_LINK$, это откуда?

AstraZak · July 20, 2007

Сек.

$HOME_PAGE_LINK$ - ссылка на главную страницу сайта.

$USER_LOGGED_IN$ - специальный код, применяемый в условном операторе %IF%.

$PERSONAL_PAGE_LINK$ - ссылка на персональную страницу пользователя

$REGISTER_LINK$ - ссылка на страницу для регистрации пользователей

$LOGOUT_LINK$ - ссылка для выхода пользователей

$LOGIN_LINK$ - ссылка для входа пользователей

$USERNAME$ - имя пользователя (login)

shkoda · July 20, 2007

Плюс ко всему когда используется паззл из картинок, то страница пишется под фиксированную ширину, например, 800*600. Тогда можно подогнать все размеры картинок, и скомпоновать картинки правильно. Про это можно прочитать http://htmlbook.ru/content/?id=81 и тут http://htmlbook.ru/content/?id=88. Поэтому будет сложно сделать так чтобы оно масштабировалось в зависимости от разрешения экрана.

AstraZak · July 20, 2007

shkoda

А как тогда решить проблему?

shkoda · July 20, 2007

я считаю, что надо оставлять фиксированный дизайн, так как картинка к этому обязывает. Подожди чуток попробую выложить код

shkoda · July 20, 2007

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Untitled</title>
 <style type="text/css">
 td.class1{
 background:url('images/posle_01.gif') no-repeat;
 }
 td.class2{
 background:url('images/posle_02.gif') no-repeat;
 }
 td.class3{
 background:url('images/posle_03.gif') no-repeat;
 }
 td.class4{
 background:url('images/posle_04.gif') no-repeat;
 }
 td.class5{
 background:url('images/posle_06.gif') repeat-x;
 }
 td.class6{
 background:url('images/posle_07.gif') no-repeat;
 }
 td.class7{
 background:url('images/posle_10.gif') repeat-x;
 } 
 table.header{
 border:1px solid black;
 align:left;
 background-color:#000;
 color:#FFF;
 }
 </style>
</head>

<body bgcolor="#FFFFF0">

<table class="header" width=900" cellspacing="0" cellpadding="0" height="273">
<tr>
<td class="class1" width="34" align="left" rowspan="2"></td>
<td class="class2" height="197" width="221" align="left"></td>
<td class="class3" width="453" align="left" rowspan="2"></td>
<td class="class4" width="141" align="left"></td>
<td class="class5" align="right" height="197" width="" ></td>
<td class="class6" width="34" height="197" align="right" rowspan="2"></td>
</tr>
<tr>
<td class="class7" align="center">
 <a href="#"><img src="images/3.gif" alt="Home" width="25" height="26" border="0"></a>
 <a href="#"><img src="images/5.gif" alt="Regs" width="25" height="26" border="0"></a>
 <a href="#"><img src="images/7.gif" alt="Exit" width="25" height="26" border="0"></a>
</td>
<td class="class7" colspan="2" align="right">Вы зашли как Гость
Группа Гости | RSS</td>
</tr>
</table>

</body>
</html>

Вот что у меня получилось! Но я сама разрезала картинку на 6 частей. Могу прислать их на мыло, чтобы точно мог проверить. Подойдет?

AstraZak · July 20, 2007

Сп.

shkoda · July 20, 2007

пож, буду рада, если поможет. А если нужны будут изображения, пиши в личку, пришлю

Дядя Саша · July 20, 2007

Зачем его вообще резать если дизайн фиксированный?

Тем более что картинка то явно не располагает к резиновости.

shkoda · July 21, 2007

А потому как разрезанное быстрее грузится, или создает такую иллюзию. Об этом писали во многих статьях и книгах. Например, здесь http://htmlbook.ru/content/?id=88

AstraZak · July 21, 2007

Ой один кусок картинки забыл,а теперь можно сделать резиновую?

shkoda · July 21, 2007

нет, меньше определенного размера ее все равно не сделаешь. Например, меньше 800 px

AstraZak · July 21, 2007

Я понимаю я то хочу что бы новая картинка и 17 и на 19 (мониторах) смотрелась не криво.

shkoda · July 21, 2007

в моем коде используется кусочек картинки

td.class7{
 background:url('images/posle_10.gif') repeat-x;
 }

который позволяет немного растягиваться и сжиматься картинке. По-моему, тебе такое решение подойдет. Проверь.

Fu-tai · July 22, 2007

Вообщето ее можно сделать резиновой!

Если расслоить картинку на отдельные элементы и уже версткой собрать воедино, то можно получить резиновую шапку, с небольшими изминениями в композиции при изменении размеров браузера!

В любом случае это будет лучше если ресурс полноформатный!

Sign In

Помогите с выравнивание изображения под любое разрешение.

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information