- bitpork: MOD Júni 28- Augusztus 2- szombat jelen állás szerint.
- M0ng00se: Hardvert áruhitelre?
- btz: Internet fejlesztés országosan!
- Luck Dragon: Asszociációs játék. :)
- D1Rect: Nagy "hülyétkapokazapróktól" topik
- gban: Ingyen kellene, de tegnapra
- sziku69: Fűzzük össze a szavakat :)
- Mr Dini: Mindent a StreamSharkról!
- VoidXs: Tényleg minden játék optimalizálatlan?
- sziku69: Szólánc.
Új hozzászólás Aktív témák
-
disy68
aktív tag
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.
-
disy68
aktív tag
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 itemSzó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
-
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. -
pl:
Tíz percig görgettem, mire megtaláltam, miért nem működik amit feljebb módosítottam.
Új hozzászólás Aktív témák
- Audi, Cupra, Seat, Skoda, Volkswagen topik
- Windows 10
- Filmvilág
- Milyen videókártyát?
- Drón topik
- Túra és kirándulás topic
- A fociról könnyedén, egy baráti társaságban
- Xiaomi 13 - felnőni nehéz
- Kormányok / autós szimulátorok topikja
- bitpork: MOD Júni 28- Augusztus 2- szombat jelen állás szerint.
- További aktív témák...
- Apple iPhone 12 Mini 64GB, Kártyafüggetlen, 1 Év Garanciával
- Azonnali A320 B350 X370 B450 X470 A520 B550 X570 chipset alaplap felvásárlás személyes/csomagküldés
- Telefon felvásárlás!! iPhone 15/iPhone 15 Plus/iPhone 15 Pro/iPhone 15 Pro Max
- Egyedi ékszerdobozka
- Csere-Beszámítás! Sapphire Pure RX 7700XT 12GB GDDR6 Videokártya! Bemutató Darab!
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft
Város: Budapest
Cég: Promenade Publishing House Kft.
Város: Budapest