Ú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

Ez a szóban forgó
divul, 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
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
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?
Új hozzászólás Aktív témák
- Samsung Galaxy S24 Ultra 12/256GB, Megkímélt, Kártyafüggetlen, Töltővel, 1 Év Garanciával!
- Lenovo ThinkPad T14S Gen1 Intel i5-10310U
- G.SKILL Trident Z 16GB (2x8GB) DDR4 3200MHz F4-3200C14D-16GTZSW INGYEN FOX
- I5-PC-/ I5-4590 / B85M-G / 16GB / GTX 750 2GB / 120SSD / 1TB / WIN10 Ingyen MPL
- Félkonfig? I5-8500 6mag/6szál - 16GB DDR4 3200Mhz RAM - B360M S1151 lap Ingyen FOX
- HIBÁTLAN APPLE WATCH ULTRA 2 NATURAL TITANIUM 49MM -1 ÉV GARANCIA - MS3714, 100% AKKUMULÁTOR
- GYÖNYÖRŰ iPhone 14 128GB Purple -1 ÉV GARANCIA -Kártyafüggetlen, MS3676
- Keresek Xbox Series S / Series X / Playstation 5 konzolokat
- HIBÁTLAN iPhone 13 128GB Red -1 ÉV GARANCIA - Kártyafüggetlen, MS3536,100% Akkumulátor
- Telefon felvásárlás!! Samsung Galaxy S23/Samsung Galaxy S23+/Samsung Galaxy S23 Ultra
Állásajánlatok
Cég: NetGo.hu Kft.
Város: Gödöllő
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest



