Witam - proszę o pomoc. Stronę robiłem w rozdzielczości 1440 x 900 i zauważyłem, że na innej rozdzielczości wszystko się rozjeżdza, divy przesuwają się w prawą stroną psując cały efekt graficzny strony. Proszę o pomoc aby wszystko wyświetlało się ładnie przy różnych rozdzielczością - podejrzewam, że problem tkwi w stylach css.
Strona jeszcze nie jest umieszczona na serwerze.
Kod CSS:
body, div, p, img, h1, h2, h3, h4, h5, h6, ul, li {
border: 0px;
margin: 0px;
padding: 0px;
}
body {
background:url('Layer-1.png');
background no-repeat;
text-align: center
font-family: Geneva, Arial, Helvetica, sans-serif;
text-align: left;
font-size: small;
margin: 0 auto 0 auto;
width: 800px;
}
#Layer-1 {
position: absolute;
left: +0px;
top: +0px;
width: 1024px;
height: 1083px;
z-index: 1;
}
#Layer-2 {
position: static;
left: 0px;
top: 0px;
z-index: 2;
}
#Layer-3 {
position: absolute;
left: 500px;
top: 400px;
width: 450px;
height: 255px;
z-index: 3;
background-image: url('layer-3.png');
}
#menu {
list-style-type: none;
display: block;
}
#menu li {
display: block;
}
#menu li a {
text-decoration: none;
display: block;
background: transparent none center no-repeat;
}
#menu li a.onas {
display:block;
position: absolute;
left: 550px;
top: 360px;
width: 106px;
height: 28px;
z-index: 4;
background-image: url('layer-4.png');
}
#menu li a.onas:hover {
display:block;
position: absolute;
left: 550px;
top: 360px;
width: 106px;
height: 28px;
z-index: 5;
background-image: url('layer-5.png');
}
#menu li a.menu {
display:block;
position: absolute;
left: 675px;
top: 352px;
width: 111px;
height: 29px;
z-index: 6;
background-image: url('layer-6.png');
}
#menu li a.menu:hover {
display:block;
position: absolute;
left: 675px;
top: 352px;
width: 111px;
height: 29px;
z-index: 7;
background-image: url('layer-7.png');
}
#menu li a.galeria {
display:block;
position: absolute;
left: 800px;
top: 359px;
width: 117px;
height: 28px;
z-index: 8;
background-image: url('layer-8.png');
}
#menu li a.galeria:hover {
display:block;
position: absolute;
left: 800px;
top: 359px;
width: 117px;
height: 28px;
z-index: 9;
background-image: url('layer-9.png');
}
#menu li a.kontakt {
display:block;
position: absolute;
left: 328px;
top: 513px;
width: 128px;
height: 63px;
z-index: 10;
background-image: url('layer-10.png');
}
#menu li a.kontakt:hover {
display:block;
position: absolute;
left: 328px;
top: 513px;
width: 128px;
height: 63px;
z-index: 11;
background-image: url('layer-11.png');
}
#menu li a.promocje {
display:block;
position: absolute;
left: 928px;
top: 668px;
width: 143px;
height: 51px;
background-image: url('layer-12.png');
}
#menu li a.promocje:hover {
display:block;
position: absolute;
left: 928px;
top: 668px;
width: 143px;
height: 51px;
z-index: 13;
background-image: url('layer-13.png');
}
Z góry dzięki za pomoc.
