Új hozzászólás Aktív témák
-
disy68
aktív tag
ha korlátozni akarod, hogy milyen magas legyen valami, akkor max-height (arra figyelni kell, hogy valamelyik szülőnek legyen valami magasság megadva)
ha azt szeretnéd, hogy adott méreten egy szöveg elférjen, akkor közelítően meg lehet oldani a Taci által is javasolt vw (viewport width) illetve vh (viewport height) értékekkel
[link] itt se tökéletes a dolog, a szöveg bizonyos méretarányoknál ki tud lógni
ha viszont nem akarod a magasságot ennyire fixre venni, akkor egy fokkal jobbha ennél pontosabban kell, akkor további media query szabályokkal még lehet rajta faragni vagy pedig javascript-tel ki lehet számolni
-
disy68
aktív tag
-
disy68
aktív tag
-
-
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
-
disy68
aktív tag
A width + margin miatt csúszik ki. Ilyen esetben használhatod a calc() függvényt, amivel kiszámolhatod a szélességet levonva a margin-t. Nagyon handy, működik különböző mértékegységek között.
pl.
width: calc(100% - 20px);Egy kicsit bővebb minta, amikor a szülőhöz képest pozícionáljuk a gyereket (
.parent {position: relative}) és használunk css változókat is.
pl:
Új hozzászólás Aktív témák
- ÁRGARANCIA!Épített KomPhone i9 14900KF 64GB RAM RTX 5080 16GB GAMER PC termékbeszámítással
- Bomba ár! Dynabook Portege X30-L - i5-1135G7 I 8-16GB I 256SSD I 13,3" FHD I Cam I W11 I Garancia!
- Azonnali készpénzes AMD Radeon RX 6000 sorozat videokártya felvásárlás személyesen/csomagküldéssel
- Dell XPS 15 9500 - 15,6" hibás kijelző, i7 10750H, 8GB RAM, Nvidia GTX 1650 Ti 4GB VGA
- GYÖNYÖRŰ iPhone 14 Pro 128GB Space Black -1 ÉV GARANCIA - Kártyafüggetlen, MS4022
Állásajánlatok
Cég: Laptopműhely Bt.
Város: Budapest