Elektroda.pl
Elektroda.pl
X

Wyszukiwarki naszych partnerów

Wyszukaj w ofercie 200 tys. produktów TME
Proszę, dodaj wyjątek elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

Wyśrodkowanie strony na DIVach

stihler 10 Cze 2011 18:13 3854 19
  • #1 10 Cze 2011 18:13
    stihler
    Poziom 15  

    Witam tak jak w temacie mam problem z wyśrodkowaniem strony tak aby na większości przeglądarek wyświetlała się tak samo...
    W Mozilli i Google Chrome wyświetlają poprawnie.
    Ale ścina mi całe lewe menu w telefonie i nie wiem dlaczego ;/
    Strona zawiera się w DIVach:

    Kod: html4strict
    Zaloguj się, aby zobaczyć kod

    A CSS wygląda na razie tak:
    Kod: css
    Zaloguj się, aby zobaczyć kod


    I nie wiem dlaczego w starszym Internet Explorerze zbliża mi do lewej krawędzi, a w Operze Mini ścina mi lewe menu.
    Nie wiem jak się prawidłowo wyśrodkowuje.

  • #3 11 Cze 2011 08:30
    stihler
    Poziom 15  

    No to może zrobię ja na procentach?
    Chcę np tak jak NK wyświetla mi się na kompie który ma 1280x800px prawię na cały ekran i w komórce w pełnej wersji także jest cała nie ścięta.
    Dlatego się dziwię, że mi ścięło bok...

  • #5 11 Cze 2011 12:21
    stihler
    Poziom 15  

    Hehe no faktycznie nie ma ;)
    Ja posiadam Samsunga Monte 240x400px, ale sprawdzałem w kilku telefonach i w tych z dużo mniejszym ekranem i obcina tak samo. Spróbuję zrobić to na procentach. Gorzej z elementami które muszą być duże.
    Robię dziennik ocen i on musi mieć te 650px, bo oceny się nie mieszczą.

    Dodano po 1 [minuty]:

    Czyli środek ma te 650px bez bocznych menu

  • #6 11 Cze 2011 12:41
    Dżyszla
    Poziom 42  

    Często w wersjach na komórki przeglądarka przeskalowuje stronę i masz wszystko np. dwa razy mniejsze niż natywna rozdzielczość (czyli powierzchnia zwiększa się dwukrotnie). Projektowanie witryn (i aplikacji) pod telefony i inne urządzenia przenośne to trudny temat i wymaga niezwykłej dbałości o interfejs, a szczególnie jak dopuszcza się obsługę ekranem dotykowym. Zwróć uwagę że zdecydowana większość czołowych serwisów ma zupełnie inne strony przeznaczone dla komórek. raczej trudno pogodzić, aby dana strona wyglądała dobrze i tu i tu.

  • #7 11 Cze 2011 12:49
    stihler
    Poziom 15  

    Myślałem nad tym aby automatycznie przenosiło użytkowników mobilnych na inną część serwisu. Np.
    mojastrona.pl/m/index.php
    bo nie mogę dać przed
    m.mojastrona.cba.pl/index.php
    , bo korzystam z darmowego hostingu.
    Ale nie wiem jak rozpoznać takiego użytkownika, możesz mi coś poradzić?

    Dodano po 1 [minuty]:

    PS. Tam dałem

    Kod: html4strict
    Zaloguj się, aby zobaczyć kod

    Ponieważ ponoć gdy da się auto to automatycznie ustawi stronę na środku.

    Dodano po 2 [minuty]:

    Nie wiem komu ale dziękuję za przeniesienie do odpowiedniego działu na forum ;)

  • #8 11 Lip 2011 23:14
    xdcer
    Poziom 12  

    Najprościej...
    Całą stronę wkładasz w

    Kod: html4strict
    Zaloguj się, aby zobaczyć kod


    a w css...

    Kod: css
    Zaloguj się, aby zobaczyć kod

  • #9 12 Lip 2011 06:37
    sakuwbarakushow
    Warunkowo odblokowany

    Dla IE robi się osobne style i nie przejmuj się starymi wersjami IE 6/7 mało kto z tego korzysta a jak ktoś ciągle będzie robił nowe style i wszystkie skrypty specjalnie dla nich to nigdy Ci zacofani ludzie nie przejdą na nowe wersje które już lepiej działają albo na całkiem normalną przeglądarkę.

    PS.
    NK ma wersję mobile.Dla telefonów robi się specjalną wersję strony uboższą w HTML / CSS i bajery gdyż winna ona być o wiele mniejsza niż wersja na media screen ;)

  • #10 12 Lip 2011 07:04
    xdcer
    Poziom 12  

    Nie robić dla IE nic - POPIERAM !! A w treści strony umieszczać "Jeśli strona się źle wyświetla zainstaluj normalną przeglądarkę, nie ograniczaj się" :)

  • #11 12 Lip 2011 07:12
    Atreyu Makiavel
    Poziom 34  

    stihler napisał:
    Ale nie wiem jak rozpoznać takiego użytkownika, możesz mi coś poradzić?
    Po user agent string.

  • #12 12 Lip 2011 07:43
    stihler
    Poziom 15  

    Dzięki za odpowiedzi...
    Właśnie jakiś czas temu znalazłem przykład($USER_AGENTa) ale jeszcze nie miałem okazji go dokładniej przeglądnąć i dostosować do swojej strony ;)

  • Pomocny post
    #13 12 Lip 2011 08:09
    sakuwbarakushow
    Warunkowo odblokowany

    Dam Ci skrypt wczoraj zrobiłem z pomocą google i ziomka z forum ;d

    Kod: php
    Zaloguj się, aby zobaczyć kod


    Wstawiasz to na początku strony nad deklaracją DocType.
    I gdzieś w head:

    Kod: php
    Zaloguj się, aby zobaczyć kod


    To jest na różne przegladarki ale jak dasz na przeglądarkę mobilną to takze wykryje ;) I zawsze się może przydać :)


    @up
    xdcer napisał:
    Nie robić dla IE nic - POPIERAM !! A w treści strony umieszczać "Jeśli strona się źle wyświetla zainstaluj normalną przeglądarkę, nie ograniczaj się" :)


    Na moim portalu dałem :
    Cytat:

    <!--[if IE 7]>

    <p style="color:red; font-size:25px; text-capitalize; text-align:center; padding-top:80px;">Ta strona nie wspiera przeglądarki IE6, IE7 ,IE8.
    Jeżeli widzisz ten komunikat znaczy to że w dalszym ciągu używasz przestarzałej przeglądarki IE ! Prosimy o
    zaktualizowanie swojej przeglądarki , ułatwi to życie tysiącom projektantów stron ! Bądź wejdź na stronę z innej przeglądarki !
    Jeżeli trudno Ci rozstać się z IE rekomendujemy IE9 i nowsze które lepiej obsługują CSS / JavaScript który użyty jest na stronie !
    Pozdrawiamy !</p>

    <![endif]-->
    <!--[if IE 8]>

    <p style="color:red; font-size:25px; text-capitalize; padding-top:80px;">Ta strona nie wspiera przeglądarki IE6, IE7 ,IE8.
    Jeżeli widzisz ten komunikat znaczy to że w dalszym ciągu używasz przestarzałej przeglądarki IE ! Prosimy o
    zaktualizowanie swojej przeglądarki , ułatwi to życie tysiącom projektantów stron ! Bądź wejdź na stronę z innej przeglądarki !
    Jeżeli trudno Ci rozstać się z IE rekomendujemy IE9 i nowsze które lepiej obsługują CSS / JavaScript który użyty jest na stronie !
    Pozdrawiamy !</p>


    <![endif]-->


    I tak powinien każdy robić skończyło by się rozpieszczanie marginesu i robienia strony specjalnie dla nich !

  • #14 12 Lip 2011 08:26
    stihler
    Poziom 15  

    A co jeśli ktoś używa netscape lub innej której mało kto używa?
    Jak rozpoznać mobilnego?
    Po rozdzielczości ekranu?
    A czy każda przeglądarka to wysyła?

  • Pomocny post
    #15 12 Lip 2011 08:47
    sakuwbarakushow
    Warunkowo odblokowany

    Każda wysyła.Poszukaj na necie indyfikatory przeglądarek mobilnych.
    Kto używa NetScape ? nikt .. ta przeglądarka umarła i to samo czeka ie 6/7 i w najbliższym czasie 8 jeżeli szybko popularność xp spadnie do poniżej 10%.
    Statystyki nt używanych przeglądarek :
    http://ranking.pl/pl/rankings/web-browsers.html

    przejrzyj sobie czy ktoś używa jeszcze tego syfu prócz tego możesz poszukać innych statystyk na necie :) Także zainteresuj się popularnością systemów , inne przeglądarki prócz wyjątków są na Linuxie / Macintoshah a jakoś nikt się nimi nie przejmuje i specjalnie nie dostosowuje stron dla nich.

    Ty chyba nie chcesz robić stylów dla IE starego / NetScape i innych śmieci których nazw nikt nie zna ?
    Proponuję Ci zrobić wedle największej popularności :

    -Mozilla 3.5 - 5
    -Chrome 8-9
    -Opera - 9
    -Ie 9 ( jak Ci sie chce babrać rób dla 8)

    Dla innych to nie ma sensu ;)
    Przecież to samo co robić style dla przeglądarki Mozilla 2.0 bo jeszcze jakiś ........ na niej siedzi . Do ludzi się nie da grzecznie tutaj trzeba siłą wypersfadować u nich korzystanie z IE i przesiadkę na coś normalnego..

    Webmaster ma 5x więcej roboty przez takich . Bo tutaj trzeba od nowa zrobić CSS, skrypty JS ... zależy jaka strona, jak większy projekt to w pojedynkę się wykończyć idzie z tym.
    Dlatego proponuję umieszczać na stronie informacje podobne jakie ja dam.Bo inaczej się nie da..
    Nawet youtube.com nie wspiera ie6 ..to dlaczego my mamy nadal to robic ? Teraz kwestia czasu aż zrezygnują ze wspierania ie7 mam nadzieję że jeszcze w tym roku :)

    Jakoś ok.Października rusza mój portal a nie będę robił styli dla IE a strona strasznie tam jest szczególnie na 7 trochę się rozwaliła .. Ale z tego co można na necie wyczytać nie tylko ja, czy my mieliśmy z tym problem wielu innych także :)
    Nie miej skrupułów tylko walcz, bo jak ktoś jeszcze będzie robił im przysługę wielką to nigdy nie przestana ;)
    A później gadać - strona zła bo nie działa to każdy potrafi ... ale zmienić przeglądarkę to już nie..

  • #16 12 Lip 2011 08:54
    stihler
    Poziom 15  

    Zobaczymy co będzie dalej. Szukając różnych rzeczy znalazłem fajny bajer ;)
    Hehe
    Google Api

  • #17 13 Lip 2011 15:43
    stihler
    Poziom 15  

    Szukałem jakby tu rozpoznać przeglądarkę ale pomyślałem, że może zrobię coś samemu... ;)
    I mało sobie wszystkich kłaków z głowy nie wydarłem...
    To było dla mnie okropne gdy chciałem zobaczyć co każda przeglądarka jaką mam zainstalowaną na kompie wysyła i jak to zobaczyłem to chyba jednak skorzystam z czyjegoś gotowego przykładu. Zakładam, że będzie działał.
    Myślałem, że jest zachowana jakaś kolejność jakieś parametry a krótko mówiąc tam jest nasrane... U każdego tak jest??

    Oto co ujrzałem w:
    - Mozilli Firefox(jedyne co przypomina jakiś konkretny zbiór danych)

    Kod: php
    Zaloguj się, aby zobaczyć kod

    - Google Chrome(zawiodłem się)
    Kod: php
    Zaloguj się, aby zobaczyć kod

    - Internet Explorer(nic dziwnego)
    Kod: php
    Zaloguj się, aby zobaczyć kod

    - Opera(ku zadowoleniu)
    Kod: php
    Zaloguj się, aby zobaczyć kod



    Narzekam tak dlatego, że nie rozumiem jak można wyciągnąć z tego jakieś dane?
    Jak sprawdziłem tylko mozille, to napisałem sobie prościutki kodzik który rozpoznaje po pierwszych kilku znakach...
    I zadziałał na mozilli i operze ku zdziwieniu nie zadziałał na chrome...
    I wtedy sprawdziłem każdą i się okazało, że nie ma reguły...
    Najbardziej zastanawia mnie dlaczego Chrome i Internet Explorer na początku ma Mozilla?? :|:?:

    Proszę o wyrozumiałość ale ten temat poruszam po raz pierwszy...

    Dodano po 11 [minuty]:

    sakuwbarakushow napisał:
    Kod: php
    Zaloguj się, aby zobaczyć kod


    Wstawiasz to na początku strony nad deklaracją DocType.
    I gdzieś w head:

    Kod: php
    Zaloguj się, aby zobaczyć kod


    Już wiem dlaczego ten kod działa...
    Ważna w nim jest kolejność sprawdzania przeglądarek ;> hehe
    Także jeszcze raz dzięki, bo szkoda mi włosów do tworzenia własnego skryptu :D

  • #18 13 Lip 2011 16:35
    sakuwbarakushow
    Warunkowo odblokowany

    Przeglądarki dobrze zwracają swoje ID tak ma być jak pokazałeś w cytatach :)

  • #19 13 Lip 2011 21:32
    stihler
    Poziom 15  

    Być może ale według mnie powinno być jakoś bardziej przejrzyście, żeby np. nazwa przeglądarki była zawsze po 2 ukośniku albo jako któryś z kolei wyraz...
    A tak jak jest to nie da rady tego zrobić normalnie. Tylko właśnie tak jak wy w tym kodzie czyli "przelecieć" całą zawartość i szukać według jakiejś tam kolejności...
    Chciałbym prosić o wyjaśnienie dlaczego w MSIE i Chrome jest Mozilla? Na początku...

  • #20 13 Lip 2011 23:04
    Atreyu Makiavel
    Poziom 34  

    To oznacza, że są kompatybilne. Swoje trzy grosze i tak dodaje każda przeglądarka więc da się ją zidentyfikować.

    Dodano po 34 [minuty]:

    Właściwie to jest w tym trochę błędnego myślenia. Jeśli zrobisz stronę zgodnie ze standardem W3C bezbłędnie to na każdej przeglądarce powinna wyglądać tak samo. Tyle teorii. W praktyce wygląda to różnie, no ale czego można się spodziewać po przeglądarce która nie jest zgodna ze światowymi standardami...
    Ja od samego początku tworzenia stron zwracam uwagę aby była bezbłędna pod kątem standardów i źle na tym nie wychodzę. Wbrew opiniom DA SIĘ zrobić stronę poprawną i jednocześnie "wodotryskową". Wszystko kwestia chęci. Tak zrobiona strona będzie wyglądać dokładnie tak jak powinna w "porządnej" przeglądarce. Jeśli gdzieś będzie wyglądać nie tak no to peszek przeglądającego. Może to go zaintryguje i sam pójdzie po rozum do głowy gdy zobaczy znaczek Wyśrodkowanie strony na DIVach i zmieni coś w swoim życiu (czytaj przeglądarkę).

 Szukaj w ofercie
Zamknij 
Wyszukaj w ofercie 200 tys. produktów TME