Ajj máár.
Látod azt nem tudtam hogy erre a célra csak media queriket lehet alkalmazni.
Ahogy a múltkor említettem, én egy link segítségével próbálkoztam.

XD alias IKSZDé

Hát most ha csak külön mobil nézetet akarsz, megoldható hasonlóan mint itt PH!-n, egy aldomainen. Így elkerülheted a media query-k alkalmazását, de tekintve, hogy hány fajta mobil kijelző méret van, akkor is responsive-re kell írnod a mobil verziót. Akkor meg már sokkal egyszerűbb a layout-ok között váltani media query-vel, mint azt ellenőrizni, hogy az user épp milyen eszközről lépett be, és esetleg átdobni a mobilos aldomainre.

Összegezve az elmúlt hozzászólásokat:
A legjobb, legegyszerűbb, legmodernebb, legkézenfekvőbb megoldás a media query-k használata.

but without you, my life is incomplete, my days are absolutely gray

"én egy link segítségével próbálkoztam"
Ezt hogy érted?

Egyébként igazából nem értem, mi a probléma, nem értem, hogy miért akarsz feltétlenül mást használni, mint a media query-ket, kerülöd a problémát innen-onnan, aztán előbb-utóbb úgyis rájössz, hogy az fog kelleni, és akkor már értelmesebb lenne eleve azzal kezdened, főleg, hogy már összességében többszáz hsz.-t produkáltunk a témában neked válaszul, a moderátor által töröltekkel együtt biztosan.

Sk8erPeter

De konkrétan mi az, amit nem vágsz rajta? Ha csak a felbontásokra nézzük, akkor egyszerű példával élve annyit mondasz egy-egy feltétel meghatározásával, hogy ekkora szélességre így nézzenek ki ezek és ezek az elemek, akkora szélességre meg úgy, egy tök másik szélességre megint másképp... például ebben is segítenek a media query-k, így tudod elintézni, hogy különböző felbontással (vagy egyéb paraméterekkel) rendelkező eszközökkel megnézve az oldalt (vagy amikor más paraméter teljesül) is élvezhető legyen az egész.
Meg még sok más paramétert is lehet említeni, amikről korábban szó volt (színmélység, blabla; meg lehet simán megtekintéshez ilyen, nyomtatáshoz meg amolyan stílust alkalmazni az oldalra, stb.).
Szerintem bonyolultabbnak gondolod ezt az egészet, mint amilyen.

Leegyszerűsítve ennyiről szól az egész: csinálsz egy-egy blokkot, amiknek a fejlécébe egy-egy feltételt teszel (a feltételek tetszés szerint kombinálhatók logikai ÉS-, VAGY-, ill. NEM-kapcsolattal), ha ezek a feltételek teljesülnek, akkor a böngésző az abban a blokkban szereplő stílusdefiníciókat érvényre juttatja. Ha a feltételek nem teljesülnek, akkor egyszerűen ignorálja őket.

[ Szerkesztve ]

Sk8erPeter

Sziasztok!

Ha egy oldal elkészült, egyszerűen teszteljem le minél több browseren / displayen, hogy hogyan néz ki rajta az oldalam? Vagy mi a "best practice"? Gondolok itt olyanokra, hogy pl. hogy ugyan ha szorgosan írogattam a prefixeket, hogy ne legyen kompatibilitási hiba a különböző böngészőknél, de mivan ha mégis valamit valahol kifelejtek? Nem létezik erre valamilyen oldal, ahova ha beillesztem a kódom, az magától korrigálja az adott kódot (etc. prefixekkel ellátja ahol kell), hogy a legtöbb böngészőnél szépen lehozza az oldalam?

Egy ilyet találtam, bár még nem ismerkedtem meg vele jobban, ez pl. arra szolgálhat? Mert ahogy olvastam, ez egy post-proci, miben más a SASS / LESS kombó, az már az írás pillanatában korrigálja prefixekkel, vagy teljesen máshol kapizsgálok?

Előre is köszönöm az észrevételeket a szakmában lévőktől.

[ Szerkesztve ]

Vannak erre tool-ok pl a BrowserStack. Sajna nincs ingyen, sőt egyenesen drága. Én IE 11,10, 9-en, Chrome, Firefox, Safari, és Opera legfrissebb verziókon tesztelek. Plusz Android böngésző és Chrome mobil. A problémák elkerülésére ott a CanIUse. Ha egy ritkábban használt, vagy újabb attribútumot használsz nézd meg milyen függőségei vannak, ha vannak és úgy használd. Így nem lesz gond.

A preprocessoros kérdést nem teljesen értem.
A SASS / {LESS} jóval többre képes attól, hogy prefixeket rak.

but without you, my life is incomplete, my days are absolutely gray

Sziasztok.

Ezzel mi lehet a baj?

@media screen and (max-width: 600px) {
#page {
background-color: red;
font-size: 16px;
}
.img_container { widht: 200px; height: 145px;}
}

Azt akarom elérni hgy ha mobilról nézik az oldalt, akkor a fenti kódban lévő dolgok legyenk érvényben.

A background-color: red; csak próba képpen került bele, ( eddig működik.)
Tehát ha telefonról nézem az oldalt akkor a #page piros lesz.

A többi tulajdonság viszont valamiért nem érvényesül. Azt szeretném ha mobilról pl eleve nagyobb betűméret lenne a #page-en belül mindenhol. ( Ezért van ott a font-size: 16px;

illetve az img_container is nagyobb kellene hogy legyen valamivel mint ahogy alapból jelenik meg telefonról. ( gépről 3 van belőlük egymás mellett, de telefonról csak kettesével lesznek egymás mellett)

Viszont valamiért nem tudom működésre bírni ezeket, csak a piros színű #page működik.

Valaki tudja hogy mi lehet a baj?

Érdekesség még hogy ha azt mondom hogy #page {
width: 100%
}
akkor az egész oldal szétcsúszik és össze vissza van minden.

[ Szerkesztve ]

XD alias IKSZDé

Köszönöm szépen, így már nem lesz gond, ha én is tesztelek manuálisan. Amúgy az általam linkelt oldal nem ehhez hasonló amit küldtél, csak ingyenesbe?

Igen, a SASS / LESS kombóval majd még ismerkednem kell, mert nem igazán ismerem a funkcióit még. De ahogy javasoltátok, azzal ráérek csak később foglalkozni..

Tudod jól a kulcsszót... Biztos még kétszázszor le kell írni, hogy rögzüljön.
Amúgy ilyeneket, mint a widht, tényleg beleírsz a kódba? Tehát kimásoltad azt a kódrészletet, vagy ezt csak bepötyögted? Keresd a hibát a szóban! Csak mert ha szintaktikai hibákkal van tele a stylesheet - az is az, hogy nem zártad le a sort pontosvesszővel a hsz.-ed legvégén lévő kódrészletben -, akkor nem várható el, hogy jól működjön. Ilyenek miatt is érdemes tisztességes fejlesztőkörnyezetet használni, mert az szól a hibákért.

[ Szerkesztve ]

Sk8erPeter

Amit linkeltél, biztos nem rossz, utólagos kiegészítések, javaslatok miatt használhatónak tűnik (bár nem teszteltem, csak az alapján, amit írnak az utófeldolgozó scriptről). Szóval simán használhatod ellenőrizgetésekre.
Amit DNReNTi linkelt, az teljesen más, az sok környezetben és eszközön teszi lehetővé az oldala(i)d tesztelését, hogy megtudd, azokon hogy néz ki, anélkül, hogy fizikailag rendelkezésedre állnának ezek az eszközök.

Sk8erPeter

Sziasztok.

Az oldalamon majdnem minden menüpontban vannak img_containerek, ezek alá pedig egy pár soros összefoglaló szöveget írok.
Az a probléma, hogy ha az egyik img_container alatt mondjuk 5 sornyi szöveg van, a többi alatt pedig 6 soros, akkor az egyik img_container egy picit elcsúszik a többihez képest.

Nem tudjátok hogy ezt hogyan lehetne kiküszöbölni?

.img_container {
display: inline-block;
left: 50px;
margin-left: 40px;
margin-top: 50px;
width: 230px;
height: 175px;
max-width: 230px;
max-height: 175px;
padding: 0;
position: relative;


.img_container img {
width: 230px;
height: 175px;
max-width: 230px;
max-height: 175px;
border: 2px #A9A9A9 ridge;
}
.img_container a {display: block;}

.img_container p {
margin: 0 auto;
}

Ez volna a hozzá tartozó css kód.

[ Szerkesztve ]

XD alias IKSZDé

Azt hittem hogy ti már annyira profik vagytok hogy így is tudni fogjátok.
Most megint nem vagyok otthon estig, de akkor ha hazaértem rögtön küldöm. Jsfiddle példát.

XD alias IKSZDé

Nos, próbálkoztam egy [jsFiddle] példa elkészítésével, de sajnos nem egészen úgy néz ki mint nálam.

Elősször is nem tudom hogy képet hogyan lehet itt beszúrni, ráadásul a jsfiddle-ben a szöveg sem az img_container alatt van hanem mellette.

XD alias IKSZDé

Hát ez kellemetlen. Ha majd sikerül, szólj.
A kitöltőképek beszúrására (hogy ne látsszon a ronda ikon, hogy nem elérhető a képed) ajánlom ezt:
http://placehold.it/

"Elősször is nem tudom hogy képet hogyan lehet itt beszúrni"
Na ne... Próbálkozz erősebben.

[ Szerkesztve ]

Sk8erPeter

De akkor sem világos hogy ha nálam a szöveg az img_container alatt van, akkor itt miért nem?
Az a baj hogy így nem tudom megmutatni hogy mi a problem az oldalamon.

Ha pedig most átszerkesztem a kódot hogy a jsfiddle is úgy mutassa ahogy nálam jelenik meg, akkor pedig más lesz a forráskód mint ami nálam van, az pedig nyílván nem célra vezető.

XD alias IKSZDé

Valami ilyesmi a cél?

Egyébként ne vedd bántásnak, inkább tanács: kicsit odafigyelhetnél a kódodra. Most is olyan alap hiba volt benne, hogy elképesztő, bár nem az volt az eredeti probléma okozója. Több hónapnyi tanulás után már nem kéne előfordulnia, hogy lehagyod a záró tag-et egy CSS definíció végéről.

Az eredeti problémára pedig a vertical-align attribútum használata a megoldás.

but without you, my life is incomplete, my days are absolutely gray

Igen a vertical-align: top; hiányzott.

Köszönöm. és megfogadom a tanácsodat is.
Köszi mégegyszer.

XD alias IKSZDé

Mindent használni fogok meg minden.
Csak azért nem reagálok a válaszaitokra mert dolgozok az oldalon.

Mindent köszi mindenkinek, jelentkezem ha elkészültem.

XD alias IKSZDé

Sziasztok.

Előre szólok hogy nem vagyok otthon, így nem tudok jsfiddle példát küldeni, így tehát csak egy elméleti kérdésnek szánom az alábbit.

Valaki a múltkor szólt hogy a containernek amiben az egész oldal van, nem szokás előre meghatározni a magasságát. Ez idáig oké, csakhogy az oldalamon valahol elég nagy mennyiségű tartalom van , de van olyan menüpont ahol még alig van valami.
És azok a menüpontok ahol kevesebb a tartalom, nagyon hülyén néznek ki.
Egészen pontosan úgy, hogy a container kb 100 px; magas amit gondolom el tudok képzelni hogy miként mutat.
Ugyanakkor ott ahol nagyobb mennyiségű tartalom van, majdnem minden jó, de mégsem mert egy bizonyos határ után "kifutok" a container alá.

Szóval a kérdésem az volna hogy ezt ti hogyan szoktátok csinálni?
Mert én most előre megadtam neki egy jó nagy értéket magasságként de ez sem az igazi mert mindíg hozzá kell adni valamennyit ha már nem elég magas.

XD alias IKSZDé

Te magad meg is válaszoltad a saját kérdésedet.
Eccerű logika. Ha az elemeidbe random mennyiségű tartalom kerül, akkor az elemek magassága is random lesz. Értelemszerű tehát, ha megadsz egy fix magasságot, akkor lesz amikor a tartalom nem tölti ki, illetve lesz amikor a tartalom kifut az elemből. Folyománya: random tartalomhoz hülyeség fix magasságot állítani. (Most figyelmen kívül hagyva, hogy lehet scroll-t beállítani az elemekre, ami szerintem roppant igénytelen 90-es éveket idéző megoldás.)

but without you, my life is incomplete, my days are absolutely gray

Igen, az világos hogy nemnjó ha fix magasságot adok neki, DE...
Ha nem így teszek, akkor viszont azon menüpontok amelyekben sokkal kevesebb elem vagy karakter van, előfordul hogy csak 100-200px; magas container van.

Ez pedig nagyon ronda. Ezzel nem lehet valamit kezdeni?

XD alias IKSZDé

Dehogynem, kb ugyanannyi tartalmat raksz bele és akkor kb egyformák. Most amúgy kicsit meg vagyok zavarodva. Egy menüben egyáltalán minek van ennyi cucc?

but without you, my life is incomplete, my days are absolutely gray

Van olyan menüpont ahol MÉG nem nagyon van semmi, majd csak akkor kerül oda is több dolog amikor már hosszabb ideje üzemel az oldal.

Amúgy az jutott eszembe hogy mi lenne, ha adnék neki egy min-height: 1500px;-t?
És így elméletileg orvosolnám a problémát, de ezt majd holnap ki is próbálom.

[ Szerkesztve ]

XD alias IKSZDé

Látatlanba nem tudok mit mondani. De komolyan kíváncsi vagyok mifajta menü az ami 1500px magas. Szóval ha más nem egy jsfiddle-t pattints majd fel.

but without you, my life is incomplete, my days are absolutely gray

Nem a menu 1500px; magas XD.
Én a containerről beszélek.

Pl : főoldalon viszonylag sok elem van, így a container normálisan néz ki.
De ha átmegyek egy másik menüpontra, ahol kevesebb elem van a CONTAINERBEN, akkor ott a container sokkal, sokkal "alacsonyabb"
Ezt úgy képzeld el hogy pl a főoldalon kb 1500px; magas lehet a container, de a másik menüpontban ahol kevesebb elem van elhelyezve, ott kb olyan 200px; lehet a container magassága.
Ez pedig úgy néz ki mintha abban a menüpontban a container helyén egy vastag fehér csík lenne.

Nem tudom máshogy mondani.

XD alias IKSZDé

Bevallom egyre inkább nem értem. Szóval majd ha látom okosabb leszek.

but without you, my life is incomplete, my days are absolutely gray

Igen, ilyenkor az a megoldás, hogy adsz egy min-height tulajdonságot a fő tartalmazó elemnek, hogy ne nézzen ki olyan bénán, hogy csak egy kis vékony csík látszik a helyén. De az 1500px igen erős túlzásnak tűnik, akkor meg azért néz ki hülyén, mert van egy óriási rész még a tartalom alatt, amihez tök fölöslegesen scrollozni kell mondjuk egy kisebb kijelzőn...

A menü amúgy oldalt van vagy fölül?

(#1933) DNReNTi:
Arról beszél, hogy van egy olyan menüpont, ahol mondjuk csak egy mondatnyi tartalom van. Ekkor meg az őt körbeölelő tartalom is nagyjából akkora, mint az az egy mondat, és így a hátterével együtt olyan, mint egy vékony csík (a többi menüpontban több tartalom van, így azok nem néznek ki hülyén). Na és azt akarja, hogy kicsit jobban kitöltse a teret az ilyen kevés tartalommal levő részeken is a fő konténerelem háttere, hogy ne legyen ezeken a helyeken ilyen csíkszerű, szóval meg kell növelni a min-height-et, azt' kész.

[ Szerkesztve ]

Sk8erPeter

Értem, akkor valszeg majd csak 800 lesz a min-height.

Egyébkent tényleg ennyire érthetetlenül fogalmazok?
Mert szerintem máshogy aligha lehetne az előző kérdést megfogalmazni.

Vagy lehet hogy az a baj hogy nem szak kifejezéseket használok? .

XD alias IKSZDé

Rögzített lábjegyzet, avagy a fixed footer: [link] Kezdésnek jó lesz talán. Vagyis tudja fene, itt részletesebben le van írva a szükséges markuppal, csak hát sok az angol szöveg.

Uhh, időcsapdába kerültem, az előbb még nem volt válasz.

[ Szerkesztve ]

Let's begin, de gozaimasu!

Bazki. Soha nem jöttem volna rá, hogy erről beszélünk.
Erről beszélünk?

but without you, my life is incomplete, my days are absolutely gray

Szólítsatok csak suttogónak.

Másra amúgy nem tudok gondolni, ha nem ez lenne az...illetve, hogy ponstosabb legyek, nem fixed, hanem sticky footer kell valószínűleg. Gondoltam csak segítek elindulni, de most már kíváncsi vagyok a produktumra.

honda: sticky footer

Let's begin, de gozaimasu!

Holnap megnézem és eldől hogy melyik megoldás válik majd be. Köszi.

XD alias IKSZDé

Ez most hogy jön ide?

(#1937) DNReNTi:
Nem, szerintem rohadtul nem erről van szó. Ha igen, akkor zseniális ez a hozzászólásfolyam.

[ Szerkesztve ]

Sk8erPeter

Ha valaki meg szeretné tanulni a Bootstrap használatát, akkor ez egy egész fasza oktatóanyag videóval és gyakorlati feladatokkal:
https://www.codeschool.com/courses/blasting-off-with-bootstrap
Ez sztem nyugodtan linkelhető kezdőknek, vagy annak, aki stabilabbá szeretné tenni az alapokat, és/vagy lusta a doksit végigolvasni, amennyit végigkattintgattam belőle, az alapján elég jól ki van találva az anyag. (Haladóknak fölösleges végignyomni, amik itt vannak, azok tényleg az alapok.) Persze angoltudás kell hozzá.

[ Szerkesztve ]

Sk8erPeter

Csak azért gondoltam, mert hát mi más lenne csúnya, hogy ha nincs tartalommal feltöltve az oldal, mintsem a lap tetején ékeskedő footer. Remélem lehull a lepel erről a kérdésről, most már én is kíváncsi vagyok.

Más.
Épp nézek egy tutorialt és kettő dolgot is furcsállok.
Egyrészt a színeket végig hsl(a)-ban adja meg a fejlesztő, másrészt ezt és betűméretek is duplán deklarálja "fallback" ként a szokványos egységekkel.

Magyarul pl:

font-size: 10px;
font-size: 1rem;

Ennek lenne bármi jelentősége manapság?
Illetve érdemes akármennyire is foglalkozni a hsla-val vagy tök felesleges?

szerk.: na jó, talán az IE8 nem tudja mi az a rem...

Let's begin, de gozaimasu!

Első felére: szerintem ez elég egyértelmű, hogy köze nincs a footerhez. Végig a .container osztállyal ellátott elemről beszél, tehát az érdemi tartalmat körbeölelő részről, ami ha el van látva egy háttérrel, de épp nagyon kevés a tartalom, akkor hülyén mutat, ha csak egy csíknyi részt foglal el az oldalból. Ergo a megoldás a min-height tulajdonság megadása/megnövelése. Ebből csak fura indirekciókon keresztül lehetne oda eljutni, hogy a footerrel lenne probléma...

Második felére:
Ha ilyen kérdések merülnek fel, akkor szerintem a Stack Overflow egy igen jó forrás, a kapott pontokból a legtöbb esetben lehet sejteni egy hozzászólás igazságtartalmát (még ha vannak helyenként csak reflexből upvote-olt hsz.-ek is, amik nem biztos, hogy annyi pontot érdemelnének, többnyire ez kevésbé jellemző), és általában mások összeszedik azt a tudásbázist, amit egyébként sok egyéb helyről kellene összekaparni.

A px/em/rem problémával kapcsolatban itt van egy vonatkozó thread a sok közül:
http://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css
Még egy megközelítés:
https://j.eremy.net/confused-about-rem-and-em/

[ Szerkesztve ]

Sk8erPeter

Van egy div-em, rajta border radiussal, azt szeretném megoldani, hogy ha a div felé húzom az egeret akkor a border radius megváltozzon, mondjuk 0.5s alatt. Azt nem tudom megoldani, hogy így maradjon addig ameddig rajta van az egér. Ebben kérnék segítséget.

Ami eddig meg van:

#menupont:hover{
-webkit-animation: linkanimation 0.5s;
animation: linkanimation 0.5s;
}
@-webkit-keyframes linkanimation {
from {border-radius: 25px 0px 25px 0px;}
to {border-radius: 0px 25px 0px 25px;}
}
@keyframes linkanimation {
from {border-radius: 25px 0px 25px 0px;}
to {border-radius: 0px 25px 0px 25px;}
}

Ugy ugy. De telefonrol most en se kottazom be.

but without you, my life is incomplete, my days are absolutely gray

Itt egy gyors példa.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

Mert ide nem animation kell, hanem egyszerű sima transition.

Codepen

div {
// saját propertyk
border-radius: 25px 0px 25px 0px;
transition: border-radius 0.5s ease-in-out;
}

div:hover {
border-radius: 0px 25px 0px 25px;
}

Szerk.: Bocsi, nem vettem észre az előző hozzászólásokat.

Szerk2.: Jah azért nem vettem észre, mert másik topikból lett linkelve

[ Szerkesztve ]