Hirdetés
- sziku69: Szólánc.
- Luck Dragon: Asszociációs játék. :)
- gban: Ingyen kellene, de tegnapra
- sziku69: Fűzzük össze a szavakat :)
- Sub-ZeRo: Euro Truck Simulator 2 & American Truck Simulator 1 (esetleg 2 majd, ha lesz) :)
- potyautas: Kiküldetésben a szép Juhásznénál
- Szevam: ChatGPT: Bizonytalansági jelölés funkció bekapcsolása
- ubyegon2: Airfryer XL XXL forrólevegős sütő gyakorlati tanácsok, ötletek, receptek
- eBay-es kütyük kis pénzért
- Sapphi: StremHU | Source – Self-hostolható Stremio addon magyar trackerekhez
Új hozzászólás Aktív témák
-
T J
tag
Lehet hogy "old school", de működik.
-
T J
tag
Nem kell ide mágia, csak normálisan megírt kód. Összeadtad a szélességeket? Mert ilyeneket írtál az elsőben, hogy: .left{width:20%;} .center{width:50%;} .right{width:290%;}. Ráadásul kétszer formázod a .right-ot, és a másodikkal felülírod az elsőt ...
Tíz percig görgettem, mire megtaláltam, miért nem működik amit feljebb módosítottam.
Minden divnek van szélessége, magassága (jobb híján height:auto; ), és elhelyezése (float: left; ). Amíg ezek nincsenek megadva, nem kerülnek a helyükre! Az egy sorba kerülő divek össz szélessége max 100%, marginnal, borderrel együtt. Ezek vastagsága hozzáadódik az elem szélességéhez!!! Ezért ellenőrzéshez inkább eltérő háttérszínt adj meg border helyett, és ha margint adsz, akkor annak a szélességét egyből vond is le az elem szélességéből, pl: margin-left: 2px; width: calc(50% - 2px);
Az elemek formázását sorrendben, fentről lefelé, és balról jobbra, sorrendben, ahogy a html-ben szerepelnek. Különben nem fogod megtalálni, és katyvasz lesz az egész.
Ne fixálj olyan tartalmat ami nem fér el magasságba a kijelzőn, mert a kilógó rész rejtve marad. -
-
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. -
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;} -
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.
Új hozzászólás Aktív témák
- Multimédiás / PC-s hangfalszettek (2.0, 2.1, 5.1)
- Autós topik
- Formula-1
- AMD Navi Radeon™ RX 6xxx sorozat
- World of Tanks - MMO
- Gran Turismo
- AMD Navi Radeon™ RX 7xxx sorozat
- CPU léghűtés kibeszélő
- Sony MILC fényképezőgépcsalád
- A Microsoft bedurvult, így a jövőben keményen odacsapnak a veszélyes drivereknek
- További aktív témák...
- Envy 17-da0830nd 17.3" FHD IPS érintő Ultra 7 155H 16GB 1TB NVMe IR kam gar
- XPS 15 9510 27% 15.6" FHD+ IPS i7-11800H RTX 3050Ti 32GB 512GB NVMe ujjlolv IR kam gar
- HP 17-CP0678ng (Ryzen7 / 32GB DDR4 / 17,3" FHD / VEGA 8 2GB / 512GB SSD / Win11 / ÁFA)
- 5G Lenovo ThinkPad P14s Gen 3 Intel Core i7-1280P Nvidia T550 32GB 512GB 1 év teljeskörű garancia
- 5G Lenovo ThinkPad P14s Gen 3 Intel Core i7-1280P Nvidia T550 32GB 1000GB 1 év teljeskörű garancia
- Bomba ár! Lenovo ThinkPad T460s - i5-6GEN I 8GB I 128GB SSD I 14" FHD I Cam I W10 I Garancia!
- Telefon felvásárlás!! iPhone 12 Mini/iPhone 12/iPhone 12 Pro/iPhone 12 Pro Max
- GYÖNYÖRŰ iPhone 14 Pro Max 256GB Space Black - 1 ÉV GARANCIA, Kártyafüggetlen,MS3489, 100% Akksi
- Asus laptop E1504F Ryzen 3
- BESZÁMÍTÁS! MSI B550M R7 5800X 32GB DDR4 1TB SSD RTX 3070Ti 8GB Zalman T4 Plus Cooler Master 750W
Állásajánlatok
Cég: BroadBit Hungary Kft.
Város: Budakeszi
Cég: ATW Internet Kft.
Város: Budapest
Tíz percig görgettem, mire megtaláltam, miért nem működik amit feljebb módosítottam.

