[HTML][CSS] Divy się rozjeżdzają


(Vorphalac) #1

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.


(Drobok) #2

Nie dziwie się że wszystko się sypie jak wszystko przesuwasz na sztywno. Kod jest do przepisania :slight_smile:


(Vorphalac) #3

To znaczy ? Jakiej metody użyć ?


(Drobok) #4

Przede wszystkim główny div powinien być miejszy niż 1024px. Nie powinieneś używać left / top do pozycjonowania elementów, tylko dla drobnych przesunięć. Przede wszystkim position relative.