Sziasztok!

Lenne egy apró problémám. Van egy tábla az oldalon, ami középen helyezkedik el. Ez lenne a váza az oldalnak. Ezen belül pedig vannak a div-ek. Szeretném úgy beállítani, hogy a váz átlátszó legyen. Ez eddig okés is, viszont ha az opacity-t beállítom, akkor nem csak a tábla lesz átlátszó, hanem minden olyan div is, ami ezen belül van. Tudnátok ebben segíteni?
Valami olyasmire gondoltam, mint a TWOO főoldala is. jobb oldaon van egy széles sáv, ami átlátszó, viszont a rajta lévő div-ek már nem.

A CSS kódóm:

table.main {
width: 1200px;
margin: 0 auto;
background: #3b3a3a;
border-radius: 5px;
padding: 10px;
opacity: 0.8;
}

#logo {
margin-top: 35px;
float: left;
border: 0px;
}

#login {
float: right;
margin-top: 70px;
border: 1px solid #f5efef;
border-radius: 5px;
color: #edf5f7;
padding: 5px;
box-shadow: 5px 5px 10px #4c4c4c;
background: #3b3a3a;
}

a logo és a login a main-en belül van.

Opacity helyett: RGBa háttér. Az RGB-t remélem nem kell magyarázni, az 'a' az alpha (az átlátszóság). JSFiddle.

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

Köszönöm, tökéletes
Nem, nem kell magyarázni az RGB-t.

Az miért van, hogy egy <label> tag width: valamennyije csak azután aktivizálódik ha display: inline-block-ot adok neki?

"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 a label az default inline elem, azok width attribútuma automatikus, de ha megváltoztatod inline-block-ra, akkor megkapja a blokkelemek áldásos tulajdonságait, például, hogy megadható a szélessége.

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

Ilyenkor nézd meg a webfejlesztő panelnél a Computed fülön a display-tulajdonságot - itt azt is látod, ha a böngésző alapértelmezett tulajdonsága érvényes, illetve azt is, ha egy vagy több egyéni beállítás felülbírálta ezt.

Ja, amúgy itt láthatsz listát az inline vagy blokkszintű elemekről:
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

[ Szerkesztve ]

Sk8erPeter

Egy ideje már használom a SASS-t, de lehet ki kellene próbálni a konkurens LESS-t is. A kérdésem az lenne, hogy van valakinek tapasztalata mindkettő preprocesszorral kapcsolatban? Olvasgattam már összehasonlítást, és több cikk a SASS-t hozza ki győztesként. Esetleg valaki ezt meg tudja erősíteni, cáfolni?

[ Szerkesztve ]

Ha van időd és energiád rá érdekességképpen megismerkedhetsz a LESS-el is, de szvsz ha már SASS user vagy, teljesen felesleges. Mivel már a SASS-t használod a legnagyobb "negatívumát" (install, inicializálás) már le is küzdötted, ráadásul a LESS ismereteim szerint semmivel nem tud többet, mint a konkurencia. Plusz - tudom béna megközelítés - ha PHP-t is használsz szerintem az életben nem fog ráállni a kezed a LESS változókra.

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

Azért érdekel, mert 2 CSS framework is a LESS-t használja, és kíváncsi vagyok mi lehet ennek az oka. Gondolom nem random pickeltek egyet, és nosza írjuk egybe. De így kis olvasgatás után eddig nálam is a SASS élvez előnyt. Például az istenért sem találom azt, hogy LESS-szel lehet-e figyeltetni egy könyvtárat, és real-time fordítson mindent. SASS-ban ugye csak simán sass --watch x:y.

Önmagában szerintem a LESS nem tudja, úgy ahogy a SASS sem. Ott is a Compass tudja ezt. Bár én állítok be rá mindig file watcher-t az IDE-ben, így nem kell mindig parancsolgatni, és az output-ot is szinkronizálja. Azt elvileg a LESS-re is lehet, bár még nem próbáltam.

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

"Azért érdekel, mert 2 CSS framework is a LESS-t használja, és kíváncsi vagyok mi lehet ennek az oka. Gondolom nem random pickeltek egyet, és nosza írjuk egybe."
Szerintem különösebben nem érdemes rajta agyalni, egyszerűen valamelyikkel kezdték, azt találták szimpatikusabbnak, az náluk bevált. Nem álltak át a SASS-ra, mert a LESS segítségével is el tudták érni, amit akartak. Ha a SASS lett volna az első, akkor arra mondanák azt, hogy el tudták érni vele, amit akartak. Mindkettőre nyilván lehet példát találni, szóval ez olyan, mint azon gondolkodni, miért pont barnás lett a PH! fórumának háttere.

"LESS-szel lehet-e figyeltetni egy könyvtárat, és real-time fordítson mindent"
Csak egy kis kiegészítéssel:
http://www.hongkiat.com/blog/less-auto-compile/

Ha adhatok egy tanácsot, ahelyett, hogy most kíváncsiságból elkezded tanulgatni a SASS után a LESS-t is, mert miért ne, inkább mélyítsd el a tudásodat valami hasznosabb nyelvben.

Sk8erPeter

Ezt a linket megtaláltam én is, csak reménykedtem, hogy tudja magától is.

"inkább mélyítsd el a tudásodat valami hasznosabb nyelvben."

Szabadidőm jelentős részében JS-ezek, Jim-Y segít benne sokat. Ez a LESS-es dolog csak onnan jött, hogy az otthoni gyakorló projecteken nem akarok a sitebuildre fókuszálni. Hogy ki is nézzen valahogy gondoltam csak berántok valami CSS frameworköt.

[ Szerkesztve ]

Ha már ez a téma belinkelem: Sass vs. LESS @CSS-tricks

Én nagyon picit foglalkoztam less-el, majd pár hét után gyorsan áttértem a sass-ra, főként a cikk miatt, illetve nálunk szerencsére a munkahelyen a projecten is ezt kezdtük később használni.

Csak hogy kötekedjek már, mer most olyan kötekedhetnékem van:
"nem akarok a sitebuildre fókuszálni. Hogy ki is nézzen valahogy gondoltam csak berántok valami CSS frameworköt."
Egy: teszteléshez, tanuláshoz, gyakorláshoz teljesen mindegy milyen szörnyen néz ki az egész, sőt igazából a csicsa, meg a finomhangolás még akadályoz is, mert eltereli a figyelmed a lényegről. Kettő: ha nem akarsz a kinézetre fókuszálni, de mégis behúzol egy FW-öt, akkor nem mindegy azt mi hajtja?

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

Gyere pubi pakolj fel!

Egy: teszteléshez, tanuláshoz, gyakorláshoz teljesen mindegy milyen szörnyen néz ki az egész

Szerintem ezt embere válogatja. Én szeretek szép, rendezett környezetben dolgozni, legyen ez akár egy teszt project vagy éles project. Jobb érzés olyanon dolgozni, mint ami tetszik nekem, és nem egy motherfucking oldalon.

+ ennyivel is többet foglalkozok a CSS résszel, és lehet egyszer éles projecten még kamatoztatom ezt a pár perc ráfordítást. Nem sok az esélye, de bármi előfordulhat!

Amúgy most a React JS-t próbálom nyúzni, ami pont UI építésre lett kitalálva.

Kettő: ha nem akarsz a kinézetre fókuszálni, de mégis behúzol egy FW-öt, akkor nem mindegy azt mi hajtja?

Mindegy, de engem érdekel, hogy miért az hajtja, ami. Mi az oka a választásnak. Persze ahogy írtad, és Sk8erPeter is mondta, lehet teljesen felesleges ezen agyalni.

Probald ki a material-ui for react-ot. Ez less-t hasznal, tehat ket legyet uthetsz egy csapasra, 2015-ben ugyis a mui lesz a porondon, szoval mar harom legyet uthetsz egy csapasra

- react gyakorlas
- less ismerkedes
- mui ismerkedes

A githubos projekted alapján már utánanéztem ennek a frameworknek, és igazából ezért is tettem fel itt a téma indító kérdést. Közben Googleztam egy SASS-ra átépített verziót is, szóval létezik ilyen verziója is. Ha jól látom nem gyári variáns, valaki forkolta szabadidejében. De ettől függetlenül lehet kipróbálom a LESS-t is.

Búkmárkolni való: megújult CSS Reference a Codrops-on.

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

Hogyan lehetne belőni, hogy egy 3 oszlopos layout magassága mindig az adott képernyő 100% legyen, se több, se kevesebb? Ergo, ha a footer és a header között egy adott tartalom rész hosszabra jönne ki mint az egész képernyő, oldalt egyszerűen görgethető legyen lefelé az adott tartalom.

Előre is köszönöm az instrukciókat.

[ Szerkesztve ]

Ezt kicsit nem értem.
A header meg a footer maradjon a helyén? (=> position: fixed; )
A 3 oszlop equal height pedig: [link]

[ Szerkesztve ]

Köszönöm, arra gondoltam igen, hogy egy 3 oszlopos layout magassága mindig megegyezik az adott kijelző maximális magasságával. Igen, és biker válaszára reagálva, a középső oszlopban található tartalom, ha hosszabb lenne, mint az adott konténer, akkor scrollozható legyen.

[ Szerkesztve ]

Nem tudom ismeritek-e a http://quirktools.com/ oldalt, elég jó kis tesztelős téma.

Ehhez kapcsolódik a kérdésem. Elég bosszantó, amikor a 20. tablet/mobil fajtán tesztelem a honlapomat, és mindegyiken persze, hogy másképp néz ki. Egyenlőre "kézzel írt" media querykkel oldom meg a responsive elemeket, lentebb mellékelem. A mostani projektemben meg csak az szerepel, hogy "tabletre" is, meg ájfóónra is kellene fejleszteni. Még nincs mögöttem annyi projekt, hogy ezt tapasztalatból tudnám kezelni, de elsőkörben ezt az ügyféllel kell megbeszélni, behatárolni, hogy mely típusú tabletekre, etc. telefonokra kellene fejleszteni,? Általában ez is behatárolható a projektben (vagy csak mobil / tablet / desktop, esetleg desktop HD van? (és ugye itt jön, hogy mobilból és tabletből is már millió egy kijelzőméretű van...) ..

Vagy egyszerűen a kézzel írt media query-k helyett Bootstrap / Foundation etc. használatával ezek a cross-platform responsive problémák könnyedebben orvosolhatóak?

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Köszönöm a válaszokat,

Ádám

[ Szerkesztve ]

Így hirtelen amit észrevettem: azt ugye tudod, hogy itt átfedés is lehet?

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

A max-nak a következő query min-jénél kellene 1-el kisebbnek lennie, szóval:

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1023px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

Második körben szerintem kicsit túlbonyolítod. Teljesen mindegy, hogy egy eszköz kijelzőszélessége mondjuk 320px vagy 350px. Nem fix szélességre állítjuk itt az elemeket, hanem engedjük folyni/csúszni a maximális szélességig. Sőt szerintem a and (orientation : portrait) query is felesleges.

Szerintem nézegesd meg pl. a bootstrapot, ott elég jól el van ez találva. [link]

Alapesetben az alábbi breakpointok vannak:

@media (max-width: 479px) {

@media (min-width: 479px) and (max-width: 767px) {

@media (min-width: 768px) and (max-width: 991px) {

@media (min-width: 992px) and (max-width: 1199px) {

@media (min-width: 1200px) {

ügyféllel kell megbeszélni, behatárolni, hogy mely típusú tabletekre, etc. telefonokra kellene fejleszteni,?

Ezzel pedig nem értek egyet, kinézetet/megjelenést/dizájnt nem eszközökre fejlesztünk, hanem felbontásra. Az persze más kérdés, hogy sok eszköz teljesen más motort használ, így sajnos bizonyos css porpertyk jócskán eltérhetnek támogatottságban. Ebből egy jó kis vicces/elszomorító slide: [link]

szerk.: Megnéztem ezt a quirktools-t, egyelőre nem látom mivel nyújtana többet mondjuk a google chrome device emulation tooljánál

[ Szerkesztve ]

Létezik vmi bevált módszer, hogy Windows alatt normàlisa fusson a SASS? Próbáltam nodeJS, Ruby, és egyéb toolsok, pl.: http://mhs.github.io/scout-app/ segítségével, de egyszerűen nem megy. Még végső soron Visual Studiot ajánlották, annak van egy jó "kiegje" amivel talán lehetőségem lenne rá. Most egyenlőre ezért nem akarok Linuxot telepíteni, Mac-et venni. Kezdő vagyok, de már most vili, hogy a Windowst miért nem fejlesztésekre alkották meg...

Mi az, hogy "nem megy"? Részleteznéd, hogy miket tettél idáig, és konkrétan mit is tapasztalsz?

"Kezdő vagyok, de már most vili, hogy a Windowst miért nem fejlesztésekre alkották meg..."
Jaj. Könyörgöm, ne higgyél már el minden baromságot, amit valami idióta kretének kitaláltak és terjesztenek. Ezenkívül attól, mert most szerencsétlenkedsz valamivel, és nem jön össze, még nem a Windows a hibás, már bocs. Nagyon sok fejlesztő tök jól elvan Windows-on.
Nagyon is alkalmas a Windows is fejlesztésekre, csak beszűkült látókörű elvakult gyökér Linux- (esetleg Mac-?) fanok mondják azt, hogy nem az. Linuxon ÉS Windows-on is nagyon jól lehet fejleszteni. Kész. Nincs olyan, hogy melyiken jobb. Az a jobb, amelyik neked jobban tetszik. Szimplán szubjektív a dolog. Ha az objektív tényeket nézzük, mindkettőn jó eszközök, IDE-k állnak rendelkezésre, mindkettőn jól lehet scriptelni, blablablablabla... annyira unalmasak már ezek az újból és újból előkerülő "melyik az igazi"-témák. Próbáld ki és döntsd el, melyik tetszik jobban, és akkor számodra az lesz a megfelelő választás.

Sk8erPeter

Sk8erPeter
Teljesen egyetértek.

adam_
Hidd el, teljesen jól lehet használni. Én használom melóhelyen nodejs/grunt/grunt-sass összeállításban, otthon pedig ruby193/sass/koala összeállításban win7-en mindkét esetben.

Amúgy talán a legegyszerűbb és legkönnyebben összeállítható a koalás verzió.

[ Szerkesztve ]

"Még végső soron Visual Studiot ajánlották, annak van egy jó "kiegje" amivel talán lehetőségem lenne rá. Most egyenlőre ezért nem akarok Linuxot telepíteni, Mac-et venni."

bocsánat, de ezek az egyesek szerint min fut a Visual Studio? Halkan megsúgom, hogy kizárólag windows-on. Minden ASP.NET-es projektemben SASS-t használunk, sose volt vele gond.

Azt éppen nem írtad le, hogy per pillanat milyen környezetben fejlesztesz, szóval éppen a lényeget hagytad ki.

Én kérek elnézést!

A többiekkel vagyok.
Nálam is teljesen szuper.
Win7, PHPStorm (de ugyan úgy jó WebStorm-ban és IDEA-ban), Ruby, Compass, SASS.
Kis segítség: [link], [link]

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

Nyilván csak Macen lehet dolgozni! Windows? Pfúj!

(#1981) adam_ Miért nem megy Windowson? Mi a konkrét problémád? Leszedted a Rubyt, telepítetted a SASS-t?

Amúgy most pont nem volt a gépemen se Ruby, se SASS (reinstall után nem került rá még), úgyhogy direkt kíváncsi is voltam, mennyi időbe kerül az egész procedúra, letöltéssel, egy SSL-problémára való ráguglizással, a megoldás megtalálásával és figyelembe vételével (csak simán update-elni kellett, gem install --local d:\Downloads\rubygems-update-2.2.3.gem, majd update_rubygems --no-ri --no-rdoc), gem install sass-szal együtt 6 perc volt, direkt mértem.
Szemétrohadékvindóz!!!

Szerk.: amúgy a konkrét hibaüzenet ez volt (leírom, hátha Ádámnak is ez volt a parája, ezt nem osztotta meg velünk):
C:\>gem install sass
ERROR: Could not find a valid gem 'sass' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/latest_specs.4.
8.gz)

[ Szerkesztve ]

Sk8erPeter

Szerintem tuti ez volt a problémája, ezért kérdeztem rá, hogy egyáltalán sikerült-e telepítenie a Rubyt és SASS-t.

Kis érdekesség, én így oldottam meg, szóval még választási lehetőséget is kap a kolléga.

Köszönöm szépen mindenkinek, aki hozzászólt SASS témában. Ez alapján sikerült belőni, most már szépen megy a Koala segítségével. Az egyik kollégám szidta a Windowst, hogy nem jó semmire, én meg kezdőként még el is hittem neki, hogy nincs esély rá, hogy felhúzzam a gépre a SASS-t. Ezekszerint tévedetett.

A Koalaval kapcsolatban lenne egy kérdésem. Behúzom a projekt mappáját, amelyben ugye van egy SCSS és egy CSS mappa is külön már előre megszerkesztve. Viszont az SCSS mappában található scss fájl szerkesztésekor az elején ugyanabba a mappába létrehoz egy css fájlt is. Hogyan lehetne belőni, hogy a css fájlt a CSS mappában complieolja, és ne a SCSS-be?

Előre is köszönöm,

Ádám

Szia!

A kis szerkesztés ikonra kattintva megadhatod (tallózással), hogy hova és milyen néven mentse.

[ Szerkesztve ]

A linux / OSX trollok hajlamosak azt hinni, hogy az ő rendszerük a legjobb. Aztán vicces látni, amikor rácsodálkoznak, hogy windows alatt valami szimplán csak működik, és nem kell órákig konzolból hekkelni hozzá.

Múltkor az egyik kolléga, aki kizárólag OSX-en hajlandó dolgozni, komolyan alig akarta elhinni, amikor a szeme láttára pillanatok alatt beüzemeltük Visual Studio alá a Nodejs-t.

Én kérek elnézést!

Sziasztok!

Az alábbi kódot hogy tudom úgy formázni, hogy a magassága állítható legye?

.backgroundlevel-high #rt-background2 {background: url(../images/backgrounds/style1/main-bg.jpg) 50% 0 no-repeat;}

A hivatkozott kép mérete 52x550px..

Köszönöm!

Kicsit konkrétabban mit is szeretnél?

Én kérek elnézést!

Sziasztok, két kérdésem lenne. Mit gondoltok, egy màr relatíve kèsz honlapot hogyan tudnék responzívvá tenni a legjobb módon? Gondolok itt arra, hogy kezdjem el szépen Bootstrappel például a meglévő oldalt átszerkeszteni, avagy csak azt használjam fel a Bootstrapből ami nekem kell, etc. menu, egyéb "feature-ok", vagy ha nem vészes módosítgatásokat kell(ene) végrehajtanom, használjak egyszerűen kézzel írt media querieseket, az egy-két hozzászólással feljebb említett tartományoknak megfelelően a Bootstrap es egyéb frameworkok felhasználása nélkül? Mit gondoltok? Mi a tapasztalatotok?

A másik pedig, hogy a referencia honlapomnak szerintetek mely domainvégződés lenne a legjobb? Pl.: valakinek van tapasztalata a .me domainendinggel kapcsolatban? Arról olvastam, hogy pl. jól illik az online önéletrajz, portfolióval kapcsolatos oldalakhoz. Pl. kisjozsi.me vagy hasonló.

A második kérdés nem igazán css téma, de remélem nem baj, ha itt tettem fel azt is.

Előre is köszi,

Ádám

[ Szerkesztve ]

Nyilván attól is függ, mi a távlati cél, akarsz-e Bootstrapet vagy más ehhez hasonlót használni, ha igen, mert rájössz, hogy sokkal gyorsabb, mint mindenre kiguglizni a megfelelő megoldást, vagy épp kikotorni magából a Bootstrapből, akkor egyszerűbb és gyorsabb lehet átállni rá, igaz, a Bootstrap saját stílusait felül kell definiálnod a sajátodra. Ezzel is pöcsölni kell, ezt nem úszod meg, de nem akkora katasztrófa, még így is talán kevesebb időtöltés, mint átemelni a vonatkozó részeket a saját kódodba, hogy valóban jól jelenjen meg az oldalad a mobileszközökön is.

"media querieseket"
Többesszámban lévő szót teszel többesszámba. Ezt már amúgy írtam.
Értelmesen: "media query-ket".

"Pl.: valakinek van tapasztalata a .me domainendinggel kapcsolatban? Arról olvastam, hogy pl. jól illik az online önéletrajz, portfolióval kapcsolatos oldalakhoz. Pl. kisjozsi.me vagy hasonló."
Például Jim-Y kollégának .me-végződésű a honlapja, nézd meg az aláírását.
És ja, akár jópofa is, hogy .me a végződés, de egyébként teljesen mindegy, .hu is lehet, ha berakod az önéletrajzodba az URL-t, nem emiatt fogják kevésbé megnézni. Igaz, a .me "nemzetközibb". Válaszd azt, amelyik jobban tetszik. Bár lehet, hogy ha mondjuk idegen nyelven akarsz blogolni, tehát vegyes a közönséged, akkor nem a .hu a legnyerőbb, de ezt se kell túlreagálni.

Sk8erPeter

Köszi, hát szerintem manuálisan az alábbi breakpointok szerint szerkesztem majd tovább, és akkor nem nyúlhatok mellé:

@media (max-width: 479px) {
@media (min-width: 479px) and (max-width: 767px) {
@media (min-width: 768px) and (max-width: 991px) {
@media (min-width: 992px) and (max-width: 1199px) {
@media (min-width: 1200px) {

Egy másik oldalt meg teljesen az elejéről elkezdek Bootstrapben, és az is egy + referencia lesz így.

A domaines kérdéskörre visszatérve még egy picit. Mit ajánlsz, melyik / melyek a legjobb ár/érték arányban lévő szolgáltatók a domain és a tárhely vásárlásra egyaránt? Külföldiben gondolkozom.

[ Szerkesztve ]

Köszi
Közben rájöttem hogy nem a megadott kódban kellett álítanom hanem a header részben kellet a méretet megadnom!

Azért nagyon köszönöm!