Oldal: 1 / 2 12 UtolsóUtolsó
Eredmény: 1 - 10 (15) összesen

Téma: Reszponzív dizájn kontra pozícionálás

  1. #1
    Bölcs
    Csatlakozott
    11-12-21
    Hozzászólás
    763
    Begyűjtött 116 köszönetet
    100 hozzászólásával

    Alapbeállítás Reszponzív dizájn kontra pozícionálás

    Engedjétek meg, hogy egy érdekes tapasztalatot meg osszak veletek.

    A lényeg, hogy egy reszponzív dizájn fejlécében kellett egy div menüt és egy képet pozícionálni, de természetesen úgy, hogy a lehető legtöbb kütyün azonos legyen a megjelenés.

    Semmi gond, HTML5 globális szabvány, így aztán top:3%; left:78%; és el van intézve, gondoltam amíg meg nem néztem 19 kütyün (pc, mobil, stb.).
    A legtöbb helyen tökéletes volt, de akadt olyan kütyü ahol lecsúszott a menü és a kép vagy éppen úgy tűnt, mint ha fix pozícióba lenne rossz helyen. Különösen a menü esetén, de iphone esetén a kép is lecsúszott.

    A megoldás: top:3%; left:78%; helyett top:0; left:78%; padding-top:2%;
    Az eredmény közel 100% azonos megjelenés a kütyükön!!!

    Röviden ennyi, remélem segítségére lesz másoknak is!



  2. Az alábbi felhasználók hálásak a válaszért:

    esotanc (2014-02-06)

  3. #2
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.744
    Begyűjtött 1.428 köszönetet
    892 hozzászólásával

    Alapbeállítás re: Reszponzív dizájn kontra pozícionálás

    Nem vagyok egy frontend guru, de a top es left ertekek onmagukban nem sokat mondanak. Kerdes hogy az elemet absolute, relative vagy fixed position-el lattad el, illetve absolute eseten a legkozelebbi relative elemenhez viszonyitva pozicionalnak a bongeszok, igy a szulo elem/elemek position erteke sem mindegy hogy mi. En gyanitom hogy nalad ezekkel volt a gond, es ha mindegy helyesen lenne megadva, akkor jol jelenne meg a bongeszok tobbsegeben.


    If debugging is the process of removing software bugs, then programming must be the process of putting them in.
    Ruby blog
    Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.
    Respect all, fear none

  4. Az alábbi felhasználók hálásak a válaszért:

    Janko (2014-02-06)

  5. #3
    Bölcs earnnet logója
    Csatlakozott
    12-08-15
    Hely
    Budapest
    Hozzászólás
    1.815
    Begyűjtött 804 köszönetet
    572 hozzászólásával

    Alapbeállítás re: Reszponzív dizájn kontra pozícionálás

    Helyette egy 100% széles wrapper divben igazítanám középre bármilyen módon és a dobozmodell adottságaival variálnék. Az nem tévedhet.



  6. Az alábbi felhasználók hálásak a válaszért:

    Janko (2014-02-06)

  7. #4
    Bölcs
    Csatlakozott
    11-12-21
    Hozzászólás
    763
    Begyűjtött 116 köszönetet
    100 hozzászólásával

    Alapbeállítás re: Reszponzív dizájn kontra pozícionálás

    Geri, position:absolute;-ra van beállítva.
    De az egésznek a lényege az, hogy a top/left beállításal a bongészők és kütyük többségében jó is volt, de a módosítás után pár pixel eltéréssel szinte 100% lett a megjelenés azonossága mindenhol.



  8. #5
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.744
    Begyűjtött 1.428 köszönetet
    892 hozzászólásával

    Alapbeállítás re: Reszponzív dizájn kontra pozícionálás

    Idézet Janko eredeti hozzászólása Hozzászólás megtekintése
    Geri, position:absolute;-ra van beállítva.
    Es az az elem amihez viszonyitva szeretned a top es left erteket az relative-ra volt allitva? Mert ha az nincs directbe megadva, akkor bongeszonkent mas elemhez kepest lesz az ertek ertelmezve.



  9. #6
    Bölcs
    Csatlakozott
    11-12-21
    Hozzászólás
    763
    Begyűjtött 116 köszönetet
    100 hozzászólásával

    Alapbeállítás re: Reszponzív dizájn kontra pozícionálás

    static left/top nulla...
    A legtöbb helyen jó volt, de iphon esetén a 3% vagy 30% lett.



  10. #7
    Bölcs
    Csatlakozott
    11-12-21
    Hozzászólás
    763
    Begyűjtött 116 köszönetet
    100 hozzászólásával

    Alapbeállítás re: Reszponzív dizájn kontra pozícionálás

    Idézet earnnet eredeti hozzászólása Hozzászólás megtekintése
    Helyette egy 100% széles wrapper divben igazítanám középre bármilyen módon és a dobozmodell adottságaival variálnék. Az nem tévedhet.
    Lehet megérne egy misét...
    De a "nem tévedhet" kicsit erős, szerintem...



  11. #8
    Bölcs earnnet logója
    Csatlakozott
    12-08-15
    Hely
    Budapest
    Hozzászólás
    1.815
    Begyűjtött 804 köszönetet
    572 hozzászólásával

    Alapbeállítás re: Reszponzív dizájn kontra pozícionálás

    Idézet Janko eredeti hozzászólása Hozzászólás megtekintése
    Lehet megérne egy misét...
    De a "nem tévedhet" kicsit erős, szerintem...
    Abból kiindulva, hogy bizonyos böngésző-kompatibilitási dolgokra gyógyír, ha megadod a margin-t és nem az internet explorerre hagyod annak félreértelmezését, akkor ott van kerek perec, és azt kell használnia. Ha a wrapper divet teljes lapszélességbe kiteszed, onnantól már csak dobozmodell, és ott a méretek nem függnek már semmitől, ez annyira alap CSS, hogy minden böngészőn egységesen kell működnie.



  12. #9
    Bölcs
    Csatlakozott
    11-12-21
    Hozzászólás
    763
    Begyűjtött 116 köszönetet
    100 hozzászólásával

    Alapbeállítás re: Reszponzív dizájn kontra pozícionálás

    Idézet earnnet eredeti hozzászólása Hozzászólás megtekintése
    Abból kiindulva, hogy bizonyos böngésző-kompatibilitási dolgokra gyógyír, ha megadod a margin-t és nem az internet explorerre hagyod annak félreértelmezését, akkor ott van kerek perec, és azt kell használnia. Ha a wrapper divet teljes lapszélességbe kiteszed, onnantól már csak dobozmodell, és ott a méretek nem függnek már semmitől, ez annyira alap CSS, hogy minden böngészőn egységesen kell működnie.
    Van egy kis időm meg kedvem is hozzá, így kipróbálnám...
    Pontosan mit javasolsz erre az esetre?
    fejléc kép "img src" width:100% szélességre (left/top nulla) és erre kellene
    szöveges menü width:68% szélességgel top:23% és left:6.5% induló pozícióval, valamint egy
    kép width:17.5% szélességgel és top:3% left:78% pozícióval.

    Ha van kis időd akkor lécci írd le, hogy milyen css felállást próbáljak ki. Köszi!


    Utoljára módosítva: Janko által : 2014-02-06 13:18

  13. #10
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.744
    Begyűjtött 1.428 köszönetet
    892 hozzászólásával

    Alapbeállítás re: Reszponzív dizájn kontra pozícionálás

    Idézet Janko eredeti hozzászólása Hozzászólás megtekintése
    static left/top nulla...
    A legtöbb helyen jó volt, de iphon esetén a 3% vagy 30% lett.
    Ott a hiba. Ne static, hanem relative legyen.



  14. Az alábbi felhasználók hálásak a válaszért:

    Janko (2014-02-06)

Oldal: 1 / 2 12 UtolsóUtolsó

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •