Hirdetés
Új hozzászólás Aktív témák
-
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
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]https://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
#5
Protezis
őstag
Forest_roby
#4
Protezis
őstag
válasz
Forest_roby
#4
üzenetére
Tévedsz, van Javascript topik, és használják is az emberek: Bővebben: link
faster: reméltem is
https://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
#7
Forest_roby
őstag
Protezis
#5
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
őstag
Forest_roby
#7
Protezis
őstag
válasz
Forest_roby
#7
üzenetére
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.https://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
#9
Forest_roby
őstag
Protezis
#8
Forest_roby
őstag
-
#12
Protezis
őstag
Forest_roby
#9
Protezis
őstag
válasz
Forest_roby
#9
üzenetére
okok
De ha van jobb ötleted a topik címét illetően, hallgatlakhttps://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
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]https://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
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.https://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
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
-
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]https://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
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áshttps://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
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]https://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
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.https://hardverapro.hu/apro/unifi_u6-lr_u6-lite_uap-ac-pro_4xuf-rj45-10g_22_pa/hsz_1-50.html
-
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. -
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]
op;''
)
Új hozzászólás Aktív témák
- Parfüm topik
- Samsung Galaxy S24 - nos, Exynos
- Gumi és felni topik
- Milyen egeret válasszak?
- AMD GPU-k jövője - amit tudni vélünk
- Canon MILC: EOS R és M topik
- Meggyi001: A Lidl Silvercrest kenyérsütő jó?.........Jelentem:Jó!
- Synology NAS
- Politika
- Essejó: MultiCooker avagy az elektromos kukta. Ötletek, tippek, tanácsok, receptek.
- További aktív témák...
Állásajánlatok
Cég: Ozeki Kft
Város: Debrecen