Wilhelm

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

Rekomendowane odpowiedzi

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.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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;}

}


Profesjonalne narzędzia do wtryskiwaczy oraz kosmetyki do włosów i paznokci Hurtownia kosmetyczna

http://www.polskie-navi.pl

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

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

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

 

Piaff: .obrazek

Edytowane przez bananasltd

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się

  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników przeglądających tę stronę.