Ú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
- Témázgatunk, témázgatunk!? ... avagy mutasd az Android homescreened!
- Okos Otthon / Smart Home
- Házimozi belépő szinten
- AMD K6-III, és minden ami RETRO - Oldschool tuning
- Diablo IV
- Azonnali informatikai kérdések órája
- Linux kezdőknek
- Telekom mobilszolgáltatások
- Állítólag megérte kitiltani az okostelefonokat az iskolákból
- OLED TV topic
- További aktív témák...
- Valve Index VR Kit
- Uhh Lenovo ThinkPad P15 G2 Tervező Vágó Laptop -75% 15,6" i5-11500H 16/1TB RTX A2000 4GB /1 Millió/
- Esport PC - i5 13400F, GTX 1080ti és 16gb DDR5
- Ohh Lenovo ThinkPad P15 G2 Tervező Vágó Laptop -75% 15,6" i5-11500H 32/1TB RTX A2000 4GB /1 Millió/
- AZTA! HP EliteBook 840 G8 Fémházas Laptop Ultrabook 14" -60% i7-1185G7 16/512 FHD IPS Iris Xe
- Telefon felvásárlás!! iPhone 16/iPhone 16 Plus/iPhone 16 Pro/iPhone 16 Pro Max
- Dell D6000 univerzális dokkoló USB-C/ USB-A, DisplayLink & Dell WD15 (K17A) USB-C + 130-180W töltő
- DELL PowerEdge R640 rack szerver - 1xGold 6138 (20c/40t, 2.0/3.7GHz), 64GB RAM,4x1G RJ, HBA330, áfás
- Samsung Galaxy A40 64GB, Kártyafüggetlen, 1 Év Garanciával
- ASUS Radeon HD6950 DirectCU II 2GB 256bit GDDR5 EAH6950 DCII/2DI4S/2GD5 Videokártya eladó
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest