Új hozzászólás Aktív témák
-
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.
Én kérek elnézést!
-
martonx
veterán
A css grid egy 2020-as reszponzív megoldás. A tied meg 2002-es, nem reszponzív. Csak ennyi a különbség. A hoverkor megjelenített div-et, tippre így is úgy is javascripttel kell picit megtámogatni, bár nem vagyok egy nagy CSS mágus, lehet valaki tud jobb megoldást.
Én kérek elnézést!
-
-
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_Areas
Vegyü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
Én kérek elnézést!
-
JohnD
tag
Köszi!
-
disy68
aktív tag
-
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!
[ Szerkesztve ]
-
-
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
[ Szerkesztve ]
-
Keem1
addikt
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?
-
Keem1
addikt
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. -
róland
veterán
Bootstrap 4-gyel hogyan lehet olyan táblázatot készíteni, amiben az egyes oszlopok szélességét én határozom meg?
Kezdő vagyok még benne, s azt látom, hogy egy oldalon "<div>"-ekkel ez megoldható. De nekem nem az egész oldlnál kell, csak az oldal egy táblázatában.
http://logout.hu/cikk/mi_is_az_a_htpc/teljes.html; Három emeleten át egy teljes liftrapszódiát játszik!
-
JohnD
tag
Hali! A Bootstrap mire használatos még manapság? A flexbox és grid miatt nem vált mára teljesen fölöslegessé?
[ Szerkesztve ]
-
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.Én kérek elnézést!
-
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.)
http://logout.hu/cikk/mi_is_az_a_htpc/teljes.html; Három emeleten át egy teljes liftrapszódiát játszik!
-
Keem1
addikt
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;[ Szerkesztve ]
-
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.[ Szerkesztve ]
“Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude
-
martonx
veterán
Van itt valami moderátor? Ezt nem lehetne a topik elejére összefoglalóba belerakni? [link]
Hiszem, hogy a kérdések jó részét eleve megválaszolná.Én kérek elnézést!
-
Reflax
tag
Üdvözlet!
Kezdő Webet tanulok.
CSS3-ban formázáskor elakadtam. Esetleg Teams, Discord, más platformon ha valaki tudna segíteni megköszönném és egyben el is magyaráznám, mutatnám mi a téma. Egyszerűen nem jutok a problémám megoldására. (rendezési gondok vannak)[ Szerkesztve ]
CPU: i7 950, VGA: GIGABYTE GTX 1650 Super 4GB OC, 14GB RAM, SSD: 250GB Samsung 860 EVO, HDD: 1TB WD Blue, 1TB WD Black. Motherboard: Super Micro X8SAX 3 channel, Ház: DeepCool Matrexx 55
-
Reflax
tag
válasz martonx #2487 üzenetére
Full statikus, csak html és csak css, semmi szerver oldali, semmi java. Csak a CSS-ben az elrendezés nem akar megoldódni. (I mean kezdő vagyok frissen)
[ Szerkesztve ]
CPU: i7 950, VGA: GIGABYTE GTX 1650 Super 4GB OC, 14GB RAM, SSD: 250GB Samsung 860 EVO, HDD: 1TB WD Blue, 1TB WD Black. Motherboard: Super Micro X8SAX 3 channel, Ház: DeepCool Matrexx 55
-
Reflax
tag
válasz martonx #2489 üzenetére
Akkor csak tudatlan vagyok ehhez és nem értem miről beszéltél de rákeresek
I don't get it, miért jó ha oda beillesztem és megmutatja az oldalt
[ Szerkesztve ]
CPU: i7 950, VGA: GIGABYTE GTX 1650 Super 4GB OC, 14GB RAM, SSD: 250GB Samsung 860 EVO, HDD: 1TB WD Blue, 1TB WD Black. Motherboard: Super Micro X8SAX 3 channel, Ház: DeepCool Matrexx 55
-
disy68
aktív tag
azért, mert nyomsz rajta egy mentést és belinkeled ide és akinek ideje/kedve engedi, majd megnézi és segít, illetve ha más is olvassa/látja az is tanulhat belőle
amire ez a fórum való, többek között
“Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude
-
Reflax
tag
[ Szerkesztve ]
CPU: i7 950, VGA: GIGABYTE GTX 1650 Super 4GB OC, 14GB RAM, SSD: 250GB Samsung 860 EVO, HDD: 1TB WD Blue, 1TB WD Black. Motherboard: Super Micro X8SAX 3 channel, Ház: DeepCool Matrexx 55
-
-
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.CPU: i7 950, VGA: GIGABYTE GTX 1650 Super 4GB OC, 14GB RAM, SSD: 250GB Samsung 860 EVO, HDD: 1TB WD Blue, 1TB WD Black. Motherboard: Super Micro X8SAX 3 channel, Ház: DeepCool Matrexx 55
-
martonx
veterán
Én a helyedben elkezdenék CSS Grid-et vagy FlexBox-ot használni a pozícionálásokhoz: Flexbox vs. CSS Grid: Which Should You Use and When? (tutsplus.com)
Én kérek elnézést!
-
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?
[ Szerkesztve ]
CPU: i7 950, VGA: GIGABYTE GTX 1650 Super 4GB OC, 14GB RAM, SSD: 250GB Samsung 860 EVO, HDD: 1TB WD Blue, 1TB WD Black. Motherboard: Super Micro X8SAX 3 channel, Ház: DeepCool Matrexx 55
-
Reflax
tag
válasz martonx #2498 üzenetére
Akkor igazából bevidelgetem a dolgokat, és lesz egy rács alapú elrendezésem az oldalon, ha jól értem
CPU: i7 950, VGA: GIGABYTE GTX 1650 Super 4GB OC, 14GB RAM, SSD: 250GB Samsung 860 EVO, HDD: 1TB WD Blue, 1TB WD Black. Motherboard: Super Micro X8SAX 3 channel, Ház: DeepCool Matrexx 55
-
martonx
veterán
Ez is egy egész jó magyarázó oldal: A Complete Guide to Grid | CSS-Tricks (css-tricks.com)
Én kérek elnézést!
Új hozzászólás Aktív témák
- EDIFIER R1700BTS hangfal pár makulátlan, új állapotban, 2 év hivatalos garanciával, alkalmi áron
- LG OLED55B23LA 2 Év GYÁRI GARANCIA
- Apple iPhone XR 128GB, Kártyafüggetlen, 1 Év Garanciával
- Gamer PC , i7 12700KF , RTX 3080 Ti , 64GB DDR5 , 960GB NVME , 1TB HDD
- Intel PC , i5 8500 , 1660 6GB , 32GB DDR4 , 512GB NVME , 500GB HDD
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: Ozeki Kft.
Város: Debrecen