Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Różny wygląd w innych rozdzielczościach
Forum PHP.pl > Forum > Przedszkole
Glarden
Witom. Zrobiłem design do pewnej strony, który możecie zobaczyć tu: http://www.dollarwidurjestnajlepszyminform...a.yoyo.pl/test/ (ja nie jestem Dollarwidur, tylko chwilowo korzystam z tego konta tongue.gif). A tu CSS tego designu: http://www.dollarwidurjestnajlepszyminform...test/sample.css

No i problem wygląda tak: w rodzielczości 1024 na 768 wszystko wygląda spoko. Ale gdy rozdzielczość jest większa (lub mniejsza, ale tym się tak bardzo nie przejmuję, bo prawie nikt już mniejszych nie używa) strona się rozwala. Macie jakiś pomysł jak zrobić, żeby strona wyglądała tak samo, albo chociaż podobnie przy innych rozdzielczościach?
Szunaj85
Są specjalne skrypty, które wykrywają rozdzielczość jaką posiada odwiedzający stronę i w zależności od tego przenosi go na odpowiednią stronę. Ty tylko ustawiasz wygląd strony (chodzi o wymiary) inne dla pliku 1 i inne dla pliku 2 itd. Z podstronami robisz podobnie.
Np taki skrypt.
  1. <?php
  2. <script language="javascript" type="text/javascript"><!--
  3.  
  4. var Wide = screen.width;
  5.  if (Wide <= 640) window.location = "index640.html";
  6. else if (Wide <= 800) window.location = "index800.html";
  7. else if (Wide <= 1024) window.location = "index1024.html";
  8. else  window.location = "index1152.html";
  9. //--></script>
  10. ?>
Glarden
A jakichś innych sposobów nie ma? Tak, że samym CSS-em można by to naprawić? Bo ja mam narzucony plik HTML i jedyne pole manewru to CSS.
Shili
Nie, samym cssem nie rozpoznasz rozdzielczości.
Masz więc do wyboru - albo layout stały w szerokości, albo dopasowujący się procentowo.
drzalek
U mnie wygląda chyba ok, a mam większą rozdzielczość 1280x800, a w przypadku zmniejszenia okna strona się sypie sad.gif, więc wykrywanie rozdzielczości użytkownika nie wiele pomoże. Najlepszym rozwiązaniem byłoby podzielenie strony na dwie pionowe części, najlepiej tabele z dwiema komórami, ale tego pewnie nie chcesz smile.gif choć to chyba rozwiązałoby problem...
Szunaj85
Ponieważ tło masz jednolite mógłbyś faktycznie zrobić dwie tabele, które ustawione były by na 100%. Strona dopasowywała by się do rozdzielczości. Może w każdej rozdzielczości wyglądało by to troszkę inaczej, ale strona nie sypała by się
Shili
Ale zrozumcie, że on nie może zmieniać kodu, jeśli robi alternatywny styl dla csszengarden! Ma do dyspozycji tylko stylowanie już istniejących elementów.
Zresztą layoutów nie robi się na tabelach :/

Zawsze dla mniejszych rozdzielczości możesz ustawić overflow: hidden;
Co prawda użre Ci to kawałek obrazka, ale nie wywali części strony na sam dół.

Ogólnie można też nadać ustaloną szerokość containerowi. Wtedy co najwyżej pokaże się pasek przewijania, ale nic nie będzie skakać.
drzalek
A jak ustawi rozmiary tabeli w % to czy przypadkiem nie wróci do punktu wyjścia tylko z dwiema tabelami. Problem nakładania się na siebie elemntów lewej stony na elementy prawej (tak jak graficznie jest podzielona strona) zniknie, ale będą się na siebie nakładać elementy z poszczególnych tabel czyli np to logo css i zielone guziczki. Moim zdaniem trzeba byłoby ustawić stałą szerokość komórki z lewej strony, tabele dać na 100% a prawą komórkę zostawić w spokoju, bo tam się akurat nic nie dzieje.

Acha, no to jak nie może zmieniać kodu to z tabelkami lipa sad.gif
Trzeba chyba wymienić te pozycje absolutne, może poustawiać jakieś marginesy dla poszczególnych bloków i rozmieszczać elemnty względem innych obiektów, zamienić jednostkę px na coś innego, bo przy px się sypie zawsze przy zmianie rozdzielczości, chyba najlepsza jest jednostka wg czcionki, nie pamietam skrótu wstydnis.gif
Glarden
Dzięki wszystkim za pomoc - nauczyłem się sporo przez to, ale że nie mogę zmienić HTML-a, to wykorzystałem pomysł Shiliego, nadałem containerowi stałą szerokość (i tak musiałem trochę zmienić układ strony w CSS, ale nie za dużo). Teraz jeszcze obrazek tytułowy stroi fochy, ale myślę, że jak trochę nad tym pomyślę, to naprawię. Dzięki raz jeszcze!
.radex
Co Wy tutaj za głupoty opowiadacie smile.gif Da się za pomocą CSS'a tongue.gif Ale niestety tylko Opera 9.50 i (chyba) WebKit potrafią to obsłużyć.

Kod
@media screen and (min-width:1200px)
{
   ...
}


btw.
Cytat
Shiliego
to jest kobieta tongue.gif
Shili
@up
Na założenia csszengarden się nie da, a o ten serwis jak zrozumiałam chodzi.

ps. Potwierdzam, że jestem kobietą ^^
I jak na kobietę przystało wracam oglądać mecz tongue.gif
Glarden
O kurde. Przepraszam panią, jakieś otępienie mnie ostatnio ogarnia tongue.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.