Új hozzászólás Aktív témák
-
fordfairlane
veterán
-
fordfairlane
veterán
válasz
norbert400 #2295 üzenetére
-
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.
-
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] -
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;
...
} -
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.
-
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.
-
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.
-
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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]
-
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'>
-
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.
-
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.
-
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. -
fordfairlane
veterán
-
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.
-
fordfairlane
veterán
-
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.
-
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> -
fordfairlane
veterán
válasz
Louloudaki #501 üzenetére
IE 6-on border nélkül is jó a hover.
-
fordfairlane
veterán
-
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> -
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.
-
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