нужна помощь Масштаб Дизайна

[EvoScream 12]

Скажите пожайлусто как сделать автоматический 100% масштаб но только чтобы дизайн меньше был и верстка чтобы не пострадала

[PRLineage 112]

Скажите пожайлусто как сделать автоматический 100% масштаб но только чтобы дизайн меньше был и верстка чтобы не пострадала

Мороки с резинкой очень много, каждый div нужно резинить и настраивать. Советую лучше ширину сделать 980px и потом просто с фоном играть.

[EvoScream 12]

че то так и не понял не мог бы кто поподробнее обьяснить...

вот в общем как я хочу чтобы сайт выглядел :

 

 

 

 

 

 

а не вот так :

[PRLineage 112]

че то так и не понял не мог бы кто поподробнее обьяснить...

вот в общем как я хочу чтобы сайт выглядел :

 

 

 

 

 

 

а не вот так :

лучше код скинь. У тебя в % идет? или в px?

[EvoScream 12]

html, body {
padding:0;
margin:0;
background-color:#1f110a;
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
position:relative;
color:#c48657;
}
input { outline:none; border:none; }
a { color:#333; }
a:hover { text-decoration:none; }
#wrapper {
display: block;
width: 1111px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#absolute #cont1, #cont2, #cont3, #st, #st1, #copyright, #copyright1, #statys, #video, #bgstatys, #start, #forum { position:absolute; }
#bg1 { background-image:url(../images/bg1.jpg); background-repeat:no-repeat; height:250px; background-position:center;}
#bg2 { background-image:url(../images/bg2.jpg); background-repeat:no-repeat; height:423px; background-position:center;}
#bg3 { background-image:url(../images/bg3.jpg); background-repeat:no-repeat; height:500px; background-position:center;}
#bg4 { background-image:url(../images/bg4.jpg); background-repeat:no-repeat; height:530px; background-position:center;}
#cont1 { background:url(../images/con1.png) no-repeat; top:480px; left:80px; height:415px; width:954px; }
#cont2 { background:url(../images/con2.png) no-repeat; top:890px; left:80px; height:415px; width:954px;}
#cont3 { background:url(../images/con3.png) no-repeat; top:1300px; left:80px; height:271px; width:954px;}
#start a{ background:url(../images/startoff.png); height:75px; width:293px; top: 510px; left: 420px; position:absolute; }
#start a:hover{ background:url(../images/starton.png); height:75px; width:293px; top: 510px; left: 420px; position:absolute; }
#video a{ background:url(../images/videooff.png); height:303px; width:437px; top: 750px; left: 570px; position:absolute; }
#video a:hover{ background:url(../images/videoon.png); height:303px; width:437px; top: 750px; left: 570px; position:absolute; }
#statys { background:url(../images/statys.png); height:16px; width:139px; top: 610px; left: 720px; position:absolute; }
/***************************
* lastpost
***************************/
#forum { background:url(../images/forum.png); height:20px; width:153px; top: 1080px; left: 720px; position:absolute; }
#fr { top: 1150px; left: 620px; position:absolute; }
#lastpost {width: 220px;}
#lastpost .stdate {text-align: center; background:url(../images/bgforum.png); height:53px; width:356px; }
#lastpost .stdate a{top:100px; left: 50px; font-size:14px; color:#ffff55; }
#lastpost .sdate {text-align: right; font-size:12px; color:#FFFFFF; }
#lastpost .sdate a{text-align: right; font-size:12px; color:#ffff55; }
/* Menu */
#kn1 a{ background:url(../images/kn1.png); height:28px; width:98px; top: 15px; left: 150px; position:absolute; }
#kn1 a:hover{ background:url(../images/kn11.png); height:28px; width:98px; top: 15px; left: 150px; position:absolute; }
#kn2 a{ background:url(../images/kn2.png); height:28px; width:106px; top: 15px; left: 250px; position:absolute; }
#kn2 a:hover{ background:url(../images/kn22.png); height:28px; width:106px; top: 15px; left: 250px; position:absolute; }
#kn3 a{ background:url(../images/kn3.png); height:28px; width:127px; top: 15px; left: 350px; position:absolute; }
#kn3 a:hover{ background:url(../images/kn33.png); height:28px; width:127px; top: 15px; left: 350px; position:absolute; }
#kn4 a{ background:url(../images/kn4.png); height:28px; width:160px; top: 15px; left: 480px; position:absolute; }
#kn4 a:hover{ background:url(../images/kn44.png); height:28px; width:160px; top: 15px; left: 480px; position:absolute; }
#kn5 a{ background:url(../images/kn5.png); height:28px; width:140px; top: 15px; left: 645px; position:absolute; }
#kn5 a:hover{ background:url(../images/kn55.png); height:28px; width:140px; top: 15px; left: 645px; position:absolute; }
#kn6 a{ background:url(../images/kn6.png); height:28px; width:93px; top: 15px; left: 780px; position:absolute; }
#kn6 a:hover{ background:url(../images/kn66.png); height:28px; width:93px; top: 15px; left: 780px; position:absolute; }
#kn7 a{ background:url(../images/kn7.png); height:28px; width:80px; top: 15px; left: 880px; position:absolute; }
#kn7 a:hover{ background:url(../images/kn77.png); height:28px; width:80px; top: 15px; left: 880px; position:absolute; }
#st{ width:150px; height:auto; top:700px; left:805px; }
#st a { display:block; font: 14px/18px Tahoma, Verdana, sans-serif; color:#ff9900; text-decoration:none; padding:4px 0 0 47px; }
#st a:hover { font-size:14px; text-decoration:underline; }
#st1{ width:150px; height:auto; top:660px; left:800px; }
#st1 a { display:block; font: 14px/18px Tahoma, Verdana, sans-serif; color:#ff9900; text-decoration:none; padding:4px 0 0 47px; }
#st1 a:hover { font-size:14px; text-decoration:underline; }
#copyright { top:1600px; left:430px; color:#fff; }
#copyright a { color:#ffff55; }
#copyright1 { top:1580px; left:450px; color:#fff; }
#copyright1 a { color:#ffff55; }
/***************************
* server status
***************************/
#server { position:absolute; top:655px; left:680px; color:#FFFFFF; }
#bgstatys{ background:url(../images/bgstatys.png); height:98px; width:364px; top: 650px; left: 600px; position:absolute; }
#server .name { text-align: left; }
#server .names { text-align: left; }
#server .onl { text-align: left; }
#server td { padding:3px 0px 0px 10px; height: 16px; text-align:center; padding-bottom:8px; }
/***************************
* news
***************************/
#content { position:absolute; width:450px; overflow: hidden; height:900px; top:600px; left:130px; }
/***************************
* static pages
***************************/
#color{ color:#fff9bc; }
#color a{ color:#fff9bc; }

 

Style

/*
=============================================================
This Skin for STRESS WEB Developed by S.T.R.E.S.S.
File 'engine.css' - Cascading Style Sheet (CSS) Document
Этот файл требуется для каждого шаблона
=============================================================
*/
#error, .error { text-align: center; color: red; font-size: 11px; padding: 10px 0px; }
#noerror, .noerror { text-align: center; color: green; font-size: 11px; padding: 10px 0px; }
.button { margin: 15px 0px 5px 10px; background: #333; color: #ffffff; }
.captcha { height: 22px; }
#mysqlerror { border: 3px double; }
.tdLeft { text-align: left; padding: 5px 0px 5px 10px; width: 60%; font-weight: bold; }
.tdRight { text-align: right; padding: 5px 10px 5px 0px; width: 40%; }
.tabForm .input { width: 120px; border: 1px solid #999; }
.tabForm p { font-size: 14px; font-weight: bold; padding: 15px 0px 20px 0px; }
.description { font-size: 10px; font-weight: normal; }
.descript { padding: 10px; font-size: 11px; font-weight: normal; text-align: justify; }
.swc { font-size: 9px; font-family: Verdana; font-style: italic; }
.swc a { font-size: 10px; font-family: Verdana; font-style: italic; }
/***************************
* ОПРОС НА САЙТЕ
***************************/
#poll {margin-bottom: 20px; padding: 0 5px;}
#poll .ptitle {
text-align: left;
font-weight: bold;
padding: 5px 1px 5px 10px;
}
#poll .pradio {
padding-left: 5px;
}
#poll .panswer {
padding-left: 5px;
}
#poll .pprogress {
padding-left: 5px;
}
#poll .pbutton {
font-size: 10px;
}
/***************************
* page lister
***************************/
#pager {
text-align: center;
margin: 0px;
padding: 0px;
padding-bottom: 2px;
}
#pager a {
text-decoration: none;
color: black;
padding: 1px 5px 1px 5px;
font-size: 11px;
border: none;
background: #999;
}
#pager a:hover {
text-decoration: none;
color: #fff;
padding: 1px 5px 1px 5px;
font-size: 11px;
border: none;
background: #111;
}
#pager a.nopager {
text-decoration: none;
color: #9898ee;
padding: 1px 5px 1px 5px;
font-size: 11px;
border: none;
background: #ccc;
}
/***************************
* Statistic
***************************/
.l2stat td {
text-align: center;
}
.l2stat .l2left {
width: 50%;
text-align: right;
padding-right: 10px;
font-weight: bold;
color: #555555;
}
.l2stat .l2right {
width: 50%;
text-align: left;
padding-left: 10px;
}
.l2title {
text-align: center;
font-weight: bold;
padding-top: 15px;
padding-bottom: 15px;
font-size: 13px;
}
.l2stat .l2rates {
font-size: 11px;
}
#l2servers {text-align: center;}
#l2servers {
height: 20px;
}
#l2servers a {
padding: 0px 10px 0px 10px;
font-size: 13px;
}
#l2servers a.activ {font-weight: bold;}
#l2menu {text-align: center;}
#l2menu a {
padding: 0px 5px 0px 5px;
}
.trRowA {

}
#l2top {
width: 100%;
font-size: 11px;
vertical-align: top;
text-align: center;
}
#l2top th {
height: 32px;
background: #563b2e;
color: #000;
}
#l2top td {
border-bottom: 1px solid #888;
padding: 5px 0px 5px 0px;
}
#l2top .name {
text-align: left;
}
#l2top .male {
color: #5050FF;
}
#l2top .female {
color: #FF4040;
}
#l2top .pvp {
font-weight: bold;
}
#l2top .pk {
color: red;
font-weight: bold;
}
#l2top a {
text-decoration: underline;
}
.l2online {
color: green;
font-weight: bold;
}
.l2offline {
color: fuchsia;
font-weight: bold;
}
/***************************
* Таблица с замками
***************************/
#l2castle {
width: 400px;
text-align: left;
font-size: 11px;
padding: 1px 10px 1px 10px;
}
#l2castle .l2left {
width: 164px;
height: 123px;
text-align: left;
padding: 5px 5px 5px 1px;
}
#l2castle .l2right {
height: 123px;
text-align: left;
padding: 5px 1px 5px 5px;
vertical-align: middle;
}
/***************************
* cabinet
***************************/
.ch_pass td {
height: 25px;
}
.tabProfileMenu a {
padding: 0px 5px 0px 5px;
}
#l2 {
width: 100%;
font-size: 10px;
border: 1px solid rgb(120, 120, 120);
border-collapse: collapse;
margin: 10px 0px;
}
#l2 th {
height: 32px;
color: #000;
border-top: 1px solid rgb(120, 120, 120);
border-bottom: 1px solid rgb(120, 120, 120);
}
#l2 tr {
height: 22px;
vertical-align: middle;
border: 1px solid rgb(120, 120, 120);
}
#l2 td {
padding: 0px 5px 0 5px;
border-bottom: 1px solid rgb(120, 120, 120);
height: 22px;
}
#l2 .serv {
text-align: center;
font-size: 11px;
font-weight: bold;
background: #563b2e;
height: 25px;
}
#l2 .name {
text-align: left;
}
#l2 a {
color: rgb(90, 90, 255);
text-decoration: underline;
font-size: 10px;
}
#l2button {
margin: 2px;
background: #563b2e;
color: #999;
font-size: 10px;
}
/***************************
* Просмотр персонажа									 
****************************/
#l2char {
font-size: 10px;
margin: 10px 1px 5px 1px;
border: 1px solid rgb(120, 120, 120);
border-collapse: collapse;
}
#l2char th {
height: 20px;
padding: 0px;
margin: 0px;
background: #563b2e;
border-collapse: collapse;
border: 1px solid rgb(120, 120, 120);
text-align: center;
}
#l2char td {
height: 20px;
padding: 0px;
margin: 0px;
border-collapse: collapse;
border: 1px solid rgb(120, 120, 120);
text-align: center;
}
#l2char .char {
background: #563b2e;
}
.invent {
background: url('../images/line.gif') repeat-y;
width: 252px;
}
/***************************
* Оформление инвентаря	
***************************/
#l2inventory {
width: 310px;
height: 408px;
margin: 5px;
background: url('../images/other/inventory.png');
vertical-align: top;
background-position: left top;
background-repeat: no-repeat;
padding: 0px;
/*padding: 67px 0px 0px 0px;*/
border: 1px solid transparent;
}
#l2inventory_items {
margin: 67px 0px 0px 20px;
width: 268px;
height: 288px;
overflow: auto;
position: relative;
padding: 1px 0px 0px 2px;
background: url(../images/other/line.gif);
background-repeat: repeat-y;
background-attachment: scroll;
}
img.floated {
float: left;
position: relative;
padding: 0px 4px 4px 0px;
width: 32px;
height: 32px;}
.clearfloat {
clear:both; height:0px;
line-height:0px; visibility: hidden;}
#l2inventory_items .scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0;
left: 0;}
#l2inventory_items .vscrollerbase {
width: 15px;
background-color: white;}
#l2inventory_items .vscrollerbar {
width: 15px;
background-color: black;}
#l2inventory_items .vscrollerbar {
background: #99CBCB url(../images/other/basebarcaps.png) -15px 0px repeat-y;}
#l2inventory_items .vscrollerbar {
padding: 15px;
z-index: 2;}
#l2inventory_items .vscrollerbarbeg {
background: url(../images/other/basebarcaps.png) -45px 0px no-repeat;
width: 15px;
height: 15px !important;}
#l2inventory_items .vscrollerbarend {
background: url(../images/other/basebarcaps.png) -45px -30px no-repeat;
width: 15px;
height: 15px;}
#l2inventory_items .vscrollerbase {
background: #D7EBDF url(../images/other/basebarcaps.png) 0px 0px repeat-y;}
#l2inventory_items .vscrollerbasebeg {
background: url(../images/other/basebarcaps.png) -30px 0px no-repeat;
width: 15px;
height: 15px !important;}
#l2inventory_items .vscrollerbaseend {
background: url(../images/other/basebarcaps.png) -30px -30px no-repeat;
height: 15px;
width: 15px;}
#l2inventory_items .scrollerjogbox:hover {
background: #5E828C url(../images/other/basebarcaps.png) -45px -15px;}
/***************************
* Оформление paperdoll	
***************************/
#l2paperdoll {
width: 310px;
height: 291px;
margin: 5px;
background: url('../images/other/paperdoll.png');
vertical-align: top;
background-position: left top;
background-repeat: no-repeat;
padding: 0px;
border: 1px solid transparent;
}
#l2paperdoll_items {
margin: 75px 0px 0px 30px;
width: 245px;
height: 149px;
position: relative;
}
#l2paperdoll #item {
position: absolute;
width: 32px;
height: 32px;
padding: 0px;
}
#l2paperdoll .hidden{
display:none;
}
#l2paperdoll .lefthair{
margin-left: 0px;
margin-top: 0px;
}
#l2paperdoll .helmet{
margin-left: 39px;
margin-top: 0px;
}
#l2paperdoll .righthair{
margin-left: 78px;
margin-top: 0px;
}
#l2paperdoll .dress{
margin-left: 0px;
margin-top: 38px;
}
#l2paperdoll .top{
margin-left: 39px;
margin-top: 38px;
}
#l2paperdoll .cloak{
margin-left: 78px;
margin-top: 38px;
}
#l2paperdoll .gloves{
margin-left: 0px;
margin-top: 76px;
}
#l2paperdoll .lower{
margin-left: 39px;
margin-top: 76px;
}
#l2paperdoll .bots{
margin-left: 78px;
margin-top: 76px;
}
#l2paperdoll .weapon{
margin-left: 0px;
margin-top: 114px;
}
#l2paperdoll .shield{
margin-left: 78px;
margin-top: 114px;
}
#l2paperdoll .leftearring{
margin-left: 132px;
margin-top: 0px;
}
#l2paperdoll .necklace{
margin-left: 171px;
margin-top: 0px;
}
#l2paperdoll .rightearring{
margin-left: 210px;
margin-top: 0px;
}
#l2paperdoll .leftring{
margin-left: 132px;
margin-top: 38px;
}
#l2paperdoll .ring{
margin-left: 171px;
margin-top: 38px;
}
#l2paperdoll .rightring{
margin-left: 210px;
margin-top: 38px;
}
#l2paperdoll .braslet{
margin-left: 132px;
margin-top: 90px;
}
/***************************
* l2top.ru bonus
***************************/
.voteBlock { padding: 0 15px 15px; text-align: left;  width: 350px; margin: 0 auto;}
#voteTab1 .input { width: 120px; }
#voteTab1 td {padding: 5px; width: 50%;}
/***************************
* la2.mmotop.ru bonus
***************************/
.voteBlock2 { padding: 0 15px 15px; text-align: left; width: 300px; margin: 0 auto;}
.voteBlockErr {text-align: center;}
#voteTab2 .input { width: 120px; }
#voteTab2 td {padding: 5px; width: 50%;}
/***************************
* other
***************************/
.title {
font-size: 14px;
font-weight: bold;
text-align: center;
}
.regForm {width: 300px; margin: 0 auto;}
.regForm p {text-align: center; font-size: 13px; font-weight: bold;}
.regbutton { outline: none; margin: 5px; padding: 3px; background: #333; color: #ffffff; border: none; font-size: 10px; cursor: pointer;}
.regForm .tdLeft { text-align: left; padding: 5px 0px 5px 10px; width: 60%; font-weight: bold;}
.regForm .tdRight { text-align: right; padding: 5px 10px 5px 0px; width: 40%;}
.repassForm {width: 300px; margin: 0 auto;}
.repassForm p {text-align: center; font-size: 13px; font-weight: bold;}
.repassbutton {outline: none; margin:5px; padding:3px; background: #333; color: #ffffff; border: none; font-size: 10px; cursor: pointer;}
.repassForm .tdLeft { text-align: left; padding: 5px 0px 5px 10px; width: 60%; font-weight: bold;}
.repassForm .tdRight { text-align: right; padding: 5px 10px 5px 0px; width: 40%;}
#sexsid label {font-weight: bold;}
#sexchar label {font-weight: bold;}
#changersid label {font-weight: bold;}
#changerchar label {font-weight: bold;}
#swsupport { width: 100%; font-size: 11px; vertical-align: top; text-align: center;}
#swsupport th { height: 32px; color: #000; border-bottom: 2px solid;}
#swsupport td { border-bottom: 1px solid #888; padding: 5px 0px 5px 0px;}
#swsupport2 { width: 100%; font-size: 11px; vertical-align: top; text-align: center; border: 1px solid #AAA; }
#swsupport2 .td1 {border-bottom: 1px solid #222;}
#swsupport2 .td2 {border-bottom: 1px solid #222; padding-left: 5px; border-left: 1px dashed;}
#swsupport2 .trRowA {background: 0;  border-bottom: 1px solid #222;}
#swsupport2 .trRowA2 {padding-left: 5px; border-bottom: 1px solid #222; border-left: 1px dashed #aaa;}

 

Engine

Изменено 23 января, 2014 пользователем EvoScream

[KotBegemot 268]

Мороки с резинкой очень много, каждый div нужно резинить и настраивать. Советую лучше ширину сделать 980px и потом просто с фоном играть.

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

[PRLineage 112]

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

Лично я пользуюсь старыми проверенными, но все же предпочитаю фиксированные сайты