Hirdetés
Ú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
- Milyen széket vegyek?
- Okosóra és okoskiegészítő topik
- Videós, mozgóképes topik
- Olcsó vs. drága egér: melyiknél érzed meg igazán a különbséget?
- NVIDIA GeForce RTX 5070 / 5070 Ti (GB205 / 203)
- Építő/felújító topik
- Linux kezdőknek
- Samsung Galaxy S25 Ultra - titán keret, acélos teljesítmény
- Gaming notebook topik
- Apple MacBook
- További aktív témák...
- Zenbook 15 UM3504DA 15.6" 3K OLED Ryzen 7 7735U 32GB 1TB NVMe IR kam gar
- Samsung Galaxy A35 5G 256GB, Kártyafüggetlen, 1 Év Garanciával
- Samsung Galaxy A33 5G 128GB, Kártyafüggetlen, 1 Év Garanciával
- Samsung Galaxy A52s 128GB, Kártyafüggetlen, 1 Év Garanciával
- Samsung Galaxy A15 5G 128GB, Kártyafüggetlen, 1 Év Garanciával
- Azonnali készpénzes INTEL CPU NVIDIA VGA számítógép felvásárlás személyesen / postával korrekt áron
- Apple iPad Pro 4th 12.9 2020 - Wi-Fi - Space Gray - 128GB - Akku: 86% - Megkímélt állapot!
- Honor Magic V3 Black Hajtogatható csúcsmobil, nagy főképernyő + fedlapi kijelző 12/512 GB
- Most èrkezett! Kingston 1TB NV3!
- HIBÁTLAN iPhone 13 Pro 128GB Graphite -1 ÉV GARANCIA - Kártyafüggetlen, MS3747, 100% Akkumulátor
Állásajánlatok
Cég: ATW Internet Kft.
Város: Budapest
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest