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

• #2668 disy68 aktív tag lanszelot #2667

  Új Válasz 2021-12-07 16:32:21 #2668

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz lanszelot #2667 üzenetére

  :hover pszeudó selector-class amit egybe kell írni azzal, amire alkalmazni szeretnéd nem lóghat a levegőben

• #2647 disy68 aktív tag Mr. Y #2646

  Új Válasz 2021-11-22 07:20:24 #2647

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz Mr. Y #2646 üzenetére

  div[id^="pic"]
  ez azt mondja div a kijelölésben meg img van

• #2631 disy68 aktív tag Mr. Y #2629

  Új Válasz 2021-09-14 17:29:17 #2631

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz Mr. Y #2629 üzenetére

  ha korlátozni akarod, hogy milyen magas legyen valami, akkor max-height (arra figyelni kell, hogy valamelyik szülőnek legyen valami magasság megadva)

  ha azt szeretnéd, hogy adott méreten egy szöveg elférjen, akkor közelítően meg lehet oldani a Taci által is javasolt vw (viewport width) illetve vh (viewport height) értékekkel
  [link] itt se tökéletes a dolog, a szöveg bizonyos méretarányoknál ki tud lógni
  ha viszont nem akarod a magasságot ennyire fixre venni, akkor egy fokkal jobb

  ha ennél pontosabban kell, akkor további media query szabályokkal még lehet rajta faragni vagy pedig javascript-tel ki lehet számolni

• #2616 disy68 aktív tag lanszelot #2611

  Új Válasz 2021-08-18 09:53:39 #2616

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz lanszelot #2611 üzenetére

  "Ha kirakom a nav ból, akkor nem lesz ott oldalt, hanem felkerül a fejlécre./mint ahogy a peldádon is van/"

  hogy mi? amit linkeltem, ott a lista tetején van a kereső mező, milyen fejlécről beszélsz? csinálj egy rajzot, hogy mit szeretnél hol, mert ez így elég zavaros

• #2610 disy68 aktív tag lanszelot #2609

  Új Válasz 2021-08-17 18:11:49 #2610

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz lanszelot #2609 üzenetére

  A fixed position-nel az input kikerül a flow-ból és nem lesz neki helye (ezért takarja ki a lista tetejét), szóval vagy csinálsz neki (margin, akármi) vagy alakítasz a dom struktúrádon. Pl. az inputot kirakod a nav-ból és a nav lesz görgethető a listával: pölö.

• #2556 disy68 aktív tag coco2 #2554

  Új Válasz 2021-02-26 13:23:46 #2556

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz coco2 #2554 üzenetére

  arra jó, hogy meg tudod másokkal osztani és aki segíteni akar, annak nem kell a kódodat másolgatni sehova meg külön fájlokkal szórakozni, hanem ott helyben módosítja és az új verzión az élő példát fogod te is - és mindenki más is - látni

• #2509 disy68 aktív tag Reflax #2508

  Új Válasz 2020-11-30 09:58:04 #2509

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz Reflax #2508 üzenetére

  A grid-hez nemcsak a calc-ra nincs szükség, de media query-kre sem feltétlen a responsive layout-hoz. Itt egy cikk erről.

  Persze használhatod őket, pláne ha el szeretnél valamit tűntetni, mert a különböző grid leírók nem fognak eltűntetni semmit, hanem a definíció által nem ismert területeket layout után fogja a böngésző megjeleníteni (ezért kerül az aljára nálad). Itt egy másik cikk, ami egy hasonló layout-ról szól, mint a tied különböző módszerekkel. Ez alapján itt egy kis minta media query-kkel, a jobb sávot eltűnteti 400px alatt. Változó borderek, grid-gap, nincs calc.

  Szerintem olvasgass még kicsit a css grid témában lehet találni hasonló irományokat, amikből további ötleteket kaphatsz még.

• #2507 disy68 aktív tag Reflax #2506

  Új Válasz 2020-11-27 22:41:17 #2507

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz Reflax #2506 üzenetére

  Na ez még továbbra is kicsit kaotikus

  Azt látom, hogy valami grid irányba indultál, de rengeteg minden van még a css-ben, amire nincs szükség, illetve kissé wtf pl:
  .boxes :nth-of-type(2)
{margin-bottom: 200%;}
.boxes :nth-of-type(3)
{margin-top: 300%;}

  Amire érdemes figyelni, hogy a böngészők egyes html elemekre használhatnak alapértelmezett css beállításokat, amik nem várt mellékhatásokkal járhatnak. Az egyik ilyen a html és body elem padding/margin értéke. Ezeket érdemes kapásból 0-ra állítani.

  html, body {
  margin: 0;
  padding: 0;
}

  Illetve léteznek összeszedett css-ek, amik minden hasonlót törölnek, de ezek tartalmazhatnak olyat is, ami nem feltétlen szükséges, szóval egyelőre csak említés szintjén jegyezd meg.
  
  Én személy szerint nem foglalkoztam még a grid layout-tal csak flexbox-szal, amire martonx #2500 is linkelt egy remek összefoglalót. Ennek (is) a lényege nagyvonalakban, hogy oszlopokba és sorokba rendezed az oldaladon az elemeket és ezeket aszerint rendezed, növeled/csökkented, ahogy azt szeretnéd és nem kell foglalkoznod százalékokkal border/margin/padding kalkulációkkal.

  Nálad ez kb így kéne kinézzen (ahogy én csinálnám, pszeudó-akármivel leírva, zárók nélkül):
  <body> - flex parent (column)
  <header> - flex item
  <div> - flex item ( és flex parent (row))
    <aside> - flex item /bal menü/
   <main> - flex item /content/
    <aside> - flex item /jobb infó sáv/
  <footer> - flex item

  Szóval én a két oldalsó navigáció és infó sávot egy közös szülővel fognám össze a main elemmel. A jsfiddle példában pedig elég a body-n belüli rész a tartalomhoz btw.

  Én azt javaslom, hogy dobj ki minden formázást és kezdd el előről felépíteni a fő elemeket és utána a többit. T J #2502 javaslata is működik a calc használatával, de mivel most tanulod a dolgot, lehet jobban jársz, ha valami aktuálisabbal kezded inkább, arról nem beszélve, hogy leegyszerűsíti és átláthatóbbá tudja tenni a css-t, ami sose baj

• #2492 disy68 aktív tag Reflax #2490

  Új Válasz 2020-11-24 16:27:14 #2492

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz Reflax #2490 üzenetére

  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

• #2483 disy68 aktív tag Keem1 #2482

  Új Válasz 2020-11-17 12:55:48 #2483

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz Keem1 #2482 üzenetére

  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.

• #2475 disy68 aktív tag JohnD #2473

  Új Válasz 2020-10-06 11:15:00 #2475

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz JohnD #2473 üzenetére

  Szerintem továbbra is hasznos lehet a komponensei és a kényelmi class-ok miatt.

• #2472 disy68 aktív tag róland #2471

  Új Válasz 2020-10-05 14:28:36 #2472

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz róland #2471 üzenetére

  a header cellák méretét állítva (th) az adott oszlop igazodik

  fiddle

• #2461 disy68 aktív tag JohnD #2460

  Új Válasz 2020-07-23 18:43:18 #2461

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  disy68

  aktív tag

  válasz JohnD #2460 üzenetére

  A caniuse.com segíthet a döntésben:
  

  flex vs grid

  felhasználói bázist tekintve mindkettő elég jól áll, persze lehet, hogy a te célközönséged pont valami olyat használ, ami kiesik ebből

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