- Gurulunk, WAZE?!
- D1Rect: Nagy "hülyétkapokazapróktól" topik
- Sub-ZeRo: Euro Truck Simulator 2 & American Truck Simulator 1 (esetleg 2 majd, ha lesz) :)
- Android másképp: Lineage OS és társai
- Luck Dragon: Asszociációs játék. :)
- Magga: PLEX: multimédia az egész lakásban
- bambano: Bambanő háza tája
- VoidXs: Tényleg minden játék optimalizálatlan?
- erkxt: A Roidmi becsődölt – és senki nem szól egy szót sem?
- Viber: ingyen telefonálás a mobilodon
Új hozzászólás Aktív témák
-
Reflax
tag
válasz
martonx
#2496
üzenetére
Most így néz ki kis módosítás után de még midnig rossz az elrendezés ( gondolok itt arra, hogy a képek is az a 3 egymás melletti is kettőre ugrik össze, a bal oldal letolja a középső oszlopot ha összenyomom, ilyenek.) Bootstrap-et nem használok, kifejezetten css file-t.
Hm, amit linkeltél nem ismerem de utána nézek. Jelenleg kimerül a tudásom div article nav és azok cssben való igazításával alap szinten.
ui.: ha jól látom a css gridezgetés az divekkel rácsalapú elrendezés?
-
Reflax
tag
válasz
martonx
#2494
üzenetére
A háttérhez képest a középső rész ha állítom az ablak méretét, balra tolódik sajnos. Ahelyett, hogy középen maradna a háttérkép előtt.
Az egész képernyő egy nagy conatiner divben van belerakva a bodyban. ÉS ebben pedig van egy left, egy center és egy right div az elhelyezések miatt. És ezt nem tudom megoldani például. Kezdő vagyok, és sok hiba van szerintem benne.
Bár tényleg egyszerűbb lenne megmutatni live és mutatni az észlelt hibákat ha valaki vállalkozik erre. -
-
disy68
aktív tag
A width + margin miatt csúszik ki. Ilyen esetben használhatod a calc() függvényt, amivel kiszámolhatod a szélességet levonva a margin-t. Nagyon handy, működik különböző mértékegységek között.
pl.
width: calc(100% - 20px);Egy kicsit bővebb minta, amikor a szülőhöz képest pozícionáljuk a gyereket (
.parent {position: relative}) és használunk css változókat is. -
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; -
róland
veterán
Egy egyszerű weboldalnál miért van az, hogy mobiltelefonról megtekintve a checkbox-ok legtöbbször csak az asztali nézetre váltva választhatók ki?
(Apple iOS Safarin nem volt vele problléma, egy Androidos Huawei-el is működött, de másik HUawei-en vagy Samsung telefonon csak a fent írt megoldással.)
-
martonx
veterán
Amiket eredetileg írtál. Mostanra a böngészők annyira ügyesek, illetve annyira mobile-first lett minden, hogy szinte semmi értelme ilyen régi nagy, dögnehéz frameworköket behuzigálni.
Bár a bootstrap v5 ismét érdekessé teheti majd a bootstrap használatát, az esetek egy részében. -
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?
-
JohnD
tag
Há' valaki segíccsen má
Csináltam egyébként flexbox-szal is egy ilyen dinamikusan a nézet (böngészőablak) méreteihez igazodó designt is. A kérdés, hogy a hover divet ott pontosan tudom-e pozícionálni, amikor a naptár divjei mindenütt relatívek, %-ban megadottak.
Flexboxok flexbox-sza lett egyébként, ha kell megpróbálom felrakni és belinkelni
-
-
JohnD
tag
Helló! Mivel nem akarom egyelőre szétszedni az eddigi oldalt, ezzel az extra kóddal kísérletezgetek:
<meta name="viewport" content="width=device-width, initial-scale=0.7">
Így mobilon és asztalin is jól jelenik meg, bár a Chrome mobileszköz tesztelojen iPad-en és iPad pron túl kicsi az alapból betöltött oldal.
(Ha az initial-scale-t 1.0-re állítom, a függőleges képarányon túllóg az oldal elemek szélessége.)Van vmi ötletetek, hogy hogyan lehetne még ebben a formában, a viewport taggel főleg tökéletesiteni (ha lehet)?
[link] az oldal linkje.
Vagy ez, ha nem működik: http//scaser.000webhostapp.com/index.phpKöszi!
-
martonx
veterán
Csináltam egy template-et MDN alapján, legalább életemben először én is kipróbáltam a css gridet, ha már ajánlgatom
https://codepen.io/martonx/pen/GRoPbPj?editable=true%3Dhttps%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FCSS_Grid_Layout%2FGrid_Template_AreasVegyük észre, hogy a grid reszponzív, bármilyen képernyő méreten rendben lesz. De a legnagyobb előnye, hogy végre bárki által szerkeszthetően látszik, hogy miről beszélünk
-
-
martonx
veterán
-
martonx
veterán
Jaja, úgy van, ahogy gondoltam. Ezt a css-t így nyugodtan kukázhatod, és írd át az egészet css grid-esre. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Vagy css flexbox-osra: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_FlexboxEzek pont erre lettek kitalálva, hogy reszponzív tudjon lenni amit csinálsz mind mobilon mind egy 4K-s 32 colos monitoron.
-
JohnD
tag
Bocs a késlekedésért! Sajnos fix a hoverkor megjelenített div szélessége, mert úgy néz ki számomra megfelelően, ill. a pozicionalasa is (top, left) a nap div ek szélessége ill. magassága alapján van kiszámolva (még a php kodban), ami tehát szintén fix. (És absolute a position tulajdonsága emiatt.)(Left tulajdonság pl. a nap div szélessége szorozva amennyi van belőle a hover div előtt.)
Így gondolom ha a különböző bongeszoablak meretekhez különböző css méreteket akarok megadni, jo sok ismétlődő css kód kellene, nem?
Köszi! -
T J
tag
Hover állapotban nem kell megadni szélességet, ha nem akarsz rajta változtatni az alap állapothoz képest. Magasságot is célszerű %-ban megadni. Ha tartani szeretnél egy arányt a szélesség : magasság között, akkor a tartalmazó div arányait kell megadni.
Ezen kívül lehetőséged van különböző böngésző-ablak szélességekhez egyéni méreteket/ elhelyezéseket megadni. Pl fekvő mobilnál naptár & esemény-leíró ablak egymás mellé, álló mobilnál egymás alá rendezés. -
JohnD
tag
Ezzel több gond is van, pl. hogy a hover elemek (amiben kiírja a napi eseményeket ha fölé viszed az egeret egy nap div fölé) pozíciója fixen van kiszámolva a nap div-ek szélessége alapján. Vagy ha a szélességek %ban lennének, akkor a magasságokat is úgy kéne vhogy igazítani.
Lehet nem is így kellett volna az egészet megvalósítani
Köszi -
JohnD
tag
Helló! Az előző hsz.omat törölhetné egy moderátor.
Hogyan lehetne ezt a dinamikus naptárat reszponzivvá tenni, pl. hogy mindig a képernyő teljes szélességében jelenjen meg függetlenül a felbontastol? Jelenleg az elemek fix szélességűek
Egyéb javaslatok is jöhetnek!
Itt van,
(link)
Ha nem működik az előbbi link: http://scaser.000webhostapp.com(Csak maga a naptár van fenn a tárhelyen)
Köszi!
-
radi8tor
MODERÁTOR
Tudnátok segíteni megint CSS témában?
Egy barátomnak csinálok webshopot egyelőre default témával, ami elég kezdetleges.
A logo-t meg kellene csinálni hogy a maga konténerében(?) ne balra legyen igazítva hanem középre mind asztali mind mobilnézetben.Hogyan tudom ezt megcsinálni?
-
#2436
cattus
addikt
csanyiadam
#2435
cattus
addikt
válasz
csanyiadam
#2435
üzenetére
Én így szoktam: [link]
-
#2435
csanyiadam
tag
csanyiadam
tag
Sziasztok. Kinek milyen jól bevált módszere van arra, hogy pl egy 2-3 soros contenttel ellátott oldal esetében nagy felbontáson a footer a kijelző alján legyen? Olyan bután néz ki, amikor egy sötét weboldal esetében a footer a kijelző közepén van és alatta pedig fehér üres rész. Köszönöm szépen.
-
#2431
T J
tag
bLaCkDoGoNe
#2430
T J
tag
válasz
bLaCkDoGoNe
#2430
üzenetére
Fokozatosan átlátszósodó maszkra gondolsz a háttérkép előtt? Mint itt a "bemutatkozás" rész?
.bg_filter {background: linear-gradient(to bottom right, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.3) 90%);z-index: 100;} -
#2430
bLaCkDoGoNe
veterán
bLaCkDoGoNe
veterán
Sziasztok, van egy div-em, ahol dupla hátteret használok: legalul van egy kép ill. felette egy SVG shape, ami csak részben fedi az alul levő képet. Van-e mód CSS-ből arra, hogy szelektíven csak a bitmap-et blur-özzem, vagy inkább csináljam meg a homályosítást Photoshopban?
Köszi! -
T J
tag
Nem tudom, h megoldható-e CSS-ben amit szeretnél: CSS - Use calc() to keep widths of elements the same
Dinamikusan lehet, hogy csak js-el fog menni, illetve bele lehet erőszakolni a js-t css-be, de az nem tiszta css, illetve lehet js-ben is használni css-t, de akkor nem minden stílus lesz a css fájlben egy helyen.
width: calc(...) -al is lehet számolni, de csak az őt tartalmazó elem szélességéből. Másik vele egyenrangú társelem szélessége csak fix értékként szerepelhet a képletben. Pl:
.td3 {width: calc( 100% - 200px ); } ahol 100% az a td3-at tartalmazó tr szélessége, a 200px pedig a sorban levő többi elemé (td1, td2) marginnal, borderrel együtt.
Szóval ha ismered minden oszlopban a leghosszabb elem méretét, akkor érdemes az adott osztályú elemeknek min-width-ként megadni, és az ismeretlen szélességű mezőét a calc()-al megadni, kitöltve így a maradék helyet.
De az inputnál nem tudod előre hogy nem az lesz-e a leghosszabb mező, amit épp be fog írni a user. Így vagy maximálod a beírható karakterek számát, vagy minden beírt karakter után lefuttatsz js-el egy ciklust, amiben összehasonlítod, hogy a beírt szöveg hosszabb-e, mint a már meglévő leghosszabb szöveg az oszlopban, vagy a megadott szélességnél. És ha hosszabb, akkor növeled a cella és táblázat szélességét minden egyes beírt karakternél. De ez sok felesleges számítás, és ha betöltéskor is így állapítod meg a szélességet, min-width helyett, akkor lassabban fog betöltődni az oldalad.Ezen kívül nem illik egy tr-be th-t és td-t is tenni, csak az egyiket. És div-et se erőltetném bele td-be, mert rontja a táblázatod formázhatóságát. Inkább használj div helyett <span>-t.
-
válasz
martonx
#2424
üzenetére
De érted, olyan megoldás nem létezik, ami egységesen jó 20 karakterre is, meg 500-ra is.
A második képen pont látszódik, hogy jó, ha összehúzom, akkor is. Egyszerűen a float:right-ot nem szereti.
-------- 2 -----------
A fiddleben látszódik, hogy nagyon széles az input. Azt szeretném, hogy annyira legyen széles, mint a felette levő kettő cella legszélesebbje, tehát azokhoz idomuljon. -
martonx
veterán
"Persze lehet tippelni a betűk számából, eddig is ezt csináltam, de pont ezért keresek CSS megoldást, hogy ne kelljen."
De érted, olyan megoldás nem létezik, ami egységesen jó 20 karakterre is, meg 500-ra is. Lehetőségeid: min-width használata vagy le tudod csapni a túl hosszú szövegek végeit "..."-ra (tooltipként meg mondjuk kitenni a teljes szöveget), vagy be tudod törni a túl hosszú szövegeket (ez az, ami most nem tetszik neked). Neked kell kitalálnod, hogy mi a jó neked. Ami biztos nem jó, hogy karakterenként számolgatsz bármit.A második problémád meg az alapján a jsfiddle alapján sajnos még mindig nem világos. Nem lehetne olyan jsfiddle-t csinálnod, ahol látszódik is a probléma?
-
válasz
martonx
#2422
üzenetére
Az eredeti poszt:
Helló, CSS mágusokat kérdezném két problémával. Első, adott egy táblázat:
Az a probléma, hogy mikor össze van húzva, akkor nem tartja a szélességét, hanem mint látható, az ikonok elkezdenek bemászni a szöveg alá. A gondot tippre az ikonokon levő float okozza, de ha ez nincs, akkor az ikonok balra vannak rendezve.
Szóval, ha lehetne valahogy jobbra rendezni float nélkül, akkor az jó lenne.
-----------
A másik problémám, hogy mivel a cella szélességét AFAIK az input határozza meg, így most kódból állítok szélességet, de az csak egy becslés, viszont jó volna, ha nem veszne el hely. Ha nem állítok input szélességet, akkor a Firefox, alapból 120 px-t állít, ami feleslegesen sok.
Szóval ide valami olyan kellene, hogy az input alkalmazkodjon.
---------------------------------------------
Első kérdésed: tegyél egy min-widht: 80px-et a th-ra.Ez OK lenne, ha statikus lenne a kontent, de nem az, szerver oldalon nem tudom mennyi lesz. Persze lehet tippelni a betűk számából, eddig is ezt csináltam, de pont ezért keresek CSS megoldást, hogy ne kelljen.
A másodikra: azt szeretném szintén generikusan CSS-ből megoldani, hogy az input igazodjon a felette levő legnagyobb cellához. Ha nem adok meg szélességet, akkor fixen 120 px, legalábbis FFX-ban.
-
-
Sziasztok, hátha tud valaki segíteni, most, hogy megtudtam, van CSS topik is: [link]
-
parkr
őstag
erre van valakinek ötlete? másolni próbálok egy weboldról, mert megtetszett
- felső: eredeti, csak a hátteret színeztem át hogy egyezzen
- alsó: saját, mindent ugyanúgy hagytam, a shadow mégis ilyen kékes-sárgás
eredeti méretben kevésbé látszik, de engem attól még zavar.
mindkét kép chrome-ban készült, firefoxban szinte egyforma a kettő
-
#2411
hiperFizikus
senior tag
martonx
#2410
hiperFizikus
senior tag
válasz
martonx
#2410
üzenetére
No izé, te biztosan tájékozódtál felőlem, így tudhatod, hogy régen egy HTML lapot szeretem volna eladható árúvá csinálni, amit megvitattunk, és nehéz esetnek találtunk . Végül is 1 évre rá meg lett csinálva, és most webshopként van konkretizálva, ami főleg a munkatársaim érdeme .
Mivel a fórum nem a reklám helye, ezért csak privátban tudom megadni a webshopom linkjét, ami az itteni vitánk eredményeként született, de csak annak aki privátbán felcsörget, ill. kéri .
-
#2410
martonx
veterán
hiperFizikus
#2408
martonx
veterán
válasz
hiperFizikus
#2408
üzenetére
ah, oké. Ez esetben várjuk a fejleményeket.
-
#2408
hiperFizikus
senior tag
martonx
#2407
-
#2407
martonx
veterán
hiperFizikus
#2404
martonx
veterán
válasz
hiperFizikus
#2404
üzenetére
Azért majd megküldöd nekünk a végeredményt?
-
#2406
#57018880
törölt tag
hiperFizikus
#2405
#57018880
törölt tag
válasz
hiperFizikus
#2405
üzenetére
alert(`ID >>> ${event.target.getAttribute('id')}`); -
#2405
hiperFizikus
senior tag
rikxjeee
#2400
hiperFizikus
senior tag
válasz
rikxjeee
#2400
üzenetére
Próbálgattam, a z00 jól megy, a this.id nem megy . Hogyan kell a this.id -hez megcsinálni ?
<script type="text/javascript">function z00 () {alert('bokor');alert(z00thval);}document.addEventListener('click', function (event) {if (event.target.matches('.myCustomClass')) {alert('Alerted');z00thval = this.idz00()}}, false);</script> -
#2403
hiperFizikus
senior tag
rikxjeee
#2400
hiperFizikus
senior tag
válasz
rikxjeee
#2400
üzenetére
Természetesen, ki is próbáltam a kódod, láthatod sikeresen szurkáltam is bele . A további instrukciódat pedig hamarosan meg fogom vizsgálni .
Egyébbként Martonx mindig piszkálódik velem, más ra sem képes, nem teszek neki jelzőket, mert őstag . Kérlek tekints el Martonx megjegyzéseitől .
-
#2401
martonx
veterán
hiperFizikus
#2399
martonx
veterán
válasz
hiperFizikus
#2399
üzenetére
Légyszi linkeld ide a weboldalacskád, hagy lássák a többiek, hogy kivel van dolguk
de rákeresek
Új hozzászólás Aktív témák
- 830 G11 13.3" FHD+ IPS Ultra 5 125U 32GB 512GB ujjlolv IR kam gar
- Precision 5550 15.6" 4K+ IGZO érintő i7-10850H T1000 16GB 512GB NVMe ujjlolv IR kam gar
- INGYEN POSTA - ÚJ GAMER PC - i5-10400F - RTX 3060 12GB - 16GB RAM - 1TB SSD - www.olcsogamerpc.hu
- Pc kompletten
- Apple iPhone 8 64GB Kártyafüggetlen 1Év Garanciával
- Xiaomi Redmi A1 32 GB Kártyafüggetlen 1Év Garanciával
- BESZÁMÍTÁS! MSI B460M i5 10400F 32GB DDR4 512GB SSD RTX 2060 Super 8GB Zalman S4 Plus TT 500W
- Telefon felvásárlás!! iPhone 16/iPhone 16 Plus/iPhone 16 Pro/iPhone 16 Pro Max
- Bomba ár! Dell Latitude 7320 - i5-11GEN I 8GB I 256SSD I HDMI I 13,3" FHD I Cam I W11 I Garancia!
- ÁRGARANCIA! Épített KomPhone Ryzen 7 9700X 32/64GB RAM RX 7800 XT 16GB GAMER PC termékbeszámítással
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: CAMERA-PRO Hungary Kft
Város: Budapest