pozycjonowanie rozdzielczość Pozycjonowanie całkowicie statyczne. Problem z określaniem rozdzielczości i szerokości okna

[Wilhelm]

Cześć.Mam problem. Robię stronę.Wszystko jest w kontenerze,na tle którego jest obrazek.Na tym obrazku w odpowiednich miejscach są divy(odnośniki). Tylko że te odnośniki musza być w tych samych miejscach niezaleznie od rozdzielczości witryny.

Kod w uproszczeniu wyglada tak:

<div class="container" style="background-image: url(obrazek.jpg)">

  <div id="1">...</div>

     <div id="obrazek"> W środku tego diva jest obraz do którego dopasowuję odnośniki.Ten div jest po to żeby miec pozycje wyjściową do pozycjonowania odnośników</div>

 <div id="2">...</div>

</div>

 

Te trzy divy zajmują 100% szerokości. div="obrazek" w swoich ramach zawsze w ten sam sposób musi mieścić obrazek,żeby odnośniki zawsze leżały tak samo.

Pozycjonuje to dla każdej rozdzielczości ręcznie. I tu jest problem. Robię to tym sposobem:

@media (min-width: 1024px) and (min-height: 768px) {
 .container {width:1024px; height: 768px;}
 .div1   {
     width: 19%;
}
.obrazek   {
    width: 60.5%;
}
.div2    {
    width: 20.5%;
}
}

Problem jest taki,że zapewne okno w którym jest moja strona ma inne wymiary niż rozdzielczość ekranu. I tu się rodzi moje pytanie: w jaki sposób obliczyć jakie wartości powinny być tutaj: @media (min-width: 1024px) and (min-height: 768px)

i tutaj :  .container {width:1024px; height: 768px;}

Oraz przy pomocy czego mógłbym sprawdzać czy działa poprawnie?

Dodam że wszystko póki co robię offline. Za pierwszym razem wszystko ustawiłem wg. narzędzia chrome,jednak jak widac,to nie działa. Wpisywałem różne rozdzielczości w narzędzie dla programistów i pod to ustawiałem wszystko. Jest może jakiś kalkulator rozdzielczości i okna strony? Próbowałem się t

akże posługiwać wtyczką "Resolution test",ale także z marnym rezultatem.

 

 

Dodam tylko że jeśli ustawię np.rozdzielczosć monitora 800x600 i zacznę edytować część która jest dla rozdzielczości 800x600 to nic się nie dzieje.

[netprogs.pl]

Próbowałeś pozycjonować nie static tylko absolute? Div nadrzędny powinien mieć relative i twoje elementy które chcesz w stałych miejscach - absolute. W firefox też można sprawdzać rodzielczości Ctrl + Shift+ M

[Sagitario]

Masz błędy w kodzie, ID może być tylko jedno na stronę czyli mając 3 elementy musisz dać class.
Wpisujesz ID a w style dodajesz class

<div id="1">...</div>

 .div1   {
     width: 19%;
} 

Nie musisz nic obliczać

@media (min-width:480px) {

.container{width:470px;}

}

@media (min-width:769px) {

.container{width:760px;}

}

@media (min-width:1024px) {

.container{width:1000px;}

}

[bananasltd]

nie używaj sztucznego skalowania obrazków

(.obrazek {width: 60.5%;} ) 

zmiana wielkości obrazka powinna być przed wyrenderowaniem strony (srcset na przykład), bo to ma wpływ później na szybkość wczytywania - lazy load scrset'a ma chyba - zatem wystarczyłoby wcześniej przewidzieć wielkości thumbnailsów i masz to.

 

scrset np.

https://css-tricks ( kropka ) com/responsive-images-youre-just-changing-resolutions-use-srcset/

 

div static, absolute, relative

https://www.barelyfitz( com )/screencast/html-training/css/positioning/

 

Piaff: .obrazek