Divy podczas zmieniania rozdzielczości/wielkości okna przesuwają się

pytanie zadane 20 kwietnia 2016 w HTML i CSS przez CzikaCarry Szeryf (75,340 p.)

Problem wygląda następująco: Gdy zmieniam rozdzielczość/wielkość okna to divy się rozjeżdżają (zmieniają swoje położenie) Dobrze widać to na screenshotach:

1. Normalnie otwarte okno, wszystko git!

2.Rozmiar okna zmniejszony/ zmieniona rozdzielczość

Dokładnie widać tu różnicę między tłem strony a tłem diva, a poza tym div zmienił swoją lokalizację!

Jak na to zaradzić? Czy da się jakoś divy przykleić do tła "na stałe"? Oto kod CSS

body
{
	background-image: url("background_img/congruent_pentagon.png");
}
	
#container
{
	position: relative;
	left: 50%;
	width: 1200px;
	height: 1500px;
	margin-left: -600px;
}	

/*...*/

#divwykresu
{
display: block;
margin-top: 100px;
width: 589px;
height: 650px;
text-align: center;
position: absolute;
left:50%;
margin-left:-232px;
top: 1094px;
}

Z góry dzięki za pomoc!

3 odpowiedzi

odpowiedź 20 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

odpowiedź 20 kwietnia 2016 przez Barus Stary wyjadacz (14,120 p.)

Nie wiem czy dobrze zrozumiałem, ale jeśli chcesz, żeby wykres podczas przewijania był cały czas w tym samym miejscu to musisz w "#divwykresu" zamiast "position: absolute" wpisać "position: fixed".

Pozdrawiam!

komentarz 20 kwietnia 2016 przez CzikaCarry Szeryf (75,340 p.)

Nie, nie chodzi mi o to. Chodzi mi o to, że ta strona na innej rozdzielczości wygląda inaczej. Divy się "rozjeżdżają", uciekają na boki, zmieniają położenie. Chcę tego uniknąć, ale nie potrafię :(

odpowiedź 20 kwietnia 2016 przez jajoxd15 Gaduła (3,740 p.)

Position: fixed; daje możliwość utrzymania diva lub jakiegokolwiek elementu w tym samym miejscu.

#divwykresu
{
width: 589px;
height: 650px;
text-align: center;
position: fixed;
left: 232px;
top: 1094px;
}

#container
{
    position: relative;
    margin: 0 auto;
    width: 1200px;
    height: 1500px;
 text-aligin:center;
}

body
{
    background-image: url("background_img/congruent_pentagon.png");
    margin: 0 auto;
    text-aligin: center;
    padding:0;
}

Poza tym ustaw sobie rzeczy związane z tłem http://www.w3schools.com/css/css_background.asp

komentarz 20 kwietnia 2016 przez CzikaCarry Szeryf (75,340 p.)

Nie do końca o to mi chodziło. Nie chcę, aby ten div "chodził" za mną, ale chcę, żeby był "przyklejony do tła", to znaczy, żeby po prostu tam był i nie zmieniał swojego położenia, ponieważ u osoby z inna rozdzielczością ta strona po prostu się "rozdupczy" :D