Ето цсс кода:
* {
margin: 0;
padding: 0;
}
body {
background: #080400 url(../imgs/background.jpg) center 0 repeat-x;
font-family: Georgia, "Georgia", Times, "Times New Roman", serif;
font-size: 14px;
min-width: 930px;
}
a {
color: #412907;
outline: none;
}
a:hover {
text-decoration:none;
}
input, select, textarea {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
}
.clearfix:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
#mainWrapper {
width: 1180px;
position: relative;
margin: 0 auto;
}
#header {
height: 225px;
position: relative;
z-index: 2;
background: url(../imgs/1.png) center 0 no-repeat;
}
#logo {
width: 200px;
height: 171px;
position: absolute;
top: 26px;
left: 600px;
background: url(../imgs/logo.png) no-repeat;
}
#logo .logo a.logoLink {
display: block;
cursor: pointer;
height: 140px;
}
#header .topMenu {
position: absolute;
z-index: 10;
top: 10px;
}
#header .topMenu.left {
right: 200px;
}
#header .topMenu.right {
left: 140px;
}
#header .topMenu.left ul {
list-style: none;
}
#header .topMenu.right ul {
list-style: none;
}
#header .topMenu.left ul li {
float: left;
margin: 0 3px;
}
#header .topMenu.right ul li {
float: left;
margin: 0 3px;
}
#header .topMenu.left ul li a {
position: relative;
display: block;
cursor: pointer;
float: left;
font-size: 12px;
line-height: 12px;
text-decoration: none;
background: #442505;
border: 1px solid #ffd678;
padding: 4px 5px;
color: #ffe7ac;
opacity: 0.8;
text-shadow: 0px 1px 0px #000;
-moz-text-shadow: 0px 1px 0px #000;
-webkit-text-shadow: 0px 1px 0px #000;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: 0px 2px 5px #000;
-moz-box-shadow: 0px 2px 5px #000;
-webkit-box-shadow: 0px 2px 5px #000;
left: -155px;
}
#header .topMenu.left ul li a:hover {
color: #fff;
border-color: #fff;
opacity: 1;
}
#header #resources {
position: absolute;
top: 180px;
left: 360px;
width: 660px;
}
#header #resources ul {
list-style: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
#header #resources ul li {
height: 35px;
line-height: 35px;
width: 70px;
font-size: 12px;
font-weight: bold;
color: #fff;
background-image: url(../imgs0/h_resources.png);
background-repeat: no-repeat;
}
#header #resources ul li.coins a {
color: #fff;
}
#header #resources ul li.gold {
float: left;
background-position: 0 0;
padding: 0 0 0 40px;
margin: 0 10px 0 0;
}
#header #resources ul li.iron {
float: left;
background-position: 0 -35px;
padding: 0 0 0 40px;
margin: 0 10px 0 0;
}
#header #resources ul li.wood {
float: left;
background-position: 0 -70px;
padding: 0 0 0 40px;
margin: 0 10px 0 0;
}
#header #resources ul li.food {
float: right;
background-position: 100% -105px;
padding: 0 40px 0 0;
text-align: right;
margin: 0 0 0 10px;
}
#header #resources ul li.population {
float: right;
background-position: 100% -140px;
padding: 0 40px 0 0;
text-align: right;
margin: 0 0 0 10px;
width: 115px;
}
#bodyWrapper {
width: 100%;
height: 100%;
background-image:url(../imgs/background.jpg);
}
.wrapper
{
position:relative;
overflow:hidden;
width: 1000px;
max-width: 1000px;
min-height:500px;
border: solid 1px red;
margin: auto;
}
#castlegrass {
position: absolute;
width: 570px;
height: 587px;
background-image:url(../imgs/grass.jpg);
top: 335px;
left: 407px;
}
div.mm_head {
position:absolute;
left:135px;
width:642px;
border:1px solid #954A00;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
height:25px;
top: 230px;
margin-left: 240px;
}
div.mm_head img.speaker {
position:absolute;
top:0px;
left:1px;
}
div.mm_write {
text-align:center;
width:45px;
margin-top:2px;
margin-left:645px;
padding:3px;
background-color:#fff;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
div.mm {
overflow:hidden;
color:#000;
font-size:10px;
float:left;
text-align:left;
margin-top:2px;
margin-left:34px;
height:13px;
padding:4px;
width:600px;
color: #C9C9C9;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#sc {
position: absolute;
width: 742px;
height: 631px;
background-image:url(../imgs/scrollbg.gif);
top: 310px;
left: 325px;
}
#givemats {
position: absolute;
top: 265px;
left: 360px;
}
#goldmine {
position: absolute;
width: 100px;
height: 129px;
background-image:url(../imgs/gold_mine.png);
background-repeat: no-repeat;
left: 300px;
}
#ironmine {
position: absolute;
width: 150px;
height: 143px;
background-image:url(../imgs/iron_mine.png);
background-repeat: no-repeat;
top: 140px;
left: 110px;
}
#foodmine {
position: absolute;
width: 100px;
height: 97px;
background-image:url(../imgs/foodmine.png);
background-repeat: no-repeat;
left: 470px;
}
#woodmine {
position: absolute;
width: 140px;
height: 88px;
background-image:url(../imgs/woodmine.png);
background-repeat: no-repeat;
left: 1px;
}
#order {
position: absolute;
width: 130px;
height: 129px;
background-image:url(../imgs/order.png);
background-repeat: no-repeat;
top: 140px;
left: -8px;
}
#housing {
position: absolute;
width: 190px;
height: 141px;
background-image:url(../imgs/housing.png);
background-repeat: no-repeat;
left: 250px;
top: 105px;
}
#market {
position: absolute;
width: 180px;
height: 134px;
background-image:url(../imgs/market.png);
background-repeat: no-repeat;
left: 360px;
top: 250px;
}
#infirmary {
position: absolute;
width: 138px;
height: 139px;
background-image: url(../imgs/infirmary.png);
background-repeat: no-repeat;
left: 140px;
}
#barrack {
position: absolute;
width: 150px;
height: 139px;
background-image:url(../imgs/barrack.png);
background-repeat: no-repeat;
top: 240px;
left: 180px;
}
#stables {
position: absolute;
width: 160px;
height: 116px;
background-image:url(../imgs/stables.png);
background-repeat: no-repeat;
top: 310px;
}
#warehouse {
position: absolute;
width: 100px;
height: 85px;
background-image: url(../imgs/warehouse.png);
background-repeat: no-repeat;
left: 450px;
top: 380px;
}
#smithy {
position: absolute;
width: 70px;
height: 86px;
background-image:url(../imgs/smithy.png);
background-repeat: no-repeat;
left: 460px;
top: 130px;
}
#workshop {
position: absolute;
width: 110px;
height: 86px;
background-image:url(../imgs/workshop.png);
background-repeat: no-repeat;
top: 390px;
left: 220px;
}
#sc2 {
position: absolute;
width: 500px;
height: 206px;
background-image:url(../imgs/smallscrollbg.gif);
top: 373px;
left: 581px;
}
#rightmenu_options {
position: absolute;
width: 211px;
height: 552px;
background-image:url(../imgs/leather.png);
background-repeat: repeat;
border: 2px solid #9B4E00;
border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
left: 337px;
top: 310px;
}
#rightmenu_options_transparent {
position: absolute;
width: 190px;
height: 531px;
background-color: #592D00;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
left: 10px;
top: 10px;
}
#center_text {
position: absolute;
width: 230px;
height: 44px;
background-color: #A77501;
border-radius: 6px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
border: 1px solid #CFCFCF;
left: -9px;
top: 0px;
font-size: 16px;
}
#options_titles {
position: absolute;
width: 480px;
height: 34px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
left: 252px;
background-color: #592D00;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
top: 8px;
}
#options_titles2 {
position: absolute;
width: 480px;
height: 34px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
left: 253px;
background-color: #592D00;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
top: 310px;
left: 460px;
}
#sc3 {
position: absolute;
width: 500px;
height: 680px;
background-image:url(../imgs/smallscrollbg.gif);
top: 365px;
left: 450px;
}
#pic {
position: absolute;
width: 225px;
height: 325px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color: #804000;
}
#pic1 {
position: absolute;
width: 225px;
height: 325px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color: #804000;
left: 260px;
}
#pic2 {
position: absolute;
width: 225px;
height: 325px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color: #804000;
top: 340px;
}
#pic3 {
position: absolute;
width: 225px;
height: 325px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color: #804000;
top: 340px;
left: 260px;
}
#rightmenu_options2 {
position: absolute;
width: 211px;
height: 552px;
background-image:url(../imgs/leather.png);
background-repeat: repeat;
border: 2px solid #9B4E00;
border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
left: 220px;
top: 310px;
}
#rightmenu_options_transparent2 {
position: absolute;
width: 190px;
height: 531px;
background-color: #592D00;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
left: 10px;
top: 10px;
}
#sc4 {
position: absolute;
width: 500px;
height: 680px;
background-image:url(../imgs/smallscrollbg.gif);
top: 315px;
left: 450px;
}
#pic4 {
position: absolute;
width: 225px;
height: 325px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color: #804000;
top: 340px;
left: 520px;
}
#pic5 {
position: absolute;
width: 225px;
height: 325px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color: #804000;
left: 520px;
}
#sc5 {
position: absolute;
width: 500px;
height: 680px;
background-image:url(../imgs/smallscrollbg.gif);
top: 315px;
left: 581px;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
}
#sc6 {
position: absolute;
width: 500px;
height: 380px;
background-image:url(../imgs/smallscrollbg.gif);
top: 315px;
left: 581px;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
}
#pic6 {
position: absolute;
width: 225px;
height: 375px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color: #804000;
left: 140px;
}
#armybutton {
position: absolute;
width: 180px;
height: 22px;
background-color: #A77501;
border-radius: 6px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
border: 1px solid #CFCFCF;
left: 14px;
top: 60px;
font-size: 16px;
}
#armybutton1 {
position: absolute;
width: 180px;
height: 22px;
background-color: #A77501;
border-radius: 6px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
border: 1px solid #CFCFCF;
left: 14px;
top: 120px;
font-size: 16px;
}
#armybutton2 {
position: absolute;
width: 180px;
height: 22px;
background-color: #A77501;
border-radius: 6px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
border: 1px solid #CFCFCF;
left: 14px;
top: 180px;
font-size: 16px;
}
#armybutton3 {
position: absolute;
width: 180px;
height: 22px;
background-color: #A77501;
border-radius: 6px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
border: 1px solid #CFCFCF;
left: 14px;
top: 240px;
font-size: 16px;
}
#armybutton4 {
position: absolute;
width: 180px;
height: 22px;
background-color: #A77501;
border-radius: 6px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
border: 1px solid #CFCFCF;
left: 14px;
top: 300px;
font-size: 16px;
}
#castle {
position: absolute;
width: 570px;
height: 587px;
top: 335px;
left: 407px;
}
#message {
position: absolute;
top: 1px;
}
#down {
position: absolute;
top: 210px;
left: 122px;
}
#sc8 {
position: absolute;
width: 500px;
height: 680px;
background-image:url(../imgs/smallscrollbg.gif);
top: 375px;
left: 450px;
}
#left {
position: absolute;
left: 10px;
}
#sc10 {
position: absolute;
width: 500px;
height: 580px;
background-image:url(../imgs/smallscrollbg.gif);
top: 373px;
left: 581px;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
}
#army {
position: absolute;
width: 350px;
height: 20px;
background-color: #6A3500;
border: 1px solid #FFF;
border-radius: 8px;
-moz-border-radius: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
left: 73px;
}
#blanket {
background-color: #111;
opacity: 0.1;
filter:alpha(opacity=1);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
}
#popUpDiv {
position: fixed;
background-color: #BD8F3F;
width:345px;
height:175px;
z-index: 9002;
border: 1px solid #FFF;
border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
}
#message1 {
position: absolute;
width: 180px;
height: 20px;
background-color:#FFC488;
border: 1px solid #FFF;
border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
left: 70px;
}
#message2 {
position: absolute;
width: 180px;
height: 20px;
background-color:#FFC488;
border: 1px solid #FFF;
border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
left: 70px;
top: 80px;
}
#message3 {
position: absolute;
width: 180px;
height: 20px;
background-color:#FFC488;
border: 1px solid #FFF;
border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
left: 70px;
top: 120px;
}
#message4 {
position: absolute;
width: 180px;
height: 20px;
background-color:#FFC488;
border: 1px solid #FFF;
border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
left: 70px;
top: 160px;
}
#center {
position: absolute;
top: 40px;
left: 10px;
}
#pohod {
position: absolute;
top: 450px;
left: 100px;
}
#sc90 {
position: absolute;
width: 560px;
height: 231px;
background-image:url(../imgs/smallscrollbg1.gif);
top: 373px;
left: 470px;
}
#options_titles3 {
position: absolute;
width: 545px;
height: 34px;
border: 1px solid #CFCFCF;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
left: 252px;
background-color: #592D00;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
top: 8px;
}
#clan_name {
position: absolute;
width: 260px;
height: 20px;
background-color: #804000;
border: 1px solid #BBB;
border-radius: 6px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
top: 25px;
left: 110px;
}
#info {
position: absolute;
width: 260px;
height: 20px;
background-color: #804000;
border: 1px solid #BBB;
border-radius: 6px;
-moz-border-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
top: 65px;
left: 110px;
}
#info1 {
position: absolute;
width: 500px;
height: 600px;
top: 100px;
}
ето сайта в нормално положение:
а ето и в по малък размер как се бъгва :