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]

hm... feleslegesen nyitottam? Szóljatok!

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

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!

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

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

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

''három a kettő tizen''

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.

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

''három a kettő tizen''

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..

É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...

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]

Szerintetek lehet vmi probléma ezzel a sorral?

''background-positionop;''

Mert dreamweavernek vmi miatt nem tetszik nagyon.

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

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''

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.

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ű.

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?

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.

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]

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.

Ő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

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

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]

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.

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.

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

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

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

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.

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]

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/

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

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]

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