Hirdetés
- Android alkalmazások - szoftver kibeszélő topik
- Garmin Fenix 8 Pro - nézz az ég felé!
- Xiaomi 15 - kicsi telefon nagy energiával
- Samsung Galaxy Z Fold5 - toldozás-foldozás
- Telekom mobilszolgáltatások
- Yettel topik
- Samsung Galaxy S25 Ultra - titán keret, acélos teljesítmény
- Xiaomi 15T - reakció nélkül nincs egyensúly
- Samsung Galaxy S23 és S23+ - ami belül van, az számít igazán
- Samsung Galaxy A54 - türelemjáték
Ú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 alaplapot vegyek?
- sziku69: Szólánc.
- AMD K6-III, és minden ami RETRO - Oldschool tuning
- Hobby rádiós topik
- sziku69: Fűzzük össze a szavakat :)
- Kerékpárosok, bringások ide!
- Android alkalmazások - szoftver kibeszélő topik
- Suzuki topik
- Visszagyorsítja a Windows visszalassulását a GeForce driver gyorsjavítása
- Garmin Fenix 8 Pro - nézz az ég felé!
- További aktív témák...
- ÚJ HP Z5000 Wireless Mouse Fekete/Fehér Bolti ár:10k INGYEN FOXPOST
- Apple Imac 21,5 Inch, Late 2015! Intel Core I5 + Intel Iris Pro Graphics. 1TB Háttértár!
- ÚJ Dell Multi-Device Wireless Mouse Bolti ár:14k INGYEN FOXPOST
- ÚJ Microsoft Modern Mobile Mouse Bolti ár:20k INGYEN FOXPOST
- Lian Li SP750 750W Gold SFX Moduláris Tápegység
- BESZÁMÍTÁS! Asrock B450M R5 5500 16GB DDR4 512GB SSD RTX 2060 Super 8GB THERMALTAKE VERSA H17 600W
- iKing.Hu - Apple iPhone 14 Stílusos megjelenés, megbízható teljesítmény
- Számlás!Windows 10 Pro 11 Pro,Windows 10 Home 11 Home, Office 2016,2019,2021 ,Vírusirtok,Mac
- Telefon felvásárlás!! iPhone X/iPhone Xs/iPhone XR/iPhone Xs Max
- BESZÁMÍTÁS! 16GB (2x8) Patriot Viper Steel 4400MHz DDR4 garanciával hibátlan működéssel
Állásajánlatok
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest
Cég: Laptopműhely Bt.
Város: Budapest