Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]Zmiana rozmiaru okna - zachowanie się div'ów
weisuw
post 31.10.2011, 14:28:09
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 31.10.2011

Ostrzeżenie: (0%)
-----

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 
  1. #lewy {
  2. 	display:block;
  3. 	width: 100px;
  4. 	height:550px;
  5. 	float:left;
  6. 	margin-bottom:20px;
  7. }
  8. #środkowy {
  9. 	display:block;
  10. 	width:550px;
  11. 	height:550px;
  12. 	margin: auto;
  13. 	margin-top:20px;
  14. }
  15. #prawy {
  16. 	display:block;
  17. 	width: 100px;
  18. 	height:550px;
  19. 	float:right;
  20. 	margin-bottom:20px;
  21. }
[HTML] pobierz, plaintext


HTML:

[HTML] pobierz, plaintext 
  1. <div id="lewy">
  2. ...
  3. </div>
  4. <div id="prawy">
  5. ...
  6. </div>
  7. <div id="środkowy">
  8.  
  9. </div>
[HTML] pobierz, plaintext

Mam nadzieję, że da się to jakoś rozwiązać, dzieki za pomoc smile.gif.
Go to the top of the page
+Quote Post
Damonsson
post 31.10.2011, 16:10:28
Post #2





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

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

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

Ten post edytował Damonsson 31.10.2011, 16:10:41
Go to the top of the page
+Quote Post
lobopol
post 31.10.2011, 16:59:37
Post #3





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----

Opcje właściwie masz 2.
1. Działasz na samym css mając część styli przypisaną do szerokości strony
[HTML] pobierz, plaintext 
  1. <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 
  1. function adjustStyle() {
  2.     width = $(window).width();
  3.     width = parseInt(width);
  4.     if (width < 1270) {
  5.         $("body").attr("class", "width_1");
  6.     } else if ((width >= 1270) && (width < 1555)) {
  7.         $("body").attr("class", "width_2");
  8.     } else if ((width >= 1555) && (width < 2024)) {
  9.         $("body").attr("class", "width_3");
  10.     }  else {
  11.        $("body").attr("class", "width_4");
  12.     }
  13. }
  14.  
  15. $(function() {
  16.     adjustStyle();
  17.     $(window).resize(function() {
  18.         adjustStyle();
  19.     });
  20.  
  21. });
[JAVASCRIPT] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <style>
  2. #first{
  3. background:#000;
  4. }
  5. #second{
  6. background:#fff;
  7. }
  8. .width_2 #first{
  9. background:#fff;
  10. }
  11. .width_2 #second{
  12. background:#000;
  13. }
  14. etc
  15. </style>
  16. <body class="width_1">
  17. <div id="first">
  18. a
  19. </div>
  20. <div id="second">
  21. b
  22. </div>
  23. </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

Ten post edytował lobopol 31.10.2011, 17:03:42


--------------------
pehap.pl - moje portfolio
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 13.06.2025 - 05:12
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn