Oldal: 2 / 3 ElsőElső 123 UtolsóUtolsó
Eredmény: 11 - 20 (23) összesen

Téma: Responsive design

  1. #11
    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: Responsive design

    Modjuk a kép width/height aránya torzulni fog amikor eléri a magasság a minimumot a szélesség meg még menne összébb.
    Próbáld meg a min-height értékét beállítani. Így ha ezt az értéket eléri a magasság akkor kisebb már nem lesz.
    De ha tényleg +60px-ről van szó, akkor én inkább a kép magasságát már eleve 60px-el megnövelném, és akkor torzítás mentesen dinamukus mérteben meg tudna jelenni.


    Utoljára módosítva: Janko által : 2015-07-06 18:38

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

    koci (2015-07-27)

  3. #12
    Bölcs
    Csatlakozott
    12-08-31
    Hozzászólás
    1.032
    Begyűjtött 351 köszönetet
    239 hozzászólásával

    Alapbeállítás re: Responsive design

    Állíts be minimum magasságot:
    min-height: 100px; (ennél nem lesz kisebb)
    Illetve a kép konténerére tegyél egy overflow: hidden;-t, illetve egy text-align: center-t.

    Ezzel azt oldod meg, hogy amikor nem tudja már a böngésző jobban zsugorítani a képet, akkor ne torzítsa a képet, hanem inkább helyezze középre és a felesleget "vágja" le.

    Elvileg ennek működnie kell.



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

    koci (2015-07-27)

  5. #13
    Bölcs koci logója
    Csatlakozott
    10-03-20
    Hely
    Budapest
    Hozzászólás
    583
    Begyűjtött 90 köszönetet
    69 hozzászólásával

    Alapbeállítás re: Responsive design

    Sziasztok!

    Az új verziójú facebook komment responsivitásához ismeri valaki most a css hacket? A régiek már nem működnek sajna
    Előre is köszönöm!

    koci



  6. #14
    Bölcs Vittore1982 logója
    Csatlakozott
    10-06-07
    Hozzászólás
    2.873
    Begyűjtött 1.411 köszönetet
    960 hozzászólásával

    Alapbeállítás re: Responsive design

    Most lehet, hogy hülyeséget kérdezek, de a főnök mindenképpen teljes oldalszélességű dizájnt szeretne. Eddig ezt úgy oldottuk meg, hogy desktopon volt egy középső rész, ami kb. 1200px-en megjelenítette a tartalmat, majd a nagyobb felbontásokon az 1200px-es középső rész mellé jobb és bal oldalt betettünk hátteret. Ennek megfelelően full Hd-n már 360-360px-nyi háttér van a lényegi középső rész mellett, ami ugye azért már jelentős kihasználatlan területet jelent. Mit ajánlatnátok erre? A tablet és mobil verzióknál a weboldal elemei egymás alá kerülnek, a felbontástól függően átméretezve, egyes elemek kihagyva, csak a 1200px-nél nagyobb felbontással vannak a fent említett problémák.



  7. #15
    Coolfox zsolti logója
    Csatlakozott
    07-05-04
    Hozzászólás
    712
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: Responsive design

    Idézet Vittore1982 eredeti hozzászólása Hozzászólás megtekintése
    Most lehet, hogy hülyeséget kérdezek, de a főnök mindenképpen teljes oldalszélességű dizájnt szeretne. Eddig ezt úgy oldottuk meg, hogy desktopon volt egy középső rész, ami kb. 1200px-en megjelenítette a tartalmat, majd a nagyobb felbontásokon az 1200px-es középső rész mellé jobb és bal oldalt betettünk hátteret. Ennek megfelelően full Hd-n már 360-360px-nyi háttér van a lényegi középső rész mellett, ami ugye azért már jelentős kihasználatlan területet jelent. Mit ajánlatnátok erre? A tablet és mobil verzióknál a weboldal elemei egymás alá kerülnek, a felbontástól függően átméretezve, egyes elemek kihagyva, csak a 1200px-nél nagyobb felbontással vannak a fent említett problémák.
    Lehet 5000 pixel is, de az ember csak egy kis sávot követ le, amit még a fej mozgatása nélkül kényelmesen átlát. Ha van rá lehetőség, akkor oda általában egész oldalt betöltő hirdetést szoktak tenni(pl gamestar.hu). Nem jut eszembe az angol neve, de magyarul "Kapu"-ként is szoktak rá hivatkozni.


    FoxWeb.hu Weboldal készítés + Keresőoptimalizálás. Mobilbarát honlapok. | SEO Támogató Weboldalak

  8. #16
    Törzsvendég maxgraphics logója
    Csatlakozott
    11-01-13
    Hely
    Kecel
    Hozzászólás
    130
    Begyűjtött 85 köszönetet
    41 hozzászólásával

    Alapbeállítás re: Responsive design

    Idézet Vittore1982 eredeti hozzászólása Hozzászólás megtekintése
    Most lehet, hogy hülyeséget kérdezek, de a főnök mindenképpen teljes oldalszélességű dizájnt szeretne. Eddig ezt úgy oldottuk meg, hogy desktopon volt egy középső rész, ami kb. 1200px-en megjelenítette a tartalmat, majd a nagyobb felbontásokon az 1200px-es középső rész mellé jobb és bal oldalt betettünk hátteret. Ennek megfelelően full Hd-n már 360-360px-nyi háttér van a lényegi középső rész mellett, ami ugye azért már jelentős kihasználatlan területet jelent. Mit ajánlatnátok erre? A tablet és mobil verzióknál a weboldal elemei egymás alá kerülnek, a felbontástól függően átméretezve, egyes elemek kihagyva, csak a 1200px-nél nagyobb felbontással vannak a fent említett problémák.
    Ha responsive designról beszélünk, ma 2015-ben, akkor ez nagyban függ az oldaltípustól és témától, nem lehet általános választ adni a kérdésedre.
    Különböző, de jól bevált módszerek vannak mondjuk egy online magazin/portál, egy webshop és egy bemutatkozó oldal esetében, azok szerkezetétől is függ, hogy az zárt vagy nyitott.
    Egy modern, nyitott szerkezetű, igazi 2015-ös megjelenés: https://manna.hu/
    Ugyancsak modern, nagyon átlátható, de zárt felület: AliExpress.com - Online Shopping for Electronics, Fashion, Home & Garden, Toys & Sports, Automobiles from China.
    Kicsit zsúfolt, és zárt felület, háttér-reklámokkal: edigital.hu

    Online magazinoknál/portáloknál nem igazán jellemzőek, de néhol előfordulnak egész oldalt betöltő háttérhirdetések, vagy kapu-bannerek, mert ezen oldalak még a hagyományosabb szerkezetet követik (gyakran még mindig zárt forma, jobb/bal sidebar, fejléc, lábléc, stb.) Ennél a típusnál -mivel elég sok és különböző a kontent- általában egyszínű, sima, seamless a háttér, mert itt a legfontosabb a "kontent is the king", minden másodlagos. Fontos, hogy az olvasó könnyen, gyorsan, egyszerűen végig tudja futni a viszonylag nagy méretű, széttagolt tartalmat, és ez designolt, szuper-színes hátterekkel nem könnyű, ezért nem is jellemző. Ennél a típusnál a fullwidth hátterek, sliderek sem gyakoriak, bár azért találni rá használható példákat.

    A zártabb szerkezetű webshopoknál (főleg a nagyobb, több termékkel és bonyolultabb elrendezéssel rendelkező oldalaknál) gyakran használják a háttérreklámokat, kapu-bannereket, mert ez egy kiváló reklámlehetőség, és jobban is mutatnak, mint a csiricsáré széteffektezett hátterek, de a felhasználó szempontjából itt is előnyösebb az egyszerű, egyszínű háttérszín.
    Kisebb-egyszerűbb shopoknál már az egyszerűségükből fakadóan is már megfigyelhető a teljes szélességű, nem zárt, landing-page szerű szerkezet, és ezért itt már egyáltalán nincs háttérreklám, vagy háttérkép, egyszínű vagy fehér a háttér általában.

    A bemutatkozó/céges oldalaknál is egyre nagyobb számban figyelhető meg 2015-ben a landing page-szerű nyitott felület (tehát nem a hagyományos, keretbe zárt szerkezet). Itt már egyáltalán nincs a szó szoros értelmében vett háttérkép, mivel nincs keret/tároló ami a tartalomtól elválasztaná azt, hanem a következőképp alakul a szerkezet: fejléc navigációval, hatalmas slider/kép/videó, kontent, lábléc. És itt már teljesen eltűnik a sidebar is, mint szerkezeti elem, vagy aloldalakon használható.

    Teljesen más kategóriát képviselnek egy adott terméket, adott szolgáltatást bemutató egyoldalas landing page-ek. Ezekről is általánosságban elmondható, hogy háttérkép nincs, viszont a háttér mint design-elem azért megjelenik egy-egy tartalmi blokk háttereként, vagy az mellett, de egy teljes egész oldalt lefedő háttérkép nem jellemző, a háttér szín vagy fehér inkább.


    Minőségi grafikai munkáimmal állok rendelkezésedre -> Maxgraphics -> ha csak tanács kell akkor is!

  9. The Following 2 Users Say Thank You to maxgraphics For This Useful Post:

    Vittore1982 (2015-08-03), _lacus_ (2015-08-01)

  10. #17
    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: Responsive design

    Véleményem szerint meg kell próbálni úgy megoldani az oldalakat, hogy 480-2048px böngésző szélességen belül közel azonos látványban legyen része a látogatónak. Sokan nem szeretik ha mobilon egy tök más és/vagy butított oldalt látnak mint mondjuk PC-n. A CSS adja magát a megoldáshoz, a betűk méretét meg js-el lehet dinamikusan állítani az aktuális böngésző szélességhez.
    Ha már hozzá kell nyúlni az oldalhoz akkor már legyen normális...



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

    maxgraphics (2015-08-01)

  12. #18
    Törzsvendég
    Csatlakozott
    12-02-15
    Hozzászólás
    104
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: Responsive design

    Helló!

    Szeretnék egy kis segítséget kérni.
    Az oldalamon megadtam, hogy a leírásokból 1-1 képes doboz maradjon ki 980 px alatt.

    HTML kód:
    @media only screen and (max-width: 980px) {
    .leiras2 {width:100% !important}
    .firstbox {display:none !important;}
    .doboz2 {display: none !important;}}
    Ellenőrizem egy windows 8 tabletetn, minden jó, viszont amikor egy ipad mini-n néztem akkor a tartalom nem jelenik meg, de a helye igen, azaz egy üres folt van az oldal közepén.

    Ez mitől lehetséges?
    a kérdéses oldal



  13. #19
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: Responsive design

    Firefox alatt is "rossz" (és win8 tableten is hibának kéne lennie, igazából a tableten jelenik meg rosszul!). Nem a tartalom helye jelenik meg, csupán a video-container van letolva.

    Megoldás:
    Vedd le a video-container class-sal rendelkező elemről a clear:both-ot.

    Magyarázat: a baj az, hogy a menü balra van úsztatva, a video-containeren clear:both van, tehát se tőle balra, se jobbra nem lehet úsztatott elem (ezt csinálja ugye a clear), így automatikusan a menü aljával kerül egy vonalba a video-container teteje, mert a menü mellé nem kerülhet semmiképp a kiadott clear parancs miatt. Így pedig függőlegesen széthúzza az őt tároló div-et, aminek következtében annak a háttere jelenik meg elég nagy területen, mert tartalom nincs ott.


    Utoljára módosítva: Emphus által : 2015-09-18 19:10

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

    holinorby (2015-09-18)

  15. #20
    Törzsvendég
    Csatlakozott
    12-02-15
    Hozzászólás
    104
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: Responsive design

    A mindenit!
    Nagyon szépen köszönöm, sokat segítettél!



A téma címkéi:

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
  •