- Xiaomi 15 - kicsi telefon nagy energiával
- Keretmentesít a Galaxy S25 FE
- iPhone topik
- Redmi Watch 5 - formás, de egyszerű
- 45 wattos vezeték nélküli töltés jön az új iPhone-ba
- Google Pixel topik
- Apple iPhone 13 Pro Max - őnagysága
- Samsung Galaxy S25 Ultra - titán keret, acélos teljesítmény
- Ilyen lesz a Fairphone 6
- LG V50 ThinQ Dual Screen - az 5G ára
Új hozzászólás Aktív témák
-
#2328
fordfairlane
veterán
edari
#2326
fordfairlane
veterán
-
#2297
fordfairlane
veterán
norbert400
#2295
fordfairlane
veterán
válasz
norbert400
#2295
üzenetére
-
#2288
fordfairlane
veterán
norbert400
#2287
fordfairlane
veterán
válasz
norbert400
#2287
üzenetére
Teljesen esetfüggő. Pl. a moz-border-radius a Firefox 4-től lett átnevezve border-radiusra, de a vendor-prefix változat is működött egészen a Firefox 12-ig.
-
#2285
fordfairlane
veterán
norbert400
#2284
fordfairlane
veterán
válasz
norbert400
#2284
üzenetére
A témához, összességében:
Fighting the Space Between Inline Block Elements
A legegyszerűbb megoldás esetedben: a nav-ra font-size: 0, az elemekre font-size: 16px.
[link]Másik lehetőség, hogy floattal oldod meg, de így a menüpontok középre igazítása problémásabb:
[link]A harmadik, és legelegánsabb a flex layout, régebbi böngészőkkel akadhatnak gondok:
[link] -
#2159
fordfairlane
veterán
theo_76
#2158
fordfairlane
veterán
válasz
theo_76
#2158
üzenetére
A példa sem vízszintesen, sem függőlegesen nem igazít középre, próbáld ki többsoros szöveggel. A div blokk bal-felső sarka lesz középen, arra vonatkozik a left: 50% és top: 50%. Amennyiben a div blokk vízszintesen és függőlegesen is fix méretű, viszonylag egyszerű a korrekció:
margin-left: - width / 2
margin-top: - height / 2azaz jelen példánál
#cont {
...
width: 280px;
height: 75px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -37px;
margin-left: -140px;
...
} -
#2144
fordfairlane
veterán
biker
#2142
fordfairlane
veterán
Viszont akkor te(ti) a less fileokat sem töltitek fel, itt meg valamiért követelmény, tehát valamit csak csinálnak vele (még mindig nem válaszoltak, miért és mit töltenek be, sebíj, ráérek, van más munka)
Azt írtad, hogy a html-ben behúzod a less fájlt, meg valami less.js feldolgozót. Vagy az egy másik honlap?
A Less fájlt oda kell feltölteni, ahol a feldolgozása történik. Ez lehet a developer gép, lehet valami közbenső staging kiszolgáló, de akár a webszerver is. Sőt, ezek szerint a kliens is feldolgozhatja, bár ez nekem új.
-
#2138
fordfairlane
veterán
biker
#2137
fordfairlane
veterán
- beírom, mentem, lefordítom
- css-t mentem, minify.zem ha kell, feltöltöm
- refreshelek és cachet ürítek, hogy tutti az új jelenjen megErre szoktak scripteket használni, amik automatikusan végrehajtják ezeket a lépéseket. A refresh és cache ürítés meg nyilvánvalóan nem oldja meg másoknál a cachelési problémákat, így erre asset verziózást érdemes használni.
Talán csak én nem vagyok elég tájékozott, de eddig még nem találkoztam olyan oldallal, amelyik a kliens böngészővel végezte volna a SASS vagy LESS fájlokat.
-
#2105
fordfairlane
veterán
brickm
#2104
fordfairlane
veterán
Nem ismerem konkrétan a bootstrap -et, de ahogy nézegetem a leírását, eléggé felesleges ennyire megbonyolítani egy sima passzív weblapot.
Én a bootstrap nélkül egy egyoldalas landingot sem csinálok már. Sokkal egyszerűbb a grid rendszert használni, mint floatokkal szórakozni.
-
#2102
fordfairlane
veterán
brickm
#2101
-
#2055
fordfairlane
veterán
Zedz
#2054
fordfairlane
veterán
A böngészők már jópár éve rengeteg verzió- és vendorspecifikus sajátossággal rendelkező alkalmazásplatformok.
Csak egy példa: Egy helyen azért maradt meg az IE6, emiatt a Windows XP is, mert egy AS400-as karakteres programot, amin egy nélkülözhetetlen banki folyamatot kezeltek, csak egy IE6 alatt működő ActiveX kontrollon keresztül lehetett használni. Az az AS400-as program mellesleg egy Cobol program volt, amihez hozzáértő programozót a föld alól nem kerítesz elő manapság, nemhogy egy egész programozó- és üzemeltető teamet, amire szükség lett volna adott esetben.
-
#1945
fordfairlane
veterán
DrojDtroll
#1944
fordfairlane
veterán
válasz
DrojDtroll
#1944
üzenetére
Ötlet: Lehet, hogy inkább transitiont kéne használni. Bocs, nincs kedvem és energiám kódot összedobni, és kipróbálni a teóriámat.
-
#1706
fordfairlane
veterán
martonx
#1705
fordfairlane
veterán
válasz
martonx
#1705
üzenetére
hanem valami saját ősrégi semmivel nem kompatibilis megoldást használ.
A Outlook 2003-ban még IE motor van, az Outlook 2007-től viszont valami Word html renderert tettek bele. Gondolom kellett volna csinálni egy offline lebutított html kezelőt, ez meg kéznél volt. Egyébként tényleg botrányosan rossz.
-
#1702
fordfairlane
veterán
adam_
#1696
fordfairlane
veterán
Köszi, én sem értem már, hogy így hirtelen miért táblázatos rendezést alkalmaztam a form-ra, pedig már itt is, és máshol is sokszor láttam, mondták, hogy "szentségtörés" ez a módszer, és eléggé elavult.
Ez azért túlzás. Általában érdemes layouthoz css gridet használni, de egy minimáloldalnál egy pársoros layout tábla nem a világvége.
-
#1661
fordfairlane
veterán
PumpkinSeed
#1657
fordfairlane
veterán
válasz
PumpkinSeed
#1657
üzenetére
Ezért is vannak olyanok, akik front-endre specializálták magukat. Illetve ez is az oka annak, hogy a CSS-frameworkok használata terjed, mint amilyen pl. a Bootstrap vagy a Foundation.
-
#1653
fordfairlane
veterán
PumpkinSeed
#1652
fordfairlane
veterán
válasz
PumpkinSeed
#1652
üzenetére
A mobile-first tervezés manapság már nem olyan ritka. Említhetném megint a Bootstrapet. Szóval értem én, hogy te hogy szoktad csinálni, de ez azért nem az oldaltervezés nonplusz ultrája.
-
#1650
fordfairlane
veterán
PumpkinSeed
#1649
fordfairlane
veterán
válasz
PumpkinSeed
#1649
üzenetére
Oké, akkor én meg leírtam, hogy hogyan másképp szokás még reszponzívvá tenni az oldal megjelenítését. Ha valami 100% szélességű, akkor pont hogy egymásba csúszhatnak az elemek, ha egy keskeny kijelzőn nézi valaki az oldalt. Éppen a relatív hosszmértékek alkalmazása az, ami sokszor nem elég a különféle képernyőméret - képernyőoldal-arány kezeléséhez, ezért is lett kitalálva az egész media-query szisztéma.
-
#1646
fordfairlane
veterán
PumpkinSeed
#1642
fordfairlane
veterán
válasz
PumpkinSeed
#1642
üzenetére
Nem értem, mit akarsz közölni velem. Középre igazításhoz nincs szükség média querykre. A média querykre akkor van szükség, ha megjelenítőtől függő stíluselemeket szeretnél használni. Például keskeny képernyőn mindent egymás alá pakolsz, széles képernyőn viszont van hely balra-jobra. Ebben az esetben egy bizonyos vízszintes felbontás alatt más stílusdefiníciókat használsz, mint afölött. Ennyi.
A média queryk feltételvizsgálatai nem csak felbontásra, hanem további négy osztályozás is létezik, megjelenítő típusra (screen, print), színmélységre, orientációra (landscape, portrait), és oldalarányra vonatkozhat.
Stílusdefiníciókat megadhatsz úgy, hogy alapvetően asztali gépre, annak a megjelenítőjére tervezed az oldalt, és az ettől való eltérés kezeled külön média-querykkel. Például ha a vízszintes felbontás 640px-nél kisebb, akkor a default stílushoz képest ez meg az az elem eltér. A másik megközelítés, hogy mobileszközre tervezeda megjelenítést, és aztán ahogy skálázódik a megjelenítő fewlbontása felfelé, úgy adod meg az adaptálódó stíluselemeket. Ezt nevezik "mobile-first" stílustervnek. Ezzel a kifejezéssel a Bootstrap 3-nál is lehet találkozni, a készítői is ezzel a mobile-first szemlélettel építették fel pl. a CSS grid rendszert.
-
#1639
fordfairlane
veterán
PumpkinSeed
#1636
fordfairlane
veterán
válasz
PumpkinSeed
#1636
üzenetére
Úgy érti, hogy a reszponzív design a CSS media query-re épül, ami esetében nem csak minimális felbontásra lehet vizsgálni. A felbontást úgy kezeled, ahogy az jól esik. Sőt, vizsgálhatod a színmélységet és sokminden mást. [link]
-
#1544
fordfairlane
veterán
Zedz
#1543
fordfairlane
veterán
A Google-t nem kell letölteni, egyébként ennyi az egész:
Itt becsekkolod a "Latin Extended (latin-ext)" opciót, és alul a hivatkozásban egyből látszik is.
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-
#1542
fordfairlane
veterán
Zedz
#1541
fordfairlane
veterán
Rákattintottam a linkre, kiválasztottam a webfont kit fület, a subsetet hungarianra állítottm, és letöltötem a zipet. A zip-et kicsomagolva a teljes opensans készlet benne van, én csak a light-ot próbáltam. Generál egy példa html-t, ebbe belenyúltam, hogy legyen benne őŐűŰ, és nekem így oké Firefoxban, Chorme-ban és IE-ben is. Legközelebb linkeld légyszi a Google webfontot, hogy ne kelljen ennyit szöszmötölni a teszteléssel.
-
#1529
fordfairlane
veterán
adam_
#1527
fordfairlane
veterán
Én sem ajánlom a CSS preprocesszorokat. Ahogy én látom, egyelőre messze nem olyan mértékű a CSS komplexitása, hogy ezt tovább kelljen vinni. Első körben kerülj képbe az alapvető kliensoldali és szerveroldali technológiákkal, az ilyen build eszközökkel ráérsz később is foglalkozni. Amíg egyszerű az oldal, és nincs rutinod a használatukban, addig inkább csak hátráltatnának.
-
#1506
fordfairlane
veterán
adam_
#1504
fordfairlane
veterán
Viszamenőleges kompatibilitás szempontból a következő a helyzet, nagyon leegyszerűsítve:
A legrosszabb a grid, utána a flexbox, majd az inline-block végül a float - clear, illtve legutolsóként a table-layout. Nem véletlen, hogy a css frameworkok, mint pl. a bootstrap, float-okat használ a layout-grid rendszer lérehozásához. Persze kényelmi szempontból a grid a legjobb, meg a flexbox, utána a többi, és kábé a végén a layout table és a float. -
#1357
fordfairlane
veterán
DNReNTi
#1355
fordfairlane
veterán
-
#1354
fordfairlane
veterán
Sk8erPeter
#1353
fordfairlane
veterán
válasz
Sk8erPeter
#1353
üzenetére
Pontosan. A //-rel kezdődő beágyazásnak megvan az az előnye, hogy ha a host oldal https-es, akkor a beágyazás is az lesz, és nem fog nyafogni a böngésző, hogy secure oldalba nem secure tartalom van beágyazva.
-
#1050
fordfairlane
veterán
Zedz
#1049
fordfairlane
veterán
-
#987
fordfairlane
veterán
csabyka666
#986
fordfairlane
veterán
válasz
csabyka666
#986
üzenetére
egy:
div#form1#form1_button, div#form2#form2_button
helyett
div#form1 #form1_button, div#form2 #form2_button
kettő: Soha többé ne használd így az id szelektorokat. Egyrészt önmagában a button id-je is egyedi, így fölösleges parent elemeket is belevenni (de ha már parent szelektort használsz, akkor rakd be a szóközöket), másrészt ne az ID-t használd stíluskötésre, hanem a stílusokat szervezd osztályba vagy osztályokba, és a megfelelő stílust a class attribútummal alkalmazd a megfelelő elemekre. A class attribútumba szóközzel elválasztva több stílusblokkot is applikálhatsz.
-
#643
fordfairlane
veterán
Speeedfire
#638
fordfairlane
veterán
válasz
Speeedfire
#638
üzenetére
Az UL - OL listáknál line-height-tal érdemes a sortávot beállítani, nem <p> és egyéb oda nem illő elemekkel.
<ul style="line-height: 1.8em">
<li>1</li>
<li>2</li>
<li>3</li>
</ul> -
#503
fordfairlane
veterán
Louloudaki
#501
fordfairlane
veterán
válasz
Louloudaki
#501
üzenetére
IE 6-on border nélkül is jó a hover.
-
#477
fordfairlane
veterán
obidaya
#475
-
#474
fordfairlane
veterán
obidaya
#473
fordfairlane
veterán
-
#472
fordfairlane
veterán
obidaya
#471
-
#440
fordfairlane
veterán
Louloudaki
#439
fordfairlane
veterán
válasz
Louloudaki
#439
üzenetére
Ja hogy ez a kívánt állapot? Akkor oké, bár nekem nem egészen így viselkedik. Ha leegyszerűsítem a problémát, akkor ez nem működik ie6-ban:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div#middle {
width: 300px;
}
div#content {
overflow: auto;
}
</style>
</head>
<body>
<div id="middle">
<div id="content">
<img src="teszt.jpg" width="1000" alt="" border="0" />
</div>
</div>
</body>
</html>Ez viszont jó:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div#middle {
width: 300px;
overflow: auto;
}
div#content {
}
</style>
</head>
<body>
<div id="middle">
<div id="content">
<img src="teszt.jpg" width="1000" alt="" border="0" />
</div>
</div>
</body>
</html> -
#438
fordfairlane
veterán
Louloudaki
#437
fordfairlane
veterán
válasz
Louloudaki
#437
üzenetére
Megnéztem a forrását, és első körben azt ajánlom kipróbálásra, hogy az overflow property-t annál a div blokknál használd, ahol definiálod az oldal szélességét.
-
#436
fordfairlane
veterán
Louloudaki
#435
fordfairlane
veterán
válasz
Louloudaki
#435
üzenetére
Az ie6 a width-et min-width-ként értelmezi. Ha azt akarod, hogy a doboz mindig 600px széles maradjon, akkor overflow: hidden, vagy overflow: scroll-t kell használni.
Mod: Most nézem, hogy nekem az auto is jól működik.
Új hozzászólás Aktív témák
Hirdetés
- Xbox Series X, dobozában, kitisztítva+újrapasztázva, 6 hó teljeskörű gar., Bp-i üzletből eladó!
- Xbox Series X, kitisztítva+újrapasztázva, 6 hó teljeskörű garanciával., Bp-i üzletből eladó!
- Eladó Gopro Hero 10 Black edition sok tartozékkal!!
- Brutál GAMER (I7-9700K/RX 6800 Aorus/Z370-F CHIP)
- Simrig eladó PS5/PC kompatibilis. (olvass leírást.)
- AKCIÓ! Gigabyte B85-HD3 B85 chipset alaplap garanciával hibátlan működéssel
- BESZÁMÍTÁS! 32GB (2x16) G.Skill Trident Z RGB 6600MHz DDR5 memória garanciával hibátlan működéssel
- BESZÁMÍTÁS! XFX MERC 310 RX 7900 XTX 24GB videokártya garanciával hibátlan működéssel
- FÉL ÁR ALATT! Lian Li UNI FAN SL120 RGB 1db-os és 3db-os ventilátor szett garanciával
- Apple Macbook Pro 13 2020 - M1 - 8GB/256GB SSD - Touch Bar - 102 Ciklus - 99% Akku - Ezüst - MAGYAR
Állásajánlatok
Cég: PC Trade Systems Kft.
Város: Szeged
Cég: CAMERA-PRO Hungary Kft
Város: Budapest