Forum PHP.pl > [CSS][HTML]Zmiana rozmiaru okna

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML]Zmiana rozmiaru okna - zachowanie się div'ów

weisuw

31.10.2011, 14:28:09

Kolejność przesuwania się divów.

Witam. Problem może powszechny, ale nie znalazłem nic w internecie. Mam stronę z 3 divami. Pierwszy ma float ustawiony na left, drugi right, trzeci jest wyśrodkowany, pomiędzy nimi (margin:auto).
Problem pojawia się przy pomniejszaniu okna przeglądarki (bądź zmianie rozdzielczości). Nie chciałbym aby divy na siebie nachodziły, więc gdy wszystke nie mieszczą się już w widoku okna - jedno z nich jest przesuwane na spód. Słusznie.
Chciałbym jedynie zmienić kolejność zanikania divów:
oczekiwania: najpierw pozbywam się tego po prawej, potem lewego a na końcu środkowego.
rzeczywistość: teraz to środkowy znika jako pierwszy,potem prawy, na końcy lewy

zależy mi by środkowy był przesuwany jako ostatni/w ogóle!

Kod:

CSS:

[HTML] pobierz, plaintext 
#lewy {
	display:block;
	width: 100px;
	height:550px;
	float:left;
	margin-bottom:20px;
}
#środkowy {
	display:block;
	width:550px;
	height:550px;
	margin: auto;
	margin-top:20px;
}
#prawy {
	display:block;
	width: 100px;
	height:550px;
	float:right;
	margin-bottom:20px;
}
[HTML] pobierz, plaintext

HTML:

[HTML] pobierz, plaintext 
<div id="lewy">
...
</div>
<div id="prawy">
...
</div>
<div id="środkowy">
 
</div>
[HTML] pobierz, plaintext

Mam nadzieję, że da się to jakoś rozwiązać, dzieki za pomoc

Damonsson

31.10.2011, 16:10:28

Ciężka sprawa, nic mi nie przychodzi do głowy w samym css. Ale może znajdzie się ktoś mądrzejszy, ot takie wyzwanie

A tak z ciekawości, po co Ci to?

lobopol

31.10.2011, 16:59:37

Opcje właściwie masz 2.
1. Działasz na samym css mając część styli przypisaną do szerokości strony

[HTML] pobierz, plaintext 
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
[HTML] pobierz, plaintext

Wada działa tylko wIE 9+, Firefox 3.6+, Safari 3+, Chrome, Opera 10+
2. Używasz javascriptu do ustalania szerokości strony i gdy osiągnie konkretną szerokość podmieniasz klasę w body od której zależą szerokości i inne style divów z jquery to mniej więcej tak by to wyglądało

[JAVASCRIPT] pobierz, plaintext 
function adjustStyle() {
    width = $(window).width();
    width = parseInt(width);
    if (width < 1270) {
        $("body").attr("class", "width_1");
    } else if ((width >= 1270) && (width < 1555)) {
        $("body").attr("class", "width_2");
    } else if ((width >= 1555) && (width < 2024)) {
        $("body").attr("class", "width_3");
    }  else {
       $("body").attr("class", "width_4");
    }
}
 
$(function() {
    adjustStyle();
    $(window).resize(function() {
        adjustStyle();
    });
 
});
[JAVASCRIPT] pobierz, plaintext

[HTML] pobierz, plaintext 
<style>
#first{
background:#000;
}
#second{
background:#fff;
}
.width_2 #first{
background:#fff;
}
.width_2 #second{
background:#000;
}
etc
</style>
<body class="width_1">
<div id="first">
a
</div>
<div id="second">
b
</div>
</body>
[HTML] pobierz, plaintext

wada bez js nie działa, niektóre przeglądarki przy resize mają chwilowego laga (przy zmniejszaniu szczególnie), ie7 bardzo się ślimaczy przy tym

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.