|
|
Модератор форума: Yuri_G |
Сообщество uCoz Мастерская uCoz Дизайн: управление шаблонами При изменении разрешения экрана сайт плывет |
При изменении разрешения экрана сайт плывет |
Всем привет!
Может хоть кто-то на этот вопрос знает ответ... Как в коде прописать что для разрешения 1366 показывать так, для 1280 так ??? с кроссбраузерностью как быть? |
Может хоть кто-то на этот вопрос знает ответ... Как в коде прописать что для разрешения 1366 показывать так, для 1280 так ??? А так, это как? Подробнее можете пояснить? Примеры привести? Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
|
У меня меню картинка (плюс на этой картинке вставил ссылки), на домашнем ноуте 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 настраивается как показывать сайт для определенных разрешений экрана... вот только как? и как вышенаписанный код одним блоком сделать? |
А вы можете скрин сделать?
Так как виной "сдвигов" скорее всего не приведённый вами код. У вас страница не совсем правильно свёрстана, есть лишние теги, есть теги, находящиеся не на своих местах. Я у вас вот такие сдвиги заметил: Одно разрешение: http://begemoti.com/img/var1.png Другое разрешение: http://begemoti.com/img/var2.png У вас так же? Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
Сообщение отредактировал Inkvizitor - Среда, 11 Мар 2015, 18:28:36
|
|
Vitaliy_vincom, необходимо перебрать вам ваш код, так как много ошибок в нём.
Во-первых уберите код $GLOBAL_AHEADER$ из кода страниц, он у вас там ни к селу ни к городу. У вас получается что у страницы "свой" хедер, написанный вами вручную, а есть ещё и системный, правильное приминение которого вы пока не изучили как я понимаю Можете почитать о них здесь - //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> Это очень простой пример. Я могу вам всё изменить и дать готовый код, но лучше попробуйте сами, что бы в следующий раз сами смогли разобраться. Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
Сообщение отредактировал Inkvizitor - Среда, 11 Мар 2015, 18:45:21
|
<td style="text-align:right;">Здесь картинка с номерами, которая справа от ЛОГО</td> <td colspan="2">Здесь меню, код которого вы мне привели выше</td> Меню также искривляется $IMAGE1$ В верхней части как раз меню находится Да, спасибо, конечно лучше самому, интереснее заниматься... но иногда вот такие ситуации случаются..ступор((( |
Vitaliy_vincom, я внимательно присмотрелся к вашему исходному коду, у вас там теги html, head и body по шесть раз вставлены.
Уберите всё лишнее. Цитата <html> <head> <title>Название страницы, выводимое в названии окошка</title> Различные настройки и подключения файлов стилей и скриптов. </head> <body> Содержимое страницы, видное в браузере </body> </html Вот это шаблон любой страницы в интернете. А у вас он повторяется несколько раз. Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
Сообщение отредактировал Inkvizitor - Среда, 11 Мар 2015, 19:18:38
|
|
| |||
| |||