Keresés

Új hozzászólás Aktív témák

  • Keem1

    veterán

    Srácok, segítséget kérnék. Van egy div-em, ami eredetileg faltól-falig ért, ám szeretnék neki jobbról-balról behúzást, mert fog kapni egy cuki kis top bordert, ami hülyén nézne ki ha végig érne.
    Viszont, a jelenlegi megoldással, ha megadom neki a margint, akkor balról oké, jobbról viszont pont ennyivel kifut a parent divből (nem látszik ugyan, mivel a parent overflow:hidden, de a piros border széle balról (és a marginja) látszódik, a jobb oldali viszont nem, a Chrome inspect is frankón mutatja, hogy még a margin is ott van, de eleve a jobb border +10px-el, a jobb margin meg még erre is +10px-el lóg ki). Hogy tudnám neki megmondani, hogy maradjon ment, és jobbról is legyen 10px margin?
    A jelenlegi piros border csak debuggolást szolgál.

    Köszi előre is, ha valakinek van ötlete :R

    Ez a szóban forgó div ul, ami kilóg a parentből:
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    border: 1px solid red;
    position: absolute;
    bottom: 0;
    height: 35px;
    line-height: 32px;
    margin: 0;
    list-style: none;
    list-style-type: none;
    padding: 0;

  • Keem1

    veterán

    válasz martonx #2469 üzenetére

    Ááh, ilyeneket sose használok :D
    Közben idő híján megcsináltam az ótvar megoldással: megcsináltam 4 különböző méretben, lett egy szép nagy sprite, bár a mérete így is csak 40 kb maradt, éljen az átlátszó hátterű png :D
    Viszont az eredeti megoldásnak mindenképp utána fogok nézni, érdekel.

  • Keem1

    veterán

    Sziasztok! Előrebocsátom, nem vagyok profi programozó (de ismerem a programozás alapjait, használtam már PHP-t, C#-ot, valamennyire rémlik a Javascript és a CSS is), webbel évekkel ezelőtt foglalkoztam, amikor még olyan új kulcsszavak jelentek meg, mint responsive, css sprite és hasonlók.

    Most úgy alakult, hogy egy meglévő régi kód leporolásával egy ismerősnek dobok össze egy egyszerűbb PHP+MySQL siteot (tudom, van Wordpress és hasonlók, de az évek során sokat felejtettem, másrészt ezeket nem is ismerem, így mire ezek közül bármit elégségesen tanulmányoznék, már a saját régi kódból kész a cucc, amihez pár évig a kutya ne fog hozzányúlni).

    A kérdés: adott ugye egy png sprite, a benne lévő legtöbb képi elemet már felhasználtam. Azonban belekerült 12 db 124x124 pixel méretű ikon is, amikből előregyártott ikonok készíthetők, így: <div class="icon meret kepid">. Vagy példával: <div class="icon icon32px iconfacebook">
    Eddig minden faszán megy, addig a pontig, hogy a sprite mérete = céldiv mérete, tehát 1:1 arány a valós kép és a megjelenített div mérete között.

    Van tehát az én 12 db 124x124px méretű képecském, amiből lenne 3 méret alapból (később lehet több is): 24px, 32px, 48px. Nem szeretném átméretezgetni őket (mert akkor 12x annyi helyfoglalás, ahány méretet szándékozik használni az ismerős), helyette arra gondoltam, hogy ráguglizok arra, hogy scale, és inkább lesz egy elég nagy méretű alapanyag, amiből minőségromlás nélkül lehet kisebbeket gyártani on-the-fly. Itt vannak ilyen jóságok, hogy background-size, meg az egyes böngészők saját megoldása. Na de mi a kapcsolat a size és a position között? Mert hiába állítom be, hogy a position -500px -440px, az 1:1 méretnél jó, ha átállítom a size-t, máris ugrik az egész. És a vicc, hogy mindenütt ezt a két varázsszót említik, de hogy a kettő milyen viszonyban van, vagy egyikhez a másikat hogy tudom kiszámolni, azt már sehol.

    Példa legyen tehát az első ikonunk, ami alapbeállításokkal, tehát 1:1 méretben kb. így néz ki leegyszerűsítve:
    position: -500px -440px; width: 124px; height 124px; size: auto;
    Ezek után ez lenne a 32x32-es méret:
    position: -??px -??px; width: 32px; height 32px; size: ??%;
    Csak hát a számok nem jönnek ki, ez egyelőre egy kétismeretlenes egyenlet. De nem akarom senkivel megadatni az eredményt, hogy mindet én meg tudjam csinálni, a logika kéne, a köztük lévő kapocs, amivel gyerekjáték lenne a dolog.

    Valaki tud ebben segíteni? :R

Új hozzászólás Aktív témák

Hirdetés