Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » При изменении разрешения экрана сайт плывет
При изменении разрешения экрана сайт плывет
Vitaliy_vincom
Сообщений: 34
Репутация: 0

Сообщение # 1 | 17:57:52
Всем привет!

Может хоть кто-то на этот вопрос знает ответ... Как в коде прописать что для разрешения 1366 показывать так, для 1280 так ???

с кроссбраузерностью как быть?
Inquisitоr
Эксперт uCoz
Сообщений: 894
Репутация: 338

Сообщение # 2 | 18:01:07
Цитата Vitaliy_vincom ()
Может хоть кто-то на этот вопрос знает ответ... Как в коде прописать что для разрешения 1366 показывать так, для 1280 так ???


А так, это как?

Подробнее можете пояснить? Примеры привести?

Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
Vitaliy_vincom
Сообщений: 34
Репутация: 0

Сообщение # 3 | 18:12:10
Цитата Inkvizitor ()
А так, это как?
У меня меню картинка (плюс на этой картинке вставил ссылки), на домашнем ноуте 1366 разрешение настроил сайт, отображается все красиво, открываю на рабочем ноуте сайт, меню сдвинулось и ссылки не там где нужно отображаются, т.е. получается что происходит сдвиг, ниже код:

<div id="image2" style="position:absolute; overflow:hidden; left:50px; top:171px; width:1170px; height:179px; z-index:0; border: 5px solid #FFE071; border-radius: 5px;"><img src="/img/bez_imeni-1170.png" alt="" title="" border=0 width=1170 height=179 ></div>

<div id="text1" style="position:absolute; overflow:hidden; left:291px; top:179px; width:118px; height:82px; z-index:1; >
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a href="index.html" title="" class="style1">Home</a></font></div>
</div></a></div>

<div id="text2" style="position:absolute; overflow:hidden; left:408px; top:179px; width:118px; height:82px; z-index:2">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a class="new2" href="index.html" title="" class="style1">Услуги</a></font></div>
</div></a></div>

<div id="text3" style="position:absolute; overflow:hidden; left:524px; top:180px; width:116px; height:81px; z-index:3">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a href="index.html" title="" class="style1">Тарифы</a></font></div>
</div></a></div>

<div id="text4" style="position:absolute; overflow:hidden; left:638px; top:180px; width:118px; height:82px; z-index:4">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a class="new2" href="index.html" title="" class="style1">Отзывы</a></font></div>
</div></a></div>

<div id="text5" style="position:absolute; overflow:hidden; left:754px; top:180px; width:117px; height:82px; z-index:5">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a href="index.html" title="" class="style1">Вакансии</a></font></div>
</div></a></div>

<div id="text6" style="position:absolute; overflow:hidden; left:869px; top:179px; width:119px; height:83px; z-index:6">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a class="new2" href="index.html" title="" class="style1">Соц.сети</a></font></div>
</div></a></div>

<div id="text7" style="position:absolute; overflow:hidden; left:291px; top:260px; width:117px; height:82px; z-index:7">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:2.00;"><font face="Arial" class="ws16"><a class="new2" href="index.html" title="" class="style1">Заказ</a></font></div>
<div align=center style="line-height:1.50;"><font face="Arial" class="ws16"><a class="new2" href="index.html" title="" class="style1">онлайн</a></font></div>
</div></a></div>

<div id="text8" style="position:absolute; overflow:hidden; left:408px; top:261px; width:115px; height:80px; z-index:8">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a href="index.html" title="" class="style1">Акции</a></font></div>
</div></a></div>

<div id="text9" style="position:absolute; overflow:hidden; left:523px; top:260px; width:116px; height:81px; z-index:9">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a class="new2" href="index.html" title="" class="style1">О нас</a></font></div>
</div></a></div>

<div id="text10" style="position:absolute; overflow:hidden; left:639px; top:260px; width:116px; height:81px; z-index:10">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a href="index.html" title="" class="style1">Фото</a></font></div>
</div></a></div>

<div id="text11" style="position:absolute; overflow:hidden; left:754px; top:260px; width:118px; height:82px; z-index:11">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a class="new2" href="index.html" title="" class="style1">FAQ</a></font></div>
</div></a></div>

<div id="text12" style="position:absolute; overflow:hidden; left:871px; top:260px; width:116px; height:81px; z-index:12">
<a href="index.html"><div class="wpmd">
<div align=center style="line-height:4.00;"><font face="Arial" class="ws16"><a href="index.html" title="" class="style1">Контакты</a></font></div>
</div></a></div>

Думал как то эти дивы в один блок сделать и уже в CSS его позицию настраивать, но ничего не получилось... или рукож*п не так делаю...

Сайт: Karaganda.ucoz.com

Как то вроде в CSS настраивается как показывать сайт для определенных разрешений экрана... вот только как? и как вышенаписанный код одним блоком сделать?
Inquisitоr
Эксперт uCoz
Сообщений: 894
Репутация: 338

Сообщение # 4 | 18:26:13
А вы можете скрин сделать?
Так как виной "сдвигов" скорее всего не приведённый вами код.
У вас страница не совсем правильно свёрстана, есть лишние теги, есть теги, находящиеся не на своих местах.

Я у вас вот такие сдвиги заметил:

Одно разрешение:
http://begemoti.com/img/var1.png

Другое разрешение:
http://begemoti.com/img/var2.png

У вас так же?

Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
Vitaliy_vincom
Сообщений: 34
Репутация: 0

Сообщение # 5 | 18:33:27
Цитата Inkvizitor ()
У вас так же?
Да да. оно самое... под одно настроишь на другом коряво показывает... wacko
Inquisitоr
Эксперт uCoz
Сообщений: 894
Репутация: 338

Сообщение # 6 | 18:44:40
Vitaliy_vincom, необходимо перебрать вам ваш код, так как много ошибок в нём.

Во-первых уберите код $GLOBAL_AHEADER$ из кода страниц, он у вас там ни к селу ни к городу.
У вас получается что у страницы "свой" хедер, написанный вами вручную, а есть ещё и системный, правильное приминение которого вы пока не изучили как я понимаю
Можете почитать о них здесь - http://forum.ucoz.ru/forum/24-5860-1
Пригодиться в будущем.

Помимо этого, что бы у вас не было "кривизны", измените шаблон страницы таким образом:

Цитата
<table>
<tr>
<td style="text-align:left;">Здесь картинка ЛОГО</td>
<td style="text-align:right;">Здесь картинка с номерами, которая справа от ЛОГО</td>
</tr>
<tr>
<td colspan="2">Здесь меню, код которого вы мне привели выше</td>
</tr>
</table>


Это очень простой пример. Я могу вам всё изменить и дать готовый код, но лучше попробуйте сами, что бы в следующий раз сами смогли разобраться.

Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
Vitaliy_vincom
Сообщений: 34
Репутация: 0

Сообщение # 7 | 19:11:26
Цитата Inkvizitor ()
<td style="text-align:right;">Здесь картинка с номерами, которая справа от ЛОГО</td>
Картинка с номерами прижалась к LOGO

<td colspan="2">Здесь меню, код которого вы мне привели выше</td>

Меню также искривляется

$IMAGE1$

Цитата Inkvizitor ()
$GLOBAL_AHEADER$
В верхней части как раз меню находится

Да, спасибо, конечно лучше самому, интереснее заниматься... но иногда вот такие ситуации случаются..ступор(((
Inquisitоr
Эксперт uCoz
Сообщений: 894
Репутация: 338

Сообщение # 8 | 19:18:04
Vitaliy_vincom, я внимательно присмотрелся к вашему исходному коду, у вас там теги html, head и body по шесть раз вставлены.
Уберите всё лишнее.

Цитата

<html>
<head>
<title>Название страницы, выводимое в названии окошка</title>

Различные настройки и подключения файлов стилей и скриптов.

</head>
<body>

Содержимое страницы, видное в браузере

</body>
</html


Вот это шаблон любой страницы в интернете.
А у вас он повторяется несколько раз.

Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
Vitaliy_vincom
Сообщений: 34
Репутация: 0

Сообщение # 9 | 19:58:44
Цитата Inkvizitor ()
</html
Все лишнее вроде убрал, теперь блоки разбежались... завтра буду пазл собирать... если вдруг что в голову придет вам, напишите плиз здесь, заранее благодарен..
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » При изменении разрешения экрана сайт плывет
Страница 1 из 11
Поиск: