Воины и Маги
Форум он-лайн игры "Воины и Маги"
 
 FAQFAQ   ПоискПоиск   ПользователиПользователи   ГруппыГруппы   РегистрацияРегистрация 
 ПрофильПрофиль   Войти и проверить личные сообщенияВойти и проверить личные сообщения   ВходВход 

Разметка страницы входа

 
Начать новую тему   Ответить на тему    Список форумов Воины и Маги -> Технический
Предыдущая тема :: Следующая тема  
Автор Сообщение
Гость In






СообщениеДобавлено: Вт, 03 Апр 2018 14:19    Заголовок сообщения: Разметка страницы входа Ответить с цитатой

OS : Linux Mint 18.2 Sonya;
Браузер: Google Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Суть:
1) (необязательный шаг) Открываем http://magegame.ru/ в браузере на полный экран.
Видим привычную всем картину : окно ввода логина и пароля на фоне травы и городской стены.

2) Уменьшаем ширину окна вдвое - на половину размера монитора.
Городская стена и трава занимают всё положенное пространство - ровно ширину окна.
НО форма ввода логина уехала вправо за границу окна и оказалась на пустом сером фоне


Почему это происходит:

Расположение элементов в коде страницы указано относительно левого края окна. При этом размер смещения вычисляется исходя из ширины монитора, а не ширины окна.

Код:
if (self.screen) { // for NN4 and IE4
width = screen.width
height = screen.height}


Решение 1:

При расчёте смещения от левой границы учитывать не ширину монитора, а ширину окна браузера:

Код:
--- a/index.html
+++ b/index.html
@@ -122,16 +122,8 @@ function enter_click(e) {
 </td>
 <td height=483 background="http://d1.magegame.ru/mainstena1.jpg"><img src=http://d.magegame.ru/x.gif width=1 height=3></td></tr></table>
 <script>
-var height=0;var width=0;
-if (self.screen) { // for NN4 and IE4
-width = screen.width
-height = screen.height}
-else
-if (self.java) { // for NN3 with enabled Java
-var jkit = java.awt.Toolkit.getDefaultToolkit();
-var scrsize = jkit.getScreenSize();
-width = scrsize.width;
-height = scrsize.height; }
+var height=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+var width=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 if (width<400)
        {
        width=1024;



Решение 2:

Вообще не учитывать ширину окна/монитора, а просто задать смещение от правого края:


Код:

diff --git a/index.html b/index.html
index 8a1b4aa..a50cccf 100644
--- a/index.html
+++ b/index.html
@@ -121,24 +121,13 @@ function enter_click(e) {
 </td></tr></table>
 </td>
 <td height=483 background="http://d1.magegame.ru/mainstena1.jpg"><img src=http://d.magegame.ru/x.gif width=1 height=3></td></tr></table>
-<script>
-var height=0;var width=0;
-if (self.screen) { // for NN4 and IE4
-width = screen.width
-height = screen.height}
-else
-if (self.java) { // for NN3 with enabled Java
-var jkit = java.awt.Toolkit.getDefaultToolkit();
-var scrsize = jkit.getScreenSize();
-width = scrsize.width;
-height = scrsize.height; }
-if (width<400)
-   {
-   width=1024;
-   height=768;
-   }
-document.write("<span style='position: absolute; left: "+(width-348)+"; top: 225'><img border='0' src='http://d1.magegame.ru/maintlang0.gif'></span><span style='position: absolute; left: "+(width-384)+"; top: 17'><img border='0' src='http://d1.magegame.ru/mainglang0.gif'></span>");
-</script>
+<span style='position: absolute; right: 230; top: 225'>
+   <img border='0' src='http://d1.magegame.ru/maintlang0.gif'>
+</span>
+<span style='position: absolute; right: 190; top: 17'>
+   <img border='0' src='http://d1.magegame.ru/mainglang0.gif'>
+</span>
+
 <table width=100% border=0 cellspacing=0 cellpadding=0>
 <tr><td height=8 align=top background="http://d1.magegame.ru/mainrazd1.jpg"><img src=http://d.magegame.ru/x.gif width=1 height=5></td></tr>
 
@@ -168,9 +157,7 @@ document.write("<span style='position: absolute; left: "+(width-348)+"; top: 225
 <input type=hidden name=mysecure value='' id=idmysecure>
 <input type=hidden name=antihack value="oqZTKG04FjRC">
 
-<script>
-document.write("<span style='position: absolute; left: "+(width-242)+"; top: 398'>");
-</script>
+<span style='position: absolute; right: 242; top: 398'>
 <table border=0 cellspacing=0 cellpadding=0 height=86><tr><td valign=top>
 <input class=itext1 type=text size=10 name=mynick ><br>
 <input class=itext1 type=password size=10 name=pass value=""> <a style='color:#999999;TEXT-DECORATION: none! important' href=javascript:KeypadShow() onclick="this.blur();">k</a><br>
@@ -242,9 +229,7 @@ return keyTable;
 }
 </SCRIPT>
 
-<script>
-document.write("<span style='position: absolute; left: "+(width-292)+"; top: 484'>");
-</script>
+<span style='position: absolute; right: 292; top: 484'>
 <span style='font-size:8pt'><a href="http://magegame.ru/login.php?c=reg"><font color='#999999'><b>Registration</b></font></a></span> <input style="height:17px;width:32px;font-size:7pt;background-color: #999999;border: 1px double #666666;" type=submit value='Enter' onclick='return enter_click(event)'></form>
 </span>
 
Вернуться к началу
Гость In






СообщениеДобавлено: Пн, 16 Апр 2018 9:59    Заголовок сообщения: Ответить с цитатой

Это делается css-атрибутами
Как и сказал eifersucht, вместо left можно указать right и просто правильно подвигать три блока (картинка воина+мага, картинка цепей и таблички и форма входа)
https://i.imgur.com/IYK4oPq.png
Вернуться к началу
Показать сообщения:   
Начать новую тему   Ответить на тему    Список форумов Воины и Маги -> Технический Часовой пояс: UTC + 3
Страница 1 из 1

 
Перейти:  
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах

Rambler's Top100

Powered by phpBB © 2001, 2005 phpBB Group

Воины и Маги (c) Олег Белокопытов, http://magegame.ru, 2005-2024 г. E-Mail: admin@magegame.ru