- Milyen TV-t vegyek?
- iPad topik
- Melyik tápegységet vegyem?
- Hobby elektronika
- AMD Ryzen 9 / 7 / 5 9***(X) "Zen 5" (AM5)
- AMD K6-III, és minden ami RETRO - Oldschool tuning
- Rekordokra vágyik! Kezünkben az Asus ROG Matrix GeForce RTX 5090
- NVIDIA GeForce RTX 5070 / 5070 Ti (GB205 / 203)
- TCL LCD és LED TV-k
- Azonnali fotós kérdések órája
Ú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
Hirdetés
- PlayStation 5
- LordAthis: Ismét egy "Idióta" A.I. Projekt, hogy meglovagolja az aktuális trendeket...
- LordAthis: AI Kérdés érkezett - 3600 soros Spagetti kód refaktorálása és budget
- Milyen TV-t vegyek?
- Sony Xperia 1 VII - Látod-e, esteledik
- Medence topik
- Milyen légkondit a lakásba?
- iPad topik
- Kínai és egyéb olcsó órák topikja
- Megjött a jubileumi Pixel széria
- További aktív témák...
- Bontatlan utángyártott toner Samsung CLP-310/315 és CLX-3170/3175 nyomtatókhoz
- Zotac Geforce RTX 3060 (működik, de hibás!)
- Lenovo Thinkpad X1 Carbon Laptop 14" i7-8565U 4Mag 16GB/512GB FHD IPS
- Razer Cynosa V2 - Nordic Layout INGYEN FOXPOST
- i7 asztali pc játszani, és sok másra, bomba áron!!!! Socket 2066 64GB 8GB VGA
- HP 15 Zbook Studio G8 FHD IPS i7-11850H vPro 32GB 512GB SSD Nvidia A2000 Studio Win11 Pro Garancia
- Ha országosan a legmagasabb áron szeretnéd eladni a laptopodat, akkor az ELITRO a Te partnered
- BESZÁMÍTÁS! Gigabyte H610M i5 12400F 16GB DDR4 512GB SSD RX 6600 XT 8GB AEROCOOL Aero One Frost 700W
- Motorola Moto G54 Power 5G 256GB, Kártyafüggetlen, 1 Év Garanciával
- Telenor 5G Indoor WiFi Router (FA7550) + töltő
Állásajánlatok
Cég: FOTC
Város: Budapest