Hirdetés

  2. Fórumok
  3. Szoftverfejlesztés
  4. CSS topic

Hirdetés

100 000 érv a ReGalaxy mellett: Vásárolj Galaxy Z Fold7 I Z Flip7 vagy Galaxy S25 szériás készüléket, és régi mobilod felújítását 100 000 Ft-ig mi álljuk!

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

  • #2507 disy68 aktív tag Reflax #2506
    Új Válasz #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 :P 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 :)

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