Hirdetés

2021. január 15., péntek

Gyorskeresés

Útvonal

Fórumok  »  Szoftverfejlesztés  »  CSS topic

Hozzászólások

(#1) Protezis


Protezis
őstag

A CSS világszerte használt technológia, melyet weblapokon használnak. Segítségével egyszerűbbé válik az elemek pozícionálása, stílusának megváltoztatása. Immár megoldható, hogy a html kódba csak a tartalmat írjuk, és CSS-sel formázzuk azt.
Azonban van pár dolog, ami nem teljesen úgy működik, ahogy kellene.
Sokszor a különböző böngészők tesznek keresztbe nekünk, mivel egyik így, másik úgy értelmezi a stílusinformációt.

Ebben a topikban szeretném a TI segítségetekkel összegyűjteni ezeket a hibákat, és persze gyógyírt találni rá.

Itt egy jól használható magyar nyelvű CSS leírás: Bővebben: link

---------------------------------------
Rögtön kezdeném is egy (szerintem) hibával:
1. Bővebben: link
2. Bővebben: link

Idéznék a Weblaboron található cikkből:
''A relatív (relative) érték esetén a statikushoz hasonló helyre kerül az elem, de lehetőségünk van a bal és fenti pozíció megadással eltolnunk. A következő elem elhelyezése úgy lesz számítva, mintha ez az elem a helyén maradt volna.''

''Az abszolút (absolute) érték esetén szintén a statikushoz hasonló helyre kerül az elem, szintén lehetőségünk van eltolni, meghatározni az elhelyezkedését, ezen kívül a méreteit is. Itt már a jobb és lenti, illetve a szélesség, magasság megadásokat is használhatjuk, szintén lásd mindjárt. Ez az elem kikerül a megjelenítés folyamából, a következő elem oda kerül, ahova ez került volna.''

A CSS fájlokban keresendő a különbség, méghozzá a #information-nál.
Mint látható, a relative pozicionált esetben a cikkben leírtaknak megfelelően helyezkedik el az i.gif. Ellenben az absolute-nál? Miért a kozep div bal felső sarkához viszonyít, mikor ott van még előtte az infosav div :F
A hiba mind FF, mind IE alatt észlelhető.

Semmi közöm a Weblaborhoz, és nem tekintem Szent Grálnak, de szerintem elég jól használhatók az ott leírtak.

[Szerkesztve]

(#2) Protezis


Protezis
őstag

hm... feleslegesen nyitottam? Szóljatok! :B

(#3) faster válasza Protezis (#2) üzenetére


faster
nagyúr

Majd fogok ide írni, ha lesz időm. :)

(#4) Forest_roby válasza Protezis (#2) üzenetére


Forest_roby
őstag

A JS-es kérdéseket is főleg a html-es topic-ban teszik fel, úgyhogy:F

-=Legyél Laza!=- __ ''Have you tried turning it off and on again?'' __ ''Is it definitely plugged in?'' /o\ :D:D

(#5) Protezis válasza Forest_roby (#4) üzenetére


Protezis
őstag

Tévedsz, van Javascript topik, és használják is az emberek: Bővebben: link

faster: reméltem is ;)

(#6) Tapsi válasza Protezis (#1) üzenetére


Tapsi
őstag

Hát igen, a böngészők!
Nyilt titok, hogy a CSS réme az IE, és szánalmas, de az IE7-ben sem lesz normális CSS támogatás!

(#7) Forest_roby válasza Protezis (#5) üzenetére


Forest_roby
őstag

tudom, hogy van, de akarod hogy belinkeljek ide egykét js-es kérdést a html-es topicból?
Van választék bőven.

ui.:
''A JS-es kérdéseket is főleg a html-es topic-ban teszik fel, úgyhogy''
Ezt úgy értettem, hogy vszínűleg a css -es kérdéseket is a html -es topicban fogják feltenni, mert az emberek lusták keresni, vagy nem is tudják, hogy az a kérdés css-es!!!

[Szerkesztve]

-=Legyél Laza!=- __ ''Have you tried turning it off and on again?'' __ ''Is it definitely plugged in?'' /o\ :D:D

(#8) Protezis válasza Forest_roby (#7) üzenetére


Protezis
őstag

Akkor a legtöbb topikot felesleges volt már eddig is megnyitni, mert sokan nem ott tették fel az amúgy oda való kérdésüket. :U
Igen, vannak JS kérdések ott is, de inkább csak azért, mert fogalma sincs a legtöbb embernek arról, hogy a kérdéses dolgot éppenséggel JavaScripttel lehet megoldani, nem elég a HTML hozzá.
Mellesleg nem kifejezetten CSS topikot akarok ebből kihozni, hanem egy olyasmit, hogy szépen mindenki összeállít egy olyan hsz-t, mint az enyém (2. része), és a többiek megpróbálnak használható segítséget nyújtani neki. Ergo CSS bugkeresés.
A bug lehet a böngésző(k)ben, vagy akár maga a CSS nyelvben.

Van még pár hiba a tarsolyomban, csakhát szépen boncolgatni kell őket, hogy tömör, érthető, világos legyen.

(#9) Forest_roby válasza Protezis (#8) üzenetére


Forest_roby
őstag

Kérdeztél vmit és én csak a véleményemet mondtam el!
Sztem is jó ötlet, csak már most tudom, hogy a legtöbb css-es kérdés úgyse ide fog kerülni.

-=Legyél Laza!=- __ ''Have you tried turning it off and on again?'' __ ''Is it definitely plugged in?'' /o\ :D:D

(#10) Tsunami válasza Tapsi (#6) üzenetére


Tsunami
senior tag

Én ugy tudom, hogy rendesen csak IE-ben működik, pl Firefoxban nem.

''három a kettő tizen''

(#11) faster válasza Tsunami (#10) üzenetére


faster
nagyúr

A legtöbb CSS bug az IE-ben van. Van a többiben is, csak nem olyan sok.
Azt nem tudom, honnan vette az infót, hogy az IE7 mit fog tudni, és mit nem.

(#12) Protezis válasza Forest_roby (#9) üzenetére


Protezis
őstag

okok :)
De ha van jobb ötleted a topik címét illetően, hallgatlak ;)

(#13) Tsunami válasza faster (#11) üzenetére


Tsunami
senior tag

Ja tévedtem, a scrollbar szinezés müxik csak ie-ben...

''három a kettő tizen''

(#14) Protezis válasza Tsunami (#13) üzenetére


Protezis
őstag

meg operában is

(#15) Tapsi válasza faster (#11) üzenetére


Tapsi
őstag

Talán itt a PH-n olvastam, de nememléxem pontosan a forrásra, hogy a fejlesztők továbbra sem foglalkoznak a CSS -el! És az IE7-ben sem lesz komolyabb Css támogatás! Remélem azóta változott ez a dolog..

(#16) faster válasza Tapsi (#15) üzenetére


faster
nagyúr

Én nem emlékszem ilyen cikkre, mindenesetre úgy tűnik, hogy a biztonsági kérdésekre helyezik a hangsúlyt, amit nem is csodálok.

(#17) Tapsi válasza faster (#16) üzenetére


Tapsi
őstag

Igen, részben ez az oka a Css hanyagolásának...

(#18) Protezis


Protezis
őstag

2. Hiba

IE és Opera alatt van margója a formnak. Firefox alatt nincs.
Hogy azonos eredmény kapjunk, mindenképpen adjuk meg a margin értéket.

margó nélkül: Bővebben: link
margóval: Bővebben: link

Az első kérdésre/hibára várom a választ... :)

Mod: Ezekre a hibákra munkám során lelek, így remélem elnézitek, hogy nem gyilkolok ki minden felesleges css bejegyzést. Azért remélem könnyen átlátható fájlokat adok.
Mellesleg: Csak én vagyok ON? Nosza fel! :C


[Szerkesztve]

(#19) sinyi


sinyi
csendes tag

Szerintetek lehet vmi probléma ezzel a sorral?

''background-position:Pop;''

Mert dreamweavernek vmi miatt nem tetszik nagyon.

(#20) Protezis válasza sinyi (#19) üzenetére


Protezis
őstag

Nincs gond, de kettőspont és t közé rakj egy szóközt, mert így smileyt látunk :)

(#21) Tsunami válasza sinyi (#19) üzenetére


Tsunami
senior tag

Nálam mx 2004 alatt fordult elő, hogy úgy kezelte a css-t mint egy rakás ***-t. Azóta is sima mx-et használom. Remélem 8-asba jobb lesz.

''három a kettő tizen''

(#22) Protezis válasza Protezis (#1) üzenetére


Protezis
őstag

1. Hiba megoldása:

Valószínűleg az absolute pozicionált elemek elhelyezkedése az őket tartalmazó divtől függ, attól nem, hogy van -e előttük valami. Lehet ez a szabvány, de számomra nem logikus. Na mindegy. (valaki megerősíthetne/cáfolhatna)

A megoldás itt látható: Bővebben: link
A css fájlban is történt változás!

3. Hiba
Azonban ha egy absolute pozicionált képet rakok egy divbe, amiben a szöveg középre van igazítva, akkor Firefox az igazításról nem vesz tudomást, az IE viszont igen, így a div közepéhez igazítja a képet. Bővebben: link
Ezért is folyamodtam a fenti megoldáshoz.

(#23) GDA válasza Protezis (#22) üzenetére


GDA
csendes tag

tehát a pozícionálás:

adott egy div (container), benne egy másik (content). A container-t relative-ra állítod, a conten-et pedig absolute-ra. Így a centent-et pixelre pontosan beállíthatod, a container-en belül. Tehát mindig a container-hez képest lesz abszolút helyen. Pofonegyszerű.

(#24) Protezis válasza GDA (#23) üzenetére


Protezis
őstag

Ez világos, de ha a content előtt van egy másik div relative-an, akkor miért nem annak az aljához viszonyítja a content pozicióját ( ez ugye absolute)? Nem logikusabb lenne?

(#25) faster válasza Protezis (#22) üzenetére


faster
nagyúr

Baromira kényelmetlen így a forrást nézegetni, hogy mindig le kell külön tölteni a css fájlt is. :U

(#26) Protezis válasza faster (#25) üzenetére


Protezis
őstag

Mondd, hogy oldjam meg?
De Elérhetővé teszem az eddigieket zip-be tömörítve: Bővebben: link

Mod: Ja, hogy tegyem bele? Azt nem szeressük :)
Viszont így zip-ben jó lesz?

[Szerkesztve]

(#27) faster válasza Protezis (#26) üzenetére


faster
nagyúr

Hát hogyhogy hogy? :F

<style type=''text/css''>
</style>

(#28) GDA válasza Protezis (#24) üzenetére


GDA
csendes tag

nem. mert a css az cascading style sheet. tehát ebben az esetben: a szülő elemhez képest nézi az absolút pozíciót.

(#29) Protezis válasza GDA (#28) üzenetére


Protezis
őstag

Tudom, minek a rövidítése a CSS ;)
Viszont az ok-okozat összefüggést nem értem. :F

Mod: 2. és 3. hibáról mi a véleményed? És másnak?

[Szerkesztve]

(#30) GDA válasza Protezis (#29) üzenetére


GDA
csendes tag

az összefüggés: kaszkád. a parent elem tulajonságait a child elem ''örökli''. és ezzel a szemléletmóddal a absolute child a relative (tartalmazo) parenthez képest van absolute pozícióban.

(#31) Protezis válasza GDA (#30) üzenetére


Protezis
őstag

Őszintén nem találtam magyar fordítást a cascade-ra, én pedig vagyok olyan műveletlen, hogy nem tudom, mi az a kaszkád. :B
Eddig egyedül egymásba ágyazhatóságról olvastam. De ha öröklést jelent, akkor érthető a dolog. :R
Bár számomra akkor sem logikus, de tudom... bennem van a hiba. Lásd aláírás :)

(#32) GDA válasza Protezis (#31) üzenetére


GDA
csendes tag

mindegy:) olvass el egy css dokumentációt és érteni fogsz mindent. vagy keress rá a neten ''css hacks''-re, rengeteg jobbnál jobb leírást találsz. Lényegében minden infó elérhető a neten.

Esetleg szerezz be 1-2 külföldi könyvet, nekem megvan pl a CSS Cookbook az O'Reilly-től.

ha már megtörtént, akkor ezer bocs:)

(#33) Protezis válasza GDA (#32) üzenetére


Protezis
őstag

Azt hiszem van pár e-könyvem, csakhát angol. Azt meg régen tanultam. :B
Mindenesetre köszi a segítséget.

Gondolom te is találkoztál már CSS megjelenítési problémával. Nem osztasz meg velünk néhányat? ;) (ne csak én írjak már :)) )

faster: Bár mondtam, hogy munkám során találkozok a hibákkal, egy többoldalas honlapnál pedig jobb megoldás css fájl használata, de ok, meggyőztél.
A következőkben a te javaslatod szerint fogom publikálni a hibákat. Visszamenőleg is megcsinálom, amint időm lesz. :P


[Szerkesztve]

(#34) faster válasza Protezis (#26) üzenetére


faster
nagyúr

Ha nem, hát nem.

(#35) GDA válasza Protezis (#33) üzenetére


GDA
csendes tag

igen, én is találkoztam már szarságokkal, pl padding problémák, amik az IE hibás box modellje miatt van, stb aztán van,h a böngésző renderelési módjától függően egy xhtml 1.0 transitional-nál szarul jelenik meg, strict-ben viszont jól, de csak ie-nél, vagy fordítva, stb stb.

ki kell alakítani azt a pár megbízhatóan működő template-et, amire a későbbi munkádban építhetsz.

(#36) faster válasza Protezis (#33) üzenetére


faster
nagyúr

Bár mondtam, hogy munkám során találkozok a hibákkal, egy többoldalas honlapnál pedig jobb megoldás css fájl használata, de ok, meggyőztél.

Egy fenéket, nagy honlapnál használd csak a szeparált CSS fájlt, csak az itteni példáidnál egyszerűbb megnézni a forrást egy ctrl-U-val Firefox alatt, és egyből látni az egészet, ha a html-ben a style def. is benne van.

(#37) Protezis


Protezis
őstag

Találtam egy cikket az IE7 CSS támogatásáról: Bővebben: link
Megkopott, amúgy sem túl jó angol tudásommal azt szűrtem ki belőle, hogy egyelőre úgy néz ki, nem sok jóra számíthatunk. Persze az is olvasható, hogy a Beta 2-ben már jobb lesz a helyzet.

(#38) GDA válasza Protezis (#37) üzenetére


GDA
csendes tag

olvasgasd a weblabort, úgy emléxem, ott már megjelent ez a link egy blogmarkban, de nem vagyok benne biztos.

(#39) Protezis válasza GDA (#38) üzenetére


Protezis
őstag

Az lehet, de pont ide való, miért ne linkelném be? Csak azért, mert már máshol is belinkelték? :F

(#40) GDA válasza Protezis (#39) üzenetére


GDA
csendes tag

nem mondtam,h ne linkeld be.
te azt írtad,h most találtad. ha látogatnád, akkor hamarabb megtaláltad volna:) ez csak egy jótanács, ott általában hamar hozzá lehet jutni infókhoz. üdv

(#41) PrinczA válasza Protezis (#12) üzenetére


PrinczA
őstag

Uj cimnek:
''Nagy CSS topik!''
Erre mindenki ugrik akinek css-kell.
Este en is irok ide 1-2 dolgot.

(#42) Protezis válasza PrinczA (#41) üzenetére


Protezis
őstag

Ezesetben kérem a többieket, véleményezzék PrinczA felvetését

(#43) GDA válasza Protezis (#42) üzenetére


GDA
csendes tag

akkor most majd 2 topikot kell néznie annak, akit érdekel a téma:(
Szerintem ez az egy bőven elég.

Egyébknét is a többi hasonló topikokban egy idő után megjelennek azok az egyének, akik láttak már egy frontpédzset, aztán osztják az észt ezerrel.

Ha valakit érdekel valami ,akkor ide is tud írni.

(#44) Protezis válasza GDA (#43) üzenetére


Protezis
őstag

PrinczA arra gondolt, hogy ezt a topikot nevezzük át.
(Te pedig ha jól értem, új topik nyitásra gondolsz.)

(#45) PrinczA válasza Protezis (#44) üzenetére


PrinczA
őstag

Ez arra gondoltam !

[Szerkesztve]

(#46) PrinczA


PrinczA
őstag

Egy jó kis CSS oldal, leirasok, peldak, ... :
1. http://www.hszk.bme.hu/~hj130/ Bővebben: link
2. http://css.lap.hu/ Bővebben: link
3. ha tud meg vki akkor irja meg

[Szerkesztve]

(#47) GDA


GDA
csendes tag

http://www.csszengarden.com/ a tartalom ugyanaz, a stílusklapok cserélgetésével áll elő a több istílus, nézzetek körül, van egy pár

http://www.alistapart.com/
http://www.cssbeauty.com/
http://cssvault.com/
http://www.stylegala.com/
ezek alapok.

ennek a szellemében:
http://www.456bereastreet.com/lab/developing_with_web_standards/

(#48) PrinczA


PrinczA
őstag

nagyon kezdo vagyok meg ebben a css-ban.
Hogyan tudok egy ilyen oldalt csinalni (tartalom megvan, csak az elrendezessel van gondom:

t e t e j e
-----------------
m | tartalom
e | tartalom
n | tartalom
u | tartalom
----------------
alja


addig elertem, hogy :

t e t e j e
-----------------
m
e
n
u
----------------
| tartalom alja
| tartalom
| tartalom
| tartalom

(#49) GDA válasza PrinczA (#48) üzenetére


GDA
csendes tag

pofonegyszerű:
<div id=''container''>
<div id=''head''>bla bla</div>
<div id=''nav''>bla bla</div>
<div id=''content''>bla bla</div>
<div id=''footer''>bla bla</div>
</div>

így helyezd el a tartalmat.
#container {
width: 400px;
}
#head {
width: 400px;
}
#nav {
width: 100px;
float: left;
}
#content {
width: 300px;
float: left;
}
#footer {
clear: both;
}

[Szerkesztve]

(#50) PrinczA válasza GDA (#49) üzenetére


PrinczA
őstag

koszi, ''float: left;'' ez hianyzott !!!

Útvonal

Fórumok  »  Szoftverfejlesztés  »  CSS topic
Copyright © 2000-2021 PROHARDVER Informatikai Kft.