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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 09.12.2013, 23:27   #1
DJTreeno
Форумчанин
 
Регистрация: 09.06.2011
Сообщений: 146
Лампочка Масштабирование всей страницы целиком

Други умоляю помогите!!!
Я уже вторую неделю мозк ломаю - ничего не смысля в СSS и HTML, но понял вот что:
1) У меня на странице все картинки и поля расположены абсолютно и в пикселях;
2) MediaQures не подходит - приходиться все переписывать;
3) Сайт моделировал в WebPageMaker

Неужели нельзя вставить где-то код (подозреваю, что на JAVA), чтобы при различных разрешениях браузера страница масштабировалась полностью (все сразу) так как если бы мы зажали сtrl + крутанули колесико в зависимости от разрешения браузера. Или другими словами если мы тянем за угол страницы уменьшая ее размер, то все содержимое пропорционально уменьшается.

Поставьте на путь истинный слепого чайника!

Вот код:

Код HTML:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta name="keywords" content="Пицца, google, yandex, rambler, meta, доставка, ресторан, кафе">
<meta http-equiv="content-type" content="text/html; charset=1251">
<meta name="author" content="DJTreeno">
<meta name="generator" content="Web Page Maker">
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>

<style type="text/css">
a.style1:link{color:#5B2C1C;text-decoration: none;}
a.style1:visited{color:#5B2C1C;text-decoration: none;}
a.style1:hover{color:#FF6600;text-decoration: none;}
a.style1:active{color:#5B2C1C;text-decoration: none;}
</style>

<style type="text/css">
div#container
{
	position:relative;
	width: 1721px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align:left; 
}
body {text-align:center;margin:0}
</style>

</head>
<body bgColor="#5B2C1C">
<div id="container">
<div id="g_image1" style="position:absolute; overflow:hidden; left:260px; top:0px; width:1200px; height:1800px; z-index:0"><img src="images/Задний фон.png" alt="" title="" border=0 width=1200 height=1800></div>

<div id="g_image2" style="position:absolute; overflow:hidden; left:260px; top:460px; width:1200px; height:340px; z-index:1"><img src="images/Шапка.png" alt="" title="" border=0 width=1200 height=340></div>

<div id="g_marquee1" style="position:absolute; overflow:hidden; left:260px; top:800px; width:1201px; height:29px; z-index:2">
<marquee width="1201" height="29">
<div class="wpmd">
<div><font face="Georgia" class="ws14"><B><I>Мы рады приветствовать Вас в сети ресторанов!!!</I></B></font></div>
</div></marquee>
</div>

<div id="g_text6" style="position:absolute; overflow:hidden; left:1260px; top:420px; width:200px; height:40px; z-index:3">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="contacts.html" title="" class="style1">Контакты</a></I></B></font></div>
</div></div>

<div id="g_text5" style="position:absolute; overflow:hidden; left:1060px; top:420px; width:200px; height:40px; z-index:4">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="stock.html" title="" class="style1">Акции</a></I></B></font></div>
</div></div>

<div id="g_text4" style="position:absolute; overflow:hidden; left:860px; top:420px; width:200px; height:40px; z-index:5">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="restoran.html" title="" class="style1">О нас</a></I></B></font></div>
</div></div>

<div id="g_text3" style="position:absolute; overflow:hidden; left:660px; top:420px; width:200px; height:40px; z-index:6">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="delivery.html" title="" class="style1">Доставка</a></I></B></font></div>
</div></div>

<div id="g_text2" style="position:absolute; overflow:hidden; left:460px; top:420px; width:200px; height:40px; z-index:7">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="menu.html" title="" class="style1">Меню</a></I></B></font></div>
</div></div>

<div id="g_text1" style="position:absolute; overflow:hidden; left:260px; top:420px; width:200px; height:40px; z-index:8">
<a href="index.html"><div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="index.html" title="" class="style1">Главная</a></I></B></font></div>
</div></a></div>

</div>

</body>
</html>

Последний раз редактировалось Вадим Мошев; 29.07.2015 в 15:28.
DJTreeno вне форума Ответить с цитированием
Старый 10.12.2013, 11:42   #2
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

нет таких решений волшебных. А резиновая верстка, или например адаптивный дизайн - вещь не такая простая и однозначно требует полную переверстку а чаще и редизайна сайта
ADSoft вне форума Ответить с цитированием
Старый 10.12.2013, 12:45   #3
DJTreeno
Форумчанин
 
Регистрация: 09.06.2011
Сообщений: 146
По умолчанию

Этого не может быть! Неужели нельзя отследить какое разрешение браузера и выставить соответствующий масштаб средствами браузера - это должно быть.
Аналогию проведу с макросами экселя и верда - записать это действие в макрос (ctrl+колесико) и получить код, а дальше прописать условие. Не может быть, что нельзя управлять браузерным масштабированием. Ведь не требуется, чтобы блок под блок заходил, а просто как отдаляется и приближается.

Последний раз редактировалось DJTreeno; 10.12.2013 в 12:47.
DJTreeno вне форума Ответить с цитированием
Старый 10.12.2013, 13:11   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Код:
document.body.clientWidth
вернет ширину окна в пикселях, развлекайтесь =)

но, делается это отнюдь не так, а через грамотную верстку, о чем ADSoft и поведал ранее.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 10.12.2013, 13:19   #5
DJTreeno
Форумчанин
 
Регистрация: 09.06.2011
Сообщений: 146
По умолчанию

Вот как получить размер окна:

Код:
 function  getPageSize(){
           var xScroll, yScroll;

           if (window.innerHeight && window.scrollMaxY) {
                   xScroll = document.body.scrollWidth;
                   yScroll = window.innerHeight + window.scrollMaxY;
           } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
                   xScroll = document.body.scrollWidth;
                   yScroll = document.body.scrollHeight;
           } else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){ // Explorer 6 strict mode
                   xScroll = document.documentElement.scrollWidth;
                   yScroll = document.documentElement.scrollHeight;
           } else { // Explorer Mac...would also work in Mozilla and Safari
                   xScroll = document.body.offsetWidth;
                   yScroll = document.body.offsetHeight;
           }

           var windowWidth, windowHeight;
           if (self.innerHeight) { // all except Explorer
                   windowWidth = self.innerWidth;
                   windowHeight = self.innerHeight;
           } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                   windowWidth = document.documentElement.clientWidth;
                   windowHeight = document.documentElement.clientHeight;
           } else if (document.body) { // other Explorers
                   windowWidth = document.body.clientWidth;
                   windowHeight = document.body.clientHeight;
           }

           // for small pages with total height less then height of the viewport
           if(yScroll < windowHeight){
                   pageHeight = windowHeight;
           } else {
                   pageHeight = yScroll;
           }

           // for small pages with total width less then width of the viewport
           if(xScroll < windowWidth){
                   pageWidth = windowWidth;
           } else {
                   pageWidth = xScroll;
           }

           return [pageWidth,pageHeight,windowWidth,windowHeight];
    }
Дальше как это применить? Помогите плиз с синтаксисом трабла!

Последний раз редактировалось Вадим Мошев; 29.07.2015 в 15:31.
DJTreeno вне форума Ответить с цитированием
Старый 10.12.2013, 13:35   #6
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

Если не понимаете - лучше не применять. Трабла не с синтаксисом а пониманием ))))
Изучайте HTML, CSS, JS и придет вам и понимание и синтаксис (который кстати в интернете посмотреть - раз плюнуть)
ADSoft вне форума Ответить с цитированием
Старый 10.12.2013, 14:08   #7
DJTreeno
Форумчанин
 
Регистрация: 09.06.2011
Сообщений: 146
По умолчанию

Не знаю не знаю

Вот что уже нарыл:

/* HTML*/

Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#main").height("100%").width("100%");  /* Основная часть, в которой находятся все элементы */
$("#left").height("100%").width("300px"); /* Левый блок навигации */
$("#center").height("100%").width($("#main").width()-300); /* Центральная часть */
})

/*  Скрипт который при изменении масштабирования, пересчитывает все размеры */
$(window).bind('resize',function() {
$("#main").height("100%").width("100%");  
$("#left").height("100%").width("300px");
$("#center").height("100%").width($("#main").width()-300);
})
</script>
<body>
<div id="main">1
<div id="left">2
</div>

<div id="center">3
</div>
</div>
</body>
</html>
Только как это прикрутить к моему?

я почти рядом теперь надо понять как правильно передать в viewport scale

Последний раз редактировалось Вадим Мошев; 29.07.2015 в 15:32.
DJTreeno вне форума Ответить с цитированием
Старый 10.12.2013, 22:19   #8
DJTreeno
Форумчанин
 
Регистрация: 09.06.2011
Сообщений: 146
По умолчанию

Задача решена!

Для себя запишу решение от Лубышева!

Код:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
bra=0;
function resize()
{
bra = document.body.clientWidth;
bra = bra/1600;
$("#container").css("transform", "scale("+bra+")");
}

$(document).ready(function(){
$(window).resize(function() { resize(); });
        resize();
});
</script>


Для себя пометку сделаю
Код #container должен быть именно такой:

<style type="text/css">
div#container
{
position:relative;
width: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: auto;
text-align:left;
}
body {text-align:center;margin:0}
</style>

Последний раз редактировалось Вадим Мошев; 29.07.2015 в 15:54.
DJTreeno вне форума Ответить с цитированием
Старый 10.12.2013, 22:22   #9
DJTreeno
Форумчанин
 
Регистрация: 09.06.2011
Сообщений: 146
По умолчанию

Итого получили:

Код:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
bra=0;
function resize()
{
bra = document.body.clientWidth;
bra = bra/1600;
$("#container").css("transform", "scale("+bra+")");
}

$(document).ready(function(){
$(window).resize(function() { resize(); });
        resize();
});
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta name="keywords" content="Пицца, google, yandex, rambler, meta, доставка, ресторан, кафе">
<meta http-equiv="content-type" content="text/html; charset=1251">
<meta name="author" content="DJTreeno">
<meta name="generator" content="Web Page Maker">
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>

<style type="text/css">
a.style1:link{color:#5B2C1C;text-decoration: none;}
a.style1:visited{color:#5B2C1C;text-decoration: none;}
a.style1:hover{color:#FF6600;text-decoration: none;}
a.style1:active{color:#5B2C1C;text-decoration: none;}
</style>

<style type="text/css">
div#container
{
	position:relative;
	width: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	text-align:left; 
}
body {text-align:center;margin:0}
</style>

</head>
<body bgColor="#5B2C1C">
<div id="container">
<div id="g_image1" style="position:absolute; overflow:hidden; left:260px; top:0px; width:1200px; height:1800px; z-index:0"><img src="images/Задний фон.png" alt="" title="" border=0 width=1200 height=1800></div>

<div id="g_image2" style="position:absolute; overflow:hidden; left:260px; top:460px; width:1200px; height:340px; z-index:1"><img src="images/Шапка.png" alt="" title="" border=0 width=1200 height=340></div>

<div id="g_marquee1" style="position:absolute; overflow:hidden; left:260px; top:800px; width:1201px; height:29px; z-index:2">
<marquee width="1201" height="29">
<div class="wpmd">
<div><font face="Georgia" class="ws14"><B><I>Мы рады приветствовать Вас в сети ресторанов Скорини!!!</I></B></font></div>
</div></marquee>
</div>

<div id="g_text6" style="position:absolute; overflow:hidden; left:1260px; top:420px; width:200px; height:40px; z-index:3">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="contacts.html" title="" class="style1">Контакты</a></I></B></font></div>
</div></div>

<div id="g_text5" style="position:absolute; overflow:hidden; left:1060px; top:420px; width:200px; height:40px; z-index:4">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="stock.html" title="" class="style1">Акции</a></I></B></font></div>
</div></div>

<div id="g_text4" style="position:absolute; overflow:hidden; left:860px; top:420px; width:200px; height:40px; z-index:5">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="restoran.html" title="" class="style1">О нас</a></I></B></font></div>
</div></div>

<div id="g_text3" style="position:absolute; overflow:hidden; left:660px; top:420px; width:200px; height:40px; z-index:6">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="delivery.html" title="" class="style1">Доставка</a></I></B></font></div>
</div></div>

<div id="g_text2" style="position:absolute; overflow:hidden; left:460px; top:420px; width:200px; height:40px; z-index:7">
<div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="menu.html" title="" class="style1">Меню</a></I></B></font></div>
</div></div>

<div id="g_text1" style="position:absolute; overflow:hidden; left:260px; top:420px; width:200px; height:40px; z-index:8">
<a href="index.html"><div class="wpmd">
<div align=center><font face="Georgia" class="ws20"><B><I><a href="index.html" title="" class="style1">Главная</a></I></B></font></div>
</div></a></div>


</div></div>

</div>

</body>
</html>

Последний раз редактировалось Вадим Мошев; 29.07.2015 в 15:55.
DJTreeno вне форума Ответить с цитированием
Старый 12.09.2014, 02:20   #10
arevuare
Новичок
Джуниор
 
Регистрация: 12.09.2014
Сообщений: 1
По умолчанию Работает?

Молодец, чувак! ))) Сам спросил, сам ответил )))
Работает хоть? А то, та же проблема, буду пробовать.
P.S.: Клуб программистов... "нет таких решений" ))). Решения есть всегда! Но одни не хотят, другие не могут.
arevuare вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Масштаб всей страницы как при ctrl+колесико DJTreeno HTML и CSS 3 26.11.2013 08:21
Скачать сайт целиком vlrnk PHP 17 11.08.2011 10:42
изменение номера страницы в Колонтитулах по всей книге Exel DimonJar Microsoft Office Excel 0 09.02.2010 20:12
узнать запрос POST целиком Bendebej PHP 3 05.02.2010 16:25
Вопрос по копированию папок с (и на) ftp целиком. Slavka8800 Работа с сетью в Delphi 2 20.05.2009 21:27