скрипт корректирующий резиновость слоев

WEB_bobby · June 8, 2007

Вот сайт о котором будет идти речь: www.overMind.ru

Очень серьезная проблема у меня. Я сделал не только резиновость сайта, но а также написал скрипт, который корректирует растягиваемость слоев - для того чтобы сайт не превращался в подобие сосиски на разрешениях больше чем 1024*768. Беда в том, что в IE все отлично срабатывает, как по маслу..

А вот в Мазилле и в Опере при смене разрешения корректируется только верхний этаж пагоды - остальной код корректировки для других этажей как будто начисто игнорируется! Я уже проверял и так и сяк - бестолку.Буду очень благодарен за помощь.

Вот такой CSS :

* {
 margin: 0;
 padding: 0;
 border:0;
 }

body 
{
 background:url(images/fon.gif);
 font: 16px Comic Sans MS;
 color:#C2B9F7;
 min-width:1008px; 
}

#l {
 background-image: url(images/book_anim.gif);
 background-position: left;
 background-repeat: no-repeat;
 height: 170px;
 padding-left: 170px;
 overflow: hidden;
}

#f {
 background-image: url(images/superFon.jpg);
 background-position: center;
 background-repeat: no-repeat;
 height: 140px;
 padding-top: 30px;
 text-align: center;
 overflow: hidden;
 }

#r {
 background-image: url(images/book_anim.gif);
 background-position: right;
 background-repeat: no-repeat;
 height: 170px;
 padding-right: 170px;
 overflow: hidden;
}



#X1_f {
 background-image: url(images/1_m.jpg);
 background-repeat: repeat-x;
 height: 240px;
 overflow: hidden;
}
#X1_lg {
 background-image: url(images/1_ml.jpg);
 background-position: left;
 background-repeat: no-repeat;
 height: 240px;
 overflow: hidden;
}
#X1_rg {
 background-image: url(images/1_mr.jpg);
 background-position: right;
 background-repeat: no-repeat;
 height: 170px;
 padding-top: 70px;
 text-align: center;
 overflow: hidden;
}



#X2_f {
 background-image: url(images/2_m.jpg);
 background-repeat: repeat-x;
 height: 185px;
 overflow: hidden;
}
#X2_lg {
 background-image: url(images/2_ml.jpg);
 background-position: left;
 background-repeat: no-repeat;
 height: 185px;
 overflow: hidden;
}
#X2_rg {
 background-image: url(images/2_mr.jpg);
 background-position: right;
 background-repeat: no-repeat;
 height: 170px;
 padding-top: 15px;
 text-align: center;
 overflow: hidden;
}




#X3_f {
 background-image: url(images/3_m.jpg);
 background-repeat: repeat-x;
 height: 340px;
 overflow: hidden;
}
#X3_lg {
 background-image: url(images/3_ml.jpg);
 background-position: left;
 background-repeat: no-repeat;
 height: 340px;
 overflow: hidden;
}
#X3_rg {
 background-image: url(images/3_mr.jpg);
 background-position: right;
 background-repeat: no-repeat;
 height: 325px;
 padding-top: 15px;
 text-align:center;
 overflow: hidden;
}





#X4_f {
 background-image: url(images/4_m.jpg);
 background-repeat: repeat-x;
 height: 185px;
 overflow: hidden;
}
#X4_lg {
 background-image: url(images/4_ml.jpg);
 background-position: left;
 background-repeat: no-repeat;
 height: 185px;
 overflow: hidden;
}
#X4_rg {
 background-image: url(images/4_mr.jpg);
 background-position: right;
 background-repeat: no-repeat;
 height: 170px;
 padding-top: 15px;
 text-align:center;
 overflow: hidden;
}




#X5_f {
 background-image: url(images/5_m.jpg);
 background-repeat: repeat-x;
 height: 260px;
 overflow: hidden;
}
#X5_lg {
 background-image: url(images/5_ml.jpg);
 background-position: left;
 background-repeat: no-repeat;
 height: 260px;
 overflow: hidden;
}
#X5_rg {
 background-image: url(images/5_mr.jpg);
 background-position: right;
 background-repeat: no-repeat;
 height:245px;
 padding-top: 15px;
 text-align:center;
 overflow: hidden;
}

Вот java script:

 window.onresize = function()
 {

 var q = document.body.clientWidth; 
 if (q <= 1024)
 {
 document.getElementById("X1_1DIV").style.width = "140px";
 document.getElementById("X1_mainDIV").style.width = "728px";
 document.getElementById("X1_F").style.width = "728px"; 
 document.getElementById("X1_2DIV").style.width = "140px"; 

 document.getElementById("X2_1DIV").style.width = "140px"; 
 document.getElementById("X2_mainDIV").style.width = "728px";
 document.getElementById("X2_F").style.width = "728px"; 
 document.getElementById("X2_2DIV").style.width = "140px";

 document.getElementById("X3_1DIV").style.width = "140px"; 
 document.getElementById("X3_mainDIV").style.width = "728px";
 document.getElementById("X3_F").style.width = "728px"; 
 document.getElementById("X3_2DIV").style.width = "140px";


 document.getElementById("X4_1DIV").style.width = "140px";
 document.getElementById("X4_mainDIV").style.width = "728px";
 document.getElementById("X4_F").style.width = "728px";
 document.getElementById("X4_2DIV").style.width = "140px"; 

 document.getElementById("X5_1DIV").style.width = "140px";
 document.getElementById("X5_mainDIV").style.width = "728px";
 document.getElementById("X5_F").style.width = "728px"; 
 document.getElementById("X5_2DIV").style.width = "140px"; 
 }else 
 { 
 q = (q - 408) + 'px';
 document.getElementById("X1_1DIV").style.width = "204px";
 document.getElementById("X1_mainDIV").style.width = q;
 document.getElementById("X1_F").style.width = q; 
 document.getElementById("X1_2DIV").style.width = "204px"; 

 document.getElementById("X2_1DIV").style.width = "204px";
 document.getElementById("X2_mainDIV").style.width = q;
 document.getElementById("X2_F").style.width = q; 
 document.getElementById("X2_2DIV").style.width = "204px"; 

 document.getElementById("X3_1DIV").style.width = "204px";
 document.getElementById("X3_mainDIV").style.width = q; 
 document.getElementById("X3_F").style.width = q; 
 document.getElementById("X3_2DIV").style.width = "204px";

 document.getElementById("X4_1DIV").style.width = "204px";
 document.getElementById("X4_mainDIV").style.width = q;
 document.getElementById("X4_F").style.width = q; 
 document.getElementById("X4_2DIV").style.width = "204px"; 

 document.getElementById("X5_1DIV").style.width = "204px";
 document.getElementById("X5_mainDIV").style.width = q;
 document.getElementById("X5_F").style.width = q;
 document.getElementById("X5_2DIV").style.width = "204px"; 

 }
 } 

 function onLoadCheckWidth()
 {

 var q = document.body.clientWidth; 
 if (q <= 1024)
 {
 document.getElementById("X1_1DIV").style.width = "140px";
 document.getElementById("X1_mainDIV").style.width = "728px";
 document.getElementById("X1_F").style.width = "728px"; 
 document.getElementById("X1_2DIV").style.width = "140px"; 

 document.getElementById("X2_1DIV").style.width = "140px"; 
 document.getElementById("X2_mainDIV").style.width = "728px";
 document.getElementById("X2_F").style.width = "728px"; 
 document.getElementById("X2_2DIV").style.width = "140px";

 document.getElementById("X3_1DIV").style.width = "140px"; 
 document.getElementById("X3_mainDIV").style.width = "728px";
 document.getElementById("X3_F").style.width = "728px"; 
 document.getElementById("X3_2DIV").style.width = "140px";


 document.getElementById("X4_1DIV").style.width = "140px";
 document.getElementById("X4_mainDIV").style.width = "728px";
 document.getElementById("X4_F").style.width = "728px";
 document.getElementById("X4_2DIV").style.width = "140px"; 

 document.getElementById("X5_1DIV").style.width = "140px";
 document.getElementById("X5_mainDIV").style.width = "728px";
 document.getElementById("X5_F").style.width = "728px"; 
 document.getElementById("X5_2DIV").style.width = "140px"; 
 }else 
 { 
 q = (q - 408) + 'px';
 document.getElementById("X1_1DIV").style.width = "204px";
 document.getElementById("X1_mainDIV").style.width = q;
 document.getElementById("X1_F").style.width = q; 
 document.getElementById("X1_2DIV").style.width = "204px"; 

 document.getElementById("X2_1DIV").style.width = "204px";
 document.getElementById("X2_mainDIV").style.width = q;
 document.getElementById("X2_F").style.width = q; 
 document.getElementById("X2_2DIV").style.width = "204px"; 

 document.getElementById("X3_1DIV").style.width = "204px";
 document.getElementById("X3_mainDIV").style.width = q; 
 document.getElementById("X3_F").style.width = q; 
 document.getElementById("X3_2DIV").style.width = "204px";

 document.getElementById("X4_1DIV").style.width = "204px";
 document.getElementById("X4_mainDIV").style.width = q;
 document.getElementById("X4_F").style.width = q; 
 document.getElementById("X4_2DIV").style.width = "204px"; 

 document.getElementById("X5_1DIV").style.width = "204px";
 document.getElementById("X5_mainDIV").style.width = q;
 document.getElementById("X5_F").style.width = q;
 document.getElementById("X5_2DIV").style.width = "204px"; 

 }
 }

Emm · June 8, 2007

А если все тело запихнуть в таблицу?

WEB_bobby · June 8, 2007

А если все тело запихнуть в таблицу?

Зачем?

Emm · June 8, 2007

который корректирует растягиваемость слоев - для того чтобы сайт не превращался в подобие сосиски на разрешениях

Аааа, ясно, недопонял просто.

Там наверное дело в JS, но для чего так извращаться, пользуйте min-width max-width

WEB_bobby · June 8, 2007

Там наверное дело в JS, но для чего так извращаться, пользуйте min-width max-width

min width и макс width не реализуют мое изварщение :lol: . Там по другому у меня задумано.

WEB_bobby · June 8, 2007

Проблема Решена. Ошибка синтаксиса :lol:

Sign In

скрипт корректирующий резиновость слоев

Question

WEB_bobby

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Emm

Link to comment

Share on other sites

WEB_bobby

Link to comment

Share on other sites

Emm

Link to comment

Share on other sites

WEB_bobby

Link to comment

Share on other sites

WEB_bobby

Link to comment

Share on other sites

Обсуждения

Forums

Important Information