Háttér

[Csuki]

Paddingot is állítsd 0-ra. Vagy ha nem jó, akkor finomíts marginnal vagy paddinggal. De a benne lévő marginnal pozícionált tartalom is széttolhatja.

[chouji]

Miért van az, hogy hiába állítom a margin-t 0 px-re, a header és a középső rész nem ér teljesen össze? :/
Elnézést, kicsit elhamarkodtam a kérdést, közben rájöttem a megoldásra. Bocsi!

chouji

[chouji]

Okés, meg amúgy is az én "megoldásom" azért nem helytálló, mert így a fejlécre nem lehet esetleg valamilyen tartalmat tenni (maximum ezzel a z tengelyes megoldással). De mindegy is. A megoldást megtudtam tőled, így alkalmazni is fogom. Köszönöm mégegyszer!

chouji

[Keveqiah]

Van már lehetőség, hogy több háttérképet beállíts css-ben a body-nak, de "még" nem mindenhol kompatibilis és a visszafelé kompatibilitás miatt is jobb egyenlőre a div + háttér kombó.

[chouji]

Keveqiah!
Köszönöm kipróbálom. Egyébként a tudás hiányában amivel próbálkoztam az a következő:

Kód: HTML

1. <div  id="header">
2. <center><img src="head.png"></center>
3. </div>

Csináltam egy divet a fejlécnek, a css pedig a következő:

Kód: CSS

1. body {  
2. background-image: url(bg.png);
3. background-position: center;
4. margin-top: 0px;
5. }
6.  
7. #header {
8. margin-top: 0px;
9. }

Gondoltam azért megmutatom, tanuló fázisban vagyok.
Köszönöm a segítséget,
chouji

[Keveqiah]

3 div, mindegyiknek beállítod a háttérképet. width 100%- mind a három, a fejléc és lábléc fix magasság, a középső pedig auto, vagy min-height.
A középső divbe pedig mehet a tartalom.

[chouji]

Sziasztok!
Van egy hátterem, amit "megrajzoltam" gimpel és ezt a hátteret három részre daraboltam: fejléc, középső rész és egy lábléc. Azt szeretném megvalósítani - ami egyébként majdnem minden weboldalon így van -, hogy az oldalam háttere felül a fejléc képe legyen, középen a középső rész, ami ismétlődik az y tengelyen és addig nyúlik amíg a tartalom tart, és amikor vége a tartalomnak, lent a lábléc képe legyen a hátterem.
Előre is hálásan köszönöm a segítséget,
chouji

[tomi6230i]

De megcsinálhatod azt, hogy van egy nagyon nagy háttréképed és középreigazítod.

[Keveqiah]

attól függ.
ha a kép mozaik, akkor elég a repeat-x y. a css2 nem támogatja a háttérkép méretezését.

JS-el lehet még játszani, erről bővebben
http://css-tricks.com/how-to-resizeable-background-image/

vagy css3
http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size
ezt a lehetőséget az IE9 kivételével egyik IE sem támogatja, valamint az FF 3 - 3.5, Safari 4 és  Opera 10.10 sem.

[Складной нож]

Azt meg lehet oldani, hogy a body háttérképe akkora legyen amekkora a böngésző ablak? Tehát ha 1024*768-as a felbontás akkor akkora legyen a kép, ha 1380*XXX a felbontás akkor akkora legyen a kép....?

[superman]

Köszi Rimelek!

**
Ui. és köszi a tanácsokat! Utána is néztem. Átírtam a "g" meg "fontMenues"-eket. <div class"..."> formában vannak már! Köszi szépen!

[Rimelek]

Lenne pár megjegyzésem. Nem hozhatsz létre csak úgy html tag-eket. Nincs se "g" se "fontmenues" tag. Ha ilyeneket akarsz akkor div-et vagy span-t használj és annak adj id-t, ahogy tetted is pár helyen.

A hibád pedig az, hogy a div-nek ugyan van magassága, de ebből kilóg a "p" tag marginja. Vagy a "p" tagnek add meg css-ben a margin: 0px; tulajdonságot, vagy a contents div  overflow tulajdonságát állítsd hidden; -re.
Tehát:

Kód: CSS

1. p
2. {
3.     margin: 0px;
4.     padding-left: 50px;
5.     padding-right: 50px;
6. }

vagy:

Kód: CSS

1. #contents
2. {
3.     background-image: url(images/contents.jpg);
4.     width: 850px;
5.     min-height: 50px;
6.     overflow: hidden;
7. }

[superman]

Sziasztok!

Automatikusan növekvő tartalom mezőt csináltam. 3 képből áll, amik a contents-up.jpg, contents.jpg, contents-down.jpg nevű képek. 3DIV-et csináltam, legfelülre a contents-up.jpg hátterű, alulra a contents-down.jpg, és ami fontos, közéjük a contets.jpg hátterű DIVeket. Tartalom mindig csak a középsőben van, szóval az alsó/felső csak "dísz". A próblémám az, hogy akármennyi tartalmat rakok a középsőbe(automatikusan növekszik), mindig van az alja, és az alsó DIV között egy "üres csík", ami a háttér színével egyezik meg.

A woodoocaudron.ultraweb.hu nevű honlapon nézhetitek meg, "élesben".

Bemásolom a kódokat is:

CSS

Kód: [Kijelölés]

#contentsup
{
    background-image: url(images/contents-up.jpg);
    width: 850px;
    height: 50px;
}

#contents
{
    background-image: url(images/contents.jpg);
    width: 850px;
    min-height: 50px;
}

#contentsdown
{
    background-image: url(images/contents-down.jpg);
    width: 850px;
    height: 50px;
}
HTML

Kód: [Kijelölés]

        <div id="contentsup">
        </div>
        <div id="contents">
            <fontMenues>Föoldal</fontMenues>
            <p>tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. tartalom tartalom tartalom tartalom. </p>
        </div>
        <div id="contentsdown">
        </div>
Próbáltam a lényeget bemásolni, mert elég hosszú... de párszor már én is előlről kezdtem, de már nem tudom mi a gáz. Köszi előre!

[Warner]

Valószínűleg szilveszter másnapján elnéztem valamit... Betöltés: 1.25s
A képek száma viszont tényleg 190 körül van, ha mindent letöltök... Max a firebug listát tudom elküldeni, de nem is akarok én itt bizonygatni semmit, ez nem egy bírósági tárgyalás :-)

Én a Web Develeper Toolbart használtam, a szerint 55 van. Nem lehet, hogy más sablont használunk?

[Suttogó]

A hiba nálad van.

Valószínűleg szilveszter másnapján elnéztem valamit... Betöltés: 1.25s
A képek száma viszont tényleg 190 körül van, ha mindent letöltök... Max a firebug listát tudom elküldeni, de nem is akarok én itt bizonygatni semmit, ez nem egy bírósági tárgyalás :-)

[Warner]

Hajjaj, ha ilyen ms pontosságú méréseket végzel, akkor elég sok tényezőt kihagysz, ami számít. Mi lesz pl. azzal az idővel, míg a phpstudio.hu címhez a DNS szerver megadja neked az IP címet. Súlyos ezredmásodpercek vannak itt. Csak, hogy én is hasogassam azt a bizonyos szőrszálat.
Elküldve:: 2010. Január 01.  19:03:50

Egy utolsó stat:
A témának az oldala kereken 190 kép lekérést indít, ezt átlagosan 50.3 ms alatt végzi el.
Az egész oldal betöltési ideje átlagosan 50.7 ms 291 kéréssel.

Nekem csak 55-öt. És ebbe még az avatarok és a hirdetések is benne vannak, amik nyilván nem spriteosíthatók.
Elküldve:: 2010. Január 01.  19:06:37

És akkor arról még nem is beszéltem, hogy a spontán végzett mérés szerint, ez az oldal, (cache nélkül) 25,38 mp alatt töltődött be (baromi sok...) és ennek legnagyobb részét, a csatlakozás, sorban állás, várakozás a válaszra kérések miatt várta. A leghosszabb "adatfogadási" idő mindössze 802 ms

Nekem cache nélkül 1-2 mp alatt töltődik be ez az oldal. A hiba nálad van.

[Suttogó]

Egy utolsó stat:
A témának az oldala kereken 190 kép lekérést indít, ezt átlagosan 50.3 ms alatt végzi el.
Az egész oldal betöltési ideje átlagosan 50.7 ms 291 kéréssel.

A kérések számának csökkentésével lényeges javulás érhető el, még így is, hogy az én FF-em egyszerre akár 50 szálon tölt egy oldalt. Megjegyzem hogy az IE és az FF alapbeállításon mindösszesen 5 szálon tölt 1-1 oldalt, 2Mb/s alatt pedig 1 szálon. Nos, most nem fogom áthangolni a böngészőmet, de érzékelhető, hogy pl ennek a fórumnak is rengeteget segítene egy CSS Smart-sprite

[<madbence />]

Azért nem teljesen hülye technikam kis képeknél, ikonoknál van értelme tényleg.
Amúgy szerintem mindenki mindennap találkozik ezzel a dologgal, lásd google:
http://www.google.hu/images/nav_logo7.png

[Suttogó]

A lekérések száma valóban csökken, de az adatforgalom ugyanannyi marad, legfeljebb nőni fog redundancia miatt, csökkenni biztosan nem. Márpedig az adatforgalom a domináns tényező.

Ez azért nem igaz, mert létezik: HTTP fejléc, keep-alive. Valamint az oldal feldolgozása is idő, és ha az oldallal párhuzamosan el tudja kezdeni tölteni a képet, nem csak oldal közben kezd el újabb 50 képet letölteni, akkor már érezhető a technika értelme.
És akkor arról még nem is beszéltem, hogy a spontán végzett mérés szerint, ez az oldal, (cache nélkül) 25,38 mp alatt töltődött be (baromi sok...) és ennek legnagyobb részét, a csatlakozás, sorban állás, várakozás a válaszra kérések miatt várta. A leghosszabb "adatfogadási" idő mindössze 802 ms

Ez alapján, ha a phpstudió pillanatnyi megjelenése smart-pritesokat használna, a betöltés 4,5 mp alá szorítható lenne. Megjegyzem szerintem még ennél kevesebb is lehetne.

Abban egyetértek, hogy amikor sok apró ábra van, akkor hasznos lehet ez a technika, mert rengeteg kis képet kéne betölteni. De, hogy egy oldalon most 1 vagy 5 képből áll-e össze a design, az szvsz tökmind1.

Hát azért egy design ritkán áll 5 képből. A PHP-stúdiónak ez a hozzászólás író oldala pl 181 kéréssel jön le, És ennek jelentős része kép.

[Warner]

Na ja, kis méretű és kevés színt tartalmazó ikonoknál, GIF formátumban előfordulhat, hogy az egy nagy képben spórolsz. (Megjegyzem, ez a te nagyobb méretű, sok színt tartalmazó JPG/PNG ábrádra már nem biztos, hogy igaz lenne, sőt...)
És ezek így "hamis" mérések, mert értelmes ember nem 10 képből rakta volna össze, hanem 5 ábra és 2 háttér = 7 képből. Ami szerintem még a 13KB-nél is kevesebb lenne, hisz maguk az ábrák kb. az egész gomb területének harmadát töltik ki, még kisebbek.

Szóval A technika hülye megvalósítását nem ér B technika okos megvalósításával összehasonlítani, mert az nem valós eredményt mutat :yes:
Elküldve:: 2009. December 30.  21:08:23

igen ám, de azért még vannak emberek, akiknek lassú netjük van, és fél óra, míg egy képet elkezd tölteni.

Akinek annyira lassú netje, az alapból kikapcsolja minden grafikai elem automatikus letöltését és csak azt tölti le, ami kell neki. Ez nem érv.

Hozzáteszem, egy nagy oldal esetén ha valaki csak pár funkciót használ, akkor egy csomó felesleges grafikát is letölt ezzel a CSS-spritetal, hiszen azok soha nem fognak megjelenni neki. Ez aztán nagyon "lassú-kapcsolódási-sebesség-barát" megoldás

[Semmu]

de az adatforgalom ugyanannyi marad, legfeljebb nőni fog redundancia miatt, csökkenni biztosan nem.

teszt nem ezt mutatja...

[Warner]

A lekérések száma valóban csökken, de az adatforgalom ugyanannyi marad, legfeljebb nőni fog redundancia miatt, csökkenni biztosan nem. Márpedig az adatforgalom a domináns tényező.

A linket megnéztem, igazából kicsit vicces, hogy ezzel próbálnak a példában optimalizálni tök minimálisat, miközben ha az ikonokat leválasztják a hátterükről, akkor ehhez képest sokkal nagyobb optimalizálásra lett volna lehetőség. Persze azt az egy képfájlba mindent technikával nem lehet megoldani, akkor legalább már 2 kép lenne.

Abban egyetértek, hogy amikor sok apró ábra van, akkor hasznos lehet ez a technika, mert rengeteg kis képet kéne betölteni. De, hogy egy oldalon most 1 vagy 5 képből áll-e össze a design, az szvsz tökmind1.

[Semmu]

kevesebb http lekérés.

(és akkor most jön az a reakció, hogy "de a mai világban már mindenkinek gyors a nete". és erre jön az én reakcióm: )

igen ám, de azért még vannak emberek, akiknek lassú netjük van, és fél óra, míg egy képet elkezd tölteni. meg bármikor elb_szódhat vmi a szolgáltatónál, és belassulhat a net.
pár hete én is így jártam. egyszerűen lelassult a net, oldalak is csak 20x-i frissítésre töltötte be. enyhén kiidegelt. és ilyenkor nem mindegy, hogy 20 képet vagy csak 2 képet kell betölteni
Elküldve:: 2009. December 30.  19:55:45és akkor már át is futhatod ezt is

http://css-tricks.com/css-sprites/

[Warner]

Jól van, csak én nem ismertem rá ezt a kifejezést. Mondjuk, hogy miért olyan jó ezzel megoldani, nem értem, de biztos jó xD

[Semmu]

A background-position:top right; miért is nem jó? Nem világos.

css-sprite miatt, lásd:

Ha spriteokat használsz, akkor jól tervezd meg, hogy ne legyen gubanc ebből
Vagy próbálkozz máshogy, vagy JS. Direkt erre nincs CSS tulajdonság.

js-t erre nem írok, szal ketté kell szednem a képet :S

[<madbence />]

Ha spriteokat használsz, akkor jól tervezd meg, hogy ne legyen gubanc ebből
Vagy próbálkozz máshogy, vagy JS. Direkt erre nincs CSS tulajdonság.

[Warner]

A background-position:top right; miért is nem jó? Nem világos.

[Semmu]

érdekes problémába ütköztem...:

van egy adott magasságú, de ismeretlen szélességű divem, aminek van egy háttérképe, és úgy kéne pozicionálnom azt a háttérképet, hogy az egyik megadott része pont a (változó méretű) div jobb oldalára kerüljön.
és ebben a képben más elemek is vannak, szal a "top right" meg ilyen emgoldások nem használhatóak. valahogy pixel-pontosan kéne megadni.
egyszerű lenne úgy, ha a bg-position-nak be lehetne állítani, hogy az elem melyik sarkához viszonyítson, de én nem tudok ilyenről... valakinek valami 5let? :S

[Warner]

Az logikus, hogy öröklődik. A nem logikus az, hogy nem lehet tetszőlegesen felüldefiniálni. Ez kb. olyan, mintha egy div-ben 20-as betűméretet adsz meg, akkor a tartalmazott divekben nem lehetne 20-asnál nagyobb méretű betű.

[Semmu]

vagy a háttérkép legyen áttetsző.

am sztem logikus ez a megoldás, h öröklődik.

[Warner]

Ezzel egyszer én is próbálkoztam, nem sikerült megoldani, majd azt olvastam, hogy az áttetszőség öröklődés után már nem csökkenthető CSS-ben (csak növelhető vagy helyben hagyható), nem épp tökéletesen van megoldva. Abszolút pozicionálást javaslok helyette és úgy helyezd "be" a divbe.

[Keveqiah]

Egy kis segítség kéne.. Van egy divem, aminek a háttere 30%-os áttetsző. A kérdésem az, hogy a div-en belül elhelyezett képnél milyen paramétereket kell megadni, hogy ne legyen ugyan olyan áttetsző, mint a div.

Jelenleg így van.

Kód: CSS

1. .viewbig
2. {
3.         position: relative;
4.         margin: 20px auto;
5.         text-align: center;
6.         width: 640px;
7.         height: 480px;
8.         background-color: #fff;
9.         filter:alpha(opacity= 30);
10.         opacity: 0.3;
11.         -moz-opacity:0.3;
12. }
13. img#viewbig
14. {
15.         margin-top: 20px;
16.         width: 600;
17.         height: 440px;
18.         z-index: 1000;
19. }
20.  

Kód: PHP

1.         echo "<div class='viewbig'>
2.                 <img src='albumok/".$albname."/".$kepek[0][1]."' id='viewbig' />
3.                   </div>";
4.  

[Semmu]

az sem teszi középre, mert nem fix méretű div.
FF-ben működik, IE-ben meg annyira nem észrevehető, h annak középen kéne lennie.
hamarosan felpakolok vmit a tárhelyemre, és ott lehet tesztelni majd.

[Suttogó]

szerk2: hehh, természetesen IE nem (egyik sem) támogatja a table display-t...
Ie-nek teszel köré egy 100% széles valamit, és annak text-align: center

[Semmu]

nem fix széles div középre helyezésére van vmi valid módszer?
szerk: van :happy: display:table; margin:0 auto;
szerk2: hehh, természetesen IE nem (egyik sem) támogatja a table display-t...

[Rimelek]

Muszáj ezt?

Keve azért azt írd le, mi volt a megoldás. Engem érdekel.
És én se hiszem, hogy Semmu-t túlzottan érdekelné, hogy eltalálta-e mi volt a hiba, vagy sem.
De az tény, hogy a mértékegység kell. 0 érték esetén nem feltétlen, hisz a 0 minden mértékegységben 0.

[Semmu]

látom nagyon felhúztad ezen magad. engem igazából nem érdekel, neked kellett segítség.
meg ha ennyire sikerült mértékegység nélkül, ne is írj mostantól. te mondtad, h anélkül is működik.

[Keveqiah]

mivel mindig ugyan azt a kódrészletet másoltam be, kis módosítással, ha nem tűnt volna föl.

más..
műxik. És Semmu, csak hogy ne legyen olyan jó kedved, nem amiatt, amit írtál, nem is a mértékegység miatt.
(Egyébként köszi a helpet)

[Semmu]

már ne haragudj, de ha egy szem kódból neked az jön le, hogy szokásom, akkor egs.. (egyébként nem szoktam lehagyni mértékegységet)
[viszont akkor sem mozdult meg. a legtöbb böngésző pedig értelmezi a margin, padding, stb mértékegység nélküli megadását. ]

1.) priviben is beszélgettünk, és ott is mindig lehagytad a mértékegységet. azért, mert egy oldalt csak épphogy összedobsz vagy csak tesztelsz valamit, attól még kell mértékegység.
2.) ha nem is mozdul meg, akkor is te csinálsz valamit rosszul, ez nem indok arra, hogy ne használj mértékegységet.
3.) jah értelmezik a böngészők mért. egység nélkül is, csak az egyik pixelnek veszi, másik centiméternek. de te dolgod.

[Rimelek]

a legtöbb böngésző pedig értelmezi a margin, padding, stb mértékegység nélküli megadását

Azért erre ne támaszkodj. És főleg ne várj helyes működést. Nem rég án is belefutottam egy ilyenbe, hogy mértékegység nélkül volt megadva egy sablonban a padding. ÉS totál más volt az eredmény ha mértékegységet is megadtam. Kivételesen rosszabb. De ettől még ugyanúgy hiba volt a mértékegység nélküli megadás. a Böngésző ( FF 3.5 ) eldobta azt a tulajdonságot. De ha én hagytam ki egy az egyben, akkor megint csak hibás lett az eredmény. Így aztán több dolgot kellett átírni, hogy jó legyen. Ne nobjon hibát, és értelmesen meg is jelenjen.

[Keveqiah]

mivel szokásod lehagyni a mértékegységet, így sztem ott is az lesz a baj xD

már ne haragudj, de ha egy szem kódból neked az jön le, hogy szokásom, akkor egs.. (egyébként nem szoktam lehagyni mértékegységet)
[viszont akkor sem mozdult meg. a legtöbb böngésző pedig értelmezi a margin, padding, stb mértékegység nélküli megadását. ]

[Semmu]

jelen esetben de.. mivel máshogy nem sikerült. meg sem mozdult a left, right, stb-re.. -.-

mivel szokásod lehagyni a mértékegységet, így sztem ott is az lesz a baj xD

[Keveqiah]

bocs a késői válaszért, csak dolgoztam és most is csak beugrom, mert reggel megyek is vissza. -.-

Tehát.

De legalább neked eszedbe juthatna, hogy ha valami nem működik, akkor leírod, hogy mit csinál helyette és mi volt a cél.

Igaz, nem írtam le. Mivel konkrétan nem csinál semmit. Se hiba se mozgás, se semmi.. -.-

az <a> legyen blokk szintű elem (display:block;) majd ugyan azokat a tulajdonságokat add meg neki, mint a divnek.

megpróbálom..

jah és nem tudom, hogy mien az oldalad felépítése, de elárulnád, hogy minek ilyen nagy margó? ugye nem margóval igazítod helyre az elemet?...

jelen esetben de.. mivel máshogy nem sikerült. meg sem mozdult a left, right, stb-re.. -.-

De holnap majd megadom a felépítést és lehet tanakodni. Meg kioktatni engem.. 
Elküldve:: 2009. Augusztus 18.  23:08:36Asszem kezd megoldódni.. Már csak a pozícionálás maradt..

[Semmu]

mellesleg nem jó 5let <div>et <a>-ba tenni, mert IE-k csak az <a>-nál értelmezik a :hovert, így IEben nem fog látszódni a :hover.
megoldás: az <a> legyen blokk szintű elem (display:block;) majd ugyan azokat a tulajdonságokat add meg neki, mint a divnek.

jah és nem tudom, hogy mien az oldalad felépítése, de elárulnád, hogy minek ilyen nagy margó? ugye nem margóval igazítod helyre az elemet?...

[Rimelek]

A style-ban a marginnak kéne mértékegység. A linknek a href tulajdonságát pedig idézőjelbe kéne tenni.
De legalább neked eszedbe juthatna, hogy ha valami nem működik, akkor leírod, hogy mit csinál helyette és mi volt a cél.
Kicsit egyszerűbb lenne a dolga annak aki segíteni próbál.

[Keveqiah]

Van valakinek ötlete, hogy ez miért nem hajlandó működni?

Kód: CSS

1. div#a1:hover
2. {
3.         background-position: 10px 37px;
4. }
5.  

Kód: HTML

1.   <a href=#>
2.     <div id="a1" style="position: absolute; margin: 276 50; float: left; background: url(menu_1.png); width: 81px; height: 40px;"></div></a>
3.  

[Semmu]

na én most nem kérek, hanem adok
szóval az egész úgy kezdődött, hogy elkezdtem a pixel artot, s az oldalam design-ját is pixel art-ban akarom elkészíteni, ezért háttérnek el kezdtem rajzolgatni felhőket, majd vmi ötlet folytán összekötöttem őket függőleges meg vízszintes drótokkal, mintha csak papírból lennének kivágva, és eszembe jutott, hogy az oldalamnak lehetne olyan hatása, mintha azok a háttérben lennének, és az oldal is hozzájuk lenne drótozva, csak az előbbrébb van.
ezzel semmi gond sincs, csak a hatást nem nagyon lehet érzékeltetni, és ekkor találtam fel a spanyolt viaszt.
egy kis js+css ugyeskedéssel meg lehet oldani, hogy mikor görgetjük az oldalt, akkor a háttér is mozduljon meg, csak lassabban, mivel messzebb van. (mikor az autóban száguldunk akkor is "lassabban" mennek a távolabbi fák, mint az útszéliek)

css:

Kód: CSS

1. body {background-image: url(bg.gif); background-attachment: fixed; background-position: 0px 0px;}

js:

Kód: Javascript

1. function scrollbg()
2. {
3.         document.getElementById("body").style.backgroundPosition = "0px -" + (window.pageYOffset/8) + "px";
4. }

html:

Kód: HTML

1. <body id="body" onscroll="scrollbg()">

ezzel azt a hatást érjük el, mintha a háttér meszebb lenne, hisz "lassabban gördül"
a javascriptben az osztó számot módosítva állíthatjuk az érzékenységet (ami jelenleg 8, azaz 8-szor lassabban mozog a háttér)

ez most nem cross-browser és nem is reagál a vízszintes scrollozásra, de könnyen át lehet alakítani, így kezdő lökésnek jó remélem egyeseknek hasznára válik

[Keveqiah]

Hátha..
http://www.w3schools.com/css/css_background.asp

[Semmu]

nem lehet css-ben képet nyújtani sehogy sem.
esetleg úgy tudnád, hogy hátra tennél egy képet (<img> tag-gel), és annak a méretét állítanád js-el (width és height értékét, ugyanis úgy nyújtja) [csak így nagyon ronda lesz, pixeles]

[Satya]

Milyen CSS tulajdonsággal lehet beállítani, hogy a 1280 x 1024-as háttérképet pontosan képernyő méretéhez nyújtsa.

[Lucius]

Egyébként nem egy egyszerű rendszerről van szó, van vagy 300 php fájl abból kellene kiválogatnom, hogy melyik kapcsolódik a stílus fájlhoz.
Az a poén, hogy még a gyanús elemek is tovább mutatnak egy másik fájlra és így tovább

A vízjeles háttér meg nem nagyon szimpatikus, mivel prociterhelő. :dry:

Na még olvasgatok neten e témában aztán meglátjuk... :blub:

[Rimelek]

Igen. Erről beszéltünk. html kód a htmlhez kell kerüljön. Az pedig ha épp php kiterjesztésű fájlban van, akkor abban. Ha html-ben, akkor html-ben. Deez olyan, mint hogy ha nem jelölöd a forrásban, hogy új sor kezdődjön <br />, akkor a css nem fogja helyetted kitenni az új sort ( És nem a div-e blokk, illetve sorszintűvé tételére gondolok.  )

[Lucius]

Rimelek

Akkor most a php fájlokat is dolgozzam meg?
Gondolom arra értetted.
Mert ha nem írom bele a div1 és div2 kódokat akkor a php sem fogja érzékelni, hiába van benn a css fájlban a parancs.

[Rimelek]

Lucius
Olvasd el még néhányszor, amit írtunk!
Sehogy se azt akarod csinálni. Amit nem értek, mert kész kódot kaptál. És elköveted azt a hibát, amire azt mondtad, hogy nem szeretnéd. Mintha én ajánlottam volna, pedig épp az ellenkezőjét ajánlottam. Ezért nem tudok már neked újat mondani. Most rajtad a sor, hogy megértsd.

Isti861
majdnem. Egy aposztrófot lefelejtettél, de a lényeget érzed.
A másik, hogy a . és # nem mindegy. Az egyik css osztályra utal ( class ), a másik pedig egyedi azonosítóra.  ( id )

[Isti861]

ja ok látom záró jelben van  a background  

Kód: [Kijelölés]

background: url('../kepek/utana.png);  background-position: 0px 200px;amúgy én  #  helyett   pontot szoktam rakni   .div1    de lehet hogy jó #  is

[Lucius]

Kód: CSS

1. body {
2.         margin:0px 0;
3.         padding:0;
4.         color:#000000;
5.         line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:74%; font-family:Arial, Sans-Serif
6.         <div id="div1">
7.         <div id="div2">
8. }
9. #div1 {
10.         background: url('../kepek/hatul.png');
11.     background-position: 0px 1044px;
12.         }
13.         #div2 {
14.         background: url('../kepek/elotte.jpg');
15.         background-repeat: repeat-x;
16.         }

No most elvileg egy hátteret sem érzékel.

[Rimelek]

Nézd meg újra hol az a pontosvessző
Még a színezés is segít benne.

[Isti861]

A másik az, hogy ez mi?

Kód: CSS

1. background: url('../kepek/utana.png; background-position: 0px 200px');

Ez két külön tulajdonság lenne, de beraktad az url-be. Persze hogy nem észleli a képet, és így meg se fog jelenni.

de hát ha  ott  a pontos vessző az utasítás végén nem mindegy mellette vagy egy új sorban van ?

[Rimelek]

Én feladtam.
Senki nem mondta, hogy css fájlba tegyél html kódot!
Épp az ellenkezőjére hívtam fel a figyelmed. Kaptál egy komplett html forrást css-el együtt, amit kipróbálhattál volna, de mégis visszatérsz ahhoz, amit mondtunk, hogy nem jó. body-nak nem adhatsz két hátteret Ezért kell div-et használni. Ha azt nem akarsz, akkor nincs megoldás a problémádra.

Természetesen a html-t html fájlba írd. Attól még a css fájlt módosíthatod a mutatott css kód alapján.

[Lucius]

Rimelek ez egy elég összetett stílus ez a stílus fájl kb 50 php oldalt formál meg.
Szóval css-be html kódokat ha lehet nem illesztenék be.
Ez pusztán stílus.css fájl amiben vannak a stilisztikai parancsok.

Kód: CSS

1. body {
2.         margin:0px 0;
3.         padding:0;
4.         color:#000000;  
5.         background: url('../kepek/hatul.png');
6.     background-position: 0px 1044px;
7.         background: url('../kepek/elol.jpg');
8.         background-repeat: repeat-x;
9.         line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:74%; font-family:Arial, Sans-Serif
10. }
11.  

Na szóval itt az x tengelyes képet jeleníti meg a a pozíciósat nem.
Pozíciós képet gondoltam ismétlődőnek tengelytől függetlenül.

Kód: CSS

1. body {
2.         margin:0px 0;
3.         padding:0;
4.         color:#000000;
5.        background: url('../kepek/elol.jpg');
6.         background-repeat: repeat-x;
7.         background: url('../kepek/hatul.png');
8.        background-position: 0px 1044px;
9.         line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:74%; font-family:Arial, Sans-Serif
10. }

Itt meg pont fordítva.

[Rimelek]

A másik az, hogy ez mi?

Kód: CSS

1. background: url('../kepek/utana.png; background-position: 0px 200px');

Ez két külön tulajdonság lenne, de beraktad az url-be. Persze hogy nem észleli a képet, és így meg se fog jelenni.
Talán így:

Kód: CSS

1. background: url('../kepek/utana.png');
2. background-position: 0px 200px;

Elküldve:: 2009. Február 10.  15:21:48Ó Szűz Máriám

Nem mondtad, hogy semmi fogalmad nincs a css-ről.
A css az egy külön dolog. Külön blokk van rá. Az egy másik dolog, hogy lehet az adott div-nek is közvetlenül megadni a tulajdonságait, de így keverni a kettőt....

Kód: HTML

1. <html>
2.  
3. <head>
4. <style type="text/css">
5. #div1 {
6.     background-image: url('../kepek/hatul.jpg');
7.     background-repeat: repeat-x;
8. }
9.  
10. #div2 {
11.       background-image: url('../kepek/elol.png');
12.       background-position: 0px 900px;
13. }
14. </style>
15. </head>
16.  
17. <body>
18.  
19. <div id="div1">
20. <div id="div2">
21.  
22. </div>
23. </div>
24.  
25. </body>
26. </html>

Ráadásul még azt is egyben hagytad amire írtam hogy hibás, tehát abszolút nem vetted figyelembe amit írtam

[<madbence />]

Már mondta Warner is, hogy ágyazz egymásba tageket.
Máshogy nem fog menni. Le is írta mit csinálj.

[Lucius]

Simán background így is elfogadja. No amíg jönnek a tanácsok, addig agyalok rajta én is.
Lehet nem értitek teljesen az elképzelést és így nehéz segíteni.
Eféle elmebeteg ötletek is csak az én fejemből pattannak ki

Szóval x tengelyen van egy ismétlődő kép, és ha y tengelyre elkezdem görgetni a lapot a kép véget ér hamar.
Na az alá akarok egy másik háttérképet, ami kitöltené azt az üres részt.

[Isti861]

lehet hogy az nem befolyásolja  , de a background  az nem  background-image akar lenni?

[Lucius]

Kód: CSS

1. body {
2.         margin:0px 0;
3.         padding:0;
4.         color:#000000;  
5.         background: url('../kepek/elotte.jpg') repeat-x;
6.         line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:74%; font-family:Arial, Sans-Serif
7. }
8. body1 {
9.         margin:0px 0;
10.         padding:0;
11.         color:#000000;  
12.         background: url('../kepek/utana.png; background-position: 0px 200px');
13.         line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:74%; font-family:Arial, Sans-Serif
14. }

Sajna így sem tökéletes, az x tengelynél normálisan ismétlődnek a képek de alatta viszont fehér a háttér azaz nem érzékeli a másikat. :dontgetit:

[Warner]

Te még mindig ugyanannak az egy <body> tagnak próbálod a hátterét beállítani. Ez nem fog menni, mert a 2. felülírja az elsőt.

[Lucius]

Kód: [Kijelölés]

[shadow=red,left]body {
margin:0px 0;
padding:0;
color:#000000; 
background-image: url('../kepek/utana.png') background-position: 0px 200px;
background-image: url('../kepek/elotte.jpg') background-repeat: repeat-x;
line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:74%; font-family:Arial, Sans-Serif[/shadow]
Így néz ki kb a stílus.css fájlom ezért felelős része.
Sajnos nem nagyon akar összejönni még így sem. :dontgetit:

[Warner]

Helló!

Helyezz egymásba két divet, ezek hátterét külön szabályozhatod. A külső div háttere lesz alul, a belsőé pedig felül, így a legfelső sávban a belsőé lesz látható. Ahhoz, hogy a hátsó háttér pont az első aljánál kezdődjön, lejjebb kell tolni az elöl lévő magasságával (példában 200px).

Kód: HTML

1. <div style="background-image: url('hatul.jpg; background-position: 0px 200px')">
2. <div style="background-image: url('elol.jpg'); background-repeat: repeat-x">
3. tartalom
4. </div>
5. </div>
6.  

[Lucius]

Először is sziasztok!

Az lenne a kérdésem, hogy hogyan lehet megoldani, hogy pl az x tengelyen ismétlődik egy háttér majd pl az üres részeket egy ismételten másik háttér töltené ki nem pedig szín.

background:  #0b3a03 url('../kepek/hatterx.jpg') repeat-x;

background:  url('../kepek/hatterx.jpg') ;

Előre is köszönöm a szíves válaszotokat!