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
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]
Gyorskeresés
Legfrissebb anyagok
- Bemutató Route 66 Chicagotól Los Angelesig 2. rész
- Helyszíni riport Alfa Giulia Q-val a Balaton Park Circiut-en
- Bemutató A használt VGA piac kincsei - Július I
- Bemutató Bakancslista: Route 66 Chicagotól Los Angelesig
- Tudástár AMD Radeon undervolt/overclock
Általános témák
LOGOUT.hu témák
- [Re:] eBay-es kütyük kis pénzért
- [Re:] [Luck Dragon:] Asszociációs játék. :)
- [Re:] [HThomas:] Kia Ceed SW JD vs CD tapasztalatok
- [Re:] [bitpork:] Fogyasztásra ítélve
- [Re:] [D1Rect:] Nagy "hülyétkapokazapróktól" topik
- [Re:] [sziku69:] Fűzzük össze a szavakat :)
- [Re:] Elektromos rásegítésű kerékpárok
- [Re:] [koxx:] Bloons TD5 - Tower Defense játék
- [Re:] [antikomcsi:] Való Világ: A piszkos 12 - VV12 - Való Világ 12
- [Re:] [gban:] Ingyen kellene, de tegnapra
Szakmai témák
PROHARDVER! témák
Mobilarena témák
Hozzászólások
Protezis
őstag
Protezis
őstag
hm... feleslegesen nyitottam? Szóljatok!
faster
nagyúr
Majd fogok ide írni, ha lesz időm.
Forest_roby
őstag
A JS-es kérdéseket is főleg a html-es topic-ban teszik fel, úgyhogy
-=Legyél Laza!=- __ ''Have you tried turning it off and on again?'' __ ''Is it definitely plugged in?'' /o\ :D:D
Protezis
őstag
Tévedsz, van Javascript topik, és használják is az emberek: Bővebben: link
faster: reméltem is
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!
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
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.
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.
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
Tsunami
senior tag
Én ugy tudom, hogy rendesen csak IE-ben működik, pl Firefoxban nem.
''három a kettő tizen''
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.
Protezis
őstag
okok
De ha van jobb ötleted a topik címét illetően, hallgatlak
Tsunami
senior tag
Ja tévedtem, a scrollbar szinezés müxik csak ie-ben...
''három a kettő tizen''
Protezis
őstag
meg operában is
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..
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.
Igen, részben ez az oka a Css hanyagolásának...
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!
[Szerkesztve]
sinyi
csendes tag
Szerintetek lehet vmi probléma ezzel a sorral?
''background-positionop;''
Mert dreamweavernek vmi miatt nem tetszik nagyon.
Protezis
őstag
Nincs gond, de kettőspont és t közé rakj egy szóközt, mert így smileyt látunk
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''
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.
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ű.
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?
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.
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]
faster
nagyúr
Hát hogyhogy hogy?
<style type=''text/css''>
</style>
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.
Protezis
őstag
Tudom, minek a rövidítése a CSS
Viszont az ok-okozat összefüggést nem értem.
Mod: 2. és 3. hibáról mi a véleményed? És másnak?
[Szerkesztve]
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.
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.
Eddig egyedül egymásba ágyazhatóságról olvastam. De ha öröklést jelent, akkor érthető a dolog.
Bár számomra akkor sem logikus, de tudom... bennem van a hiba. Lásd aláírás
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
Protezis
őstag
Azt hiszem van pár e-könyvem, csakhát angol. Azt meg régen tanultam.
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.
[Szerkesztve]
faster
nagyúr
Ha nem, hát nem.
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.
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.
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.
GDA
csendes tag
olvasgasd a weblabort, úgy emléxem, ott már megjelent ez a link egy blogmarkban, de nem vagyok benne biztos.
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?
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
PrinczA
őstag
Uj cimnek:
''Nagy CSS topik!''
Erre mindenki ugrik akinek css-kell.
Este en is irok ide 1-2 dolgot.
Protezis
őstag
Ezesetben kérem a többieket, véleményezzék PrinczA felvetését
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.
Protezis
őstag
PrinczA arra gondolt, hogy ezt a topikot nevezzük át.
(Te pedig ha jól értem, új topik nyitásra gondolsz.)
PrinczA
őstag
Ez arra gondoltam !
[Szerkesztve]
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]
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/
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
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]
Mai Hardverapró hirdetések
prémium kategóriában
- HP Probook 340S G7 i5-1035G1/8GB/256SSD/Windows 11 -10% Csak ameddig a készlet tart!89.780 Ft
- iPhone 14 Pro 128 GB Space Black, 11 hónapos, kártyafüggetlen, 2024. május végéig garis , akku 91%
- Asus VivoBook X509JA-BQ904T
- HP EliteBook 640 G9 Ezüst (14" / Intel i5-1235U / 16GB / 512GB SSD / Win 11 Pro) -10% Most 203.990 F
- Lenovo M810z AIO Core I5 6400 4x2700/8GB/120G SSD/wifi/cam 21,5 -10% 66.950 ft