Pozycjonowane elementy zmieniają położenie w zależności od wielkości okna przeglądarki

Dla specjalistów Webmastering
#1

Witajcie,

 

Mam malutki problemik. Wypozycjonowałem sobie elementy i w momencie, kiedy przeglądarka jest na pełnym ekranie to wygląda to tak, jak ma, wprawdzie wyciąłem bez tła, ale elementy ułożyłem sobie na środeczku tła i jest OK: http://imgur.com/yJsbyju

 

Niemniej kiedy zmniejszę okno przeglądarki, wszystko nakłada się na siebie i to już nie wygląda jak ma, a dodatkowo widzę, że też nie jest to już na środku tła jak poprzednio, lecz cały układ się rozjechał i elementy ze środka zdryfowały na prawą stronę tła (kiedyś przy tle fixed jak tutaj też miałem, że po zmniejszeniu okna część tła nie skalowała się lecz chowała poza obszar okna): http://imgur.com/3ykhHbc

 

Co chcę osiągnąć - stronę bez zmian, która skaluje się do okna przeglądarki i zachowuje swój układ niezależnie, czy przeglądarka jest w pełnym oknie lub malutkim.

 

CSS:

* {
    margin: 0;
    padding: 0;
}
body {
    background-image: url(img/background.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
}


#kafel-gora-lewo {
    position: fixed;
    display: block;
    padding-top: 7%;
    padding-left: 17%;
}

#kafel-gora-prawo {
    position: fixed;
    display: inline-block;
    padding-top: 7%;
    padding-left: 47%;
}

#kafel-dol-lewo {
    position: fixed;
    display: block;
    padding-top: 22.7%;
    padding-left: 17%;
}    

#kafel-dol-prawo {
    position: fixed;
    display: block;
    padding-top: 21.4%;
    padding-left: 47%;
    
}
#2

Poczytaj do czego służy pozycjonowanie fixed to będzie jasne dlaczego tak jest :wink:

 

Elementów się nie pozycjonuje a układa w kodzie jak mają leżeć.

#3

Problem wynika oczywiście z mojej niewiedzy, to prawda. Problem w tym, że na absolute chociażby jest to samo a relative w ogóle posyła elementy to w dół czy inne części.

 

Oczywiście nie wymagam gotowego rozwiązania, wystarczy choćby mała wskazówka jak zrobić, aby po ręcznym zmniejszeniu okna przeglądarki, strona mi się nie rozsypywała. Chwilowo zastopowało mi to pisanie strony, bo nie wiem jak pisać dalej, aby nie powielać problemu.

#4

Np. coś takiego:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Language" content="pl" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kwadraty</title>
<style>
* { margin:0; padding:0; }
body, html { background:#000000; width:100%; height:100%; }
div { width:48%; height:46%; margin:1%; }
.jeden1 { float:left; background:#A300AB; }
.jeden2 { float:right; background:#DB562D; }
.dwa1 { float:left; background:#DB562D; }
.dwa2 { float:right; background:#A300AB; }
</style>
</head>

<body>
<div class="jeden1">jeden</div><div class="jeden2">dwa</div>
<div class="dwa1">trzy</div><div class="dwa2">cztery</div>
</body>
</html>
#5

Dziękuję za pomoc. Próbowałem przerabiać nieco kod, aby jednak zamiast divóv z kolorami były grafiki jak w pierwotnym zamiarze (potem dojdą na grafikach gradienty itd). Niemniej postaram się cały czas zmęczyć Twój kod i wyciągnąć z niego wnioski.

 

Aktualnie na szybko postawiłem to na tabelce, ale problemu na przyszłość mi to nie rozwiąże, szczególnie, że dziś www budowane na tabelkach to nieco echo przeszłości.

 

Raz jeszcze dziękuję za poświęcony czas i pomoc :slight_smile: