ugrás a tartalomhoz

CSS alternatív header

kruftmaftha · 2008. Okt. 5. (V), 11.16
Sziasztok!

CSS-ben változó headert szeretnék létrehozni, úgy, hogy több képből véletlenszerűen válasszon az oldal fissítésekor.
A stíluslapon eddig ez áll:

/* header */
.gfx {
background: #222 url(img/header.jpg) no-repeat;
height: 141px;
}
.gfx h1 {
color: #111;
font: normal 2.6em Tahoma,sans-serif;
padding: 16px 20px;
}



Mit és hova írjak hozzá, hogy jó legyen?

Köszi!

Üdv. András
‹ háttérkép css-sel JS töbdimenziós tömb ›
 ■
1

Javascript

NetBandita · 2008. Okt. 5. (V), 11.52
Szerintem kezdj el ismerkedni a javascript nyelvezetével. CSS-sel nem tudsz (illetve nagyon korlátozott módon mégis) dinamikus weboldalt készíteni.
2

Köszi...

kruftmaftha · 2008. Okt. 5. (V), 12.16
Köszi, de nem kifejezetten dinamikus oldalt szeretnék, nekem elég, ha a header-képet mondjuk 5 képből véletlenszerűen váltogatja az oldal frissítésekor...
3

Háttér pozíció

yaanno · 2008. Okt. 5. (V), 12.44
Szvsz nem fogsz takarékos megoldást találni, és nem úszod meg a dinamikus cserélgetést sem, de tessék.

Php v. javascript segítségével véletlenszerűen adsz mondjuk a body-nak egy classt .rh1 és .rh5 (random header, kb) közötti értékekkel; eztután csinálsz egy szép nagy képet, amire ráteszed az összes header háttérnek szánt képet egymás alá (header.jpg), majd a background-position (y tengelyen természetesen) értékeit addg csúsztatod, amíg a háttérkép a megfelelő pozícióba kerül. Példa:

/* header - eredeti kódod */
.gfx {
background: #222 url(img/header.jpg) no-repeat;
height: 141px;
}

.gfx h1 {
color: #111;
font: normal 2.6em Tahoma,sans-serif;
padding: 16px 20px;
}

/* "random header" */
.rh1 .gfx { background-position: 0 0 }
.rh2 .gfx { background-position: 0 -141px }
/* stb :) */
4

Köszi, ráállok. :)

kruftmaftha · 2008. Okt. 5. (V), 12.50
Köszi, ráállok. :)
5

Nna...

kruftmaftha · 2008. Okt. 5. (V), 13.19
Ez valahogy mégsem akar sikerülni, de azért köszönöm a segítséget.
6

Ez nem túl bonyolult?

Iggy · 2008. Okt. 5. (V), 15.17
A javasolt megoldásban miért jó, ha egy képre vágod az 5 hátteret? Szerintem elég, ha az 5 stílusban mást adsz background értéknek. Pl:

background: url('1kep.gif');
.
.
.
background: url('2kep.gif');
7

Egyszer kell betölteni

Poetro · 2008. Okt. 5. (V), 15.26
Mert így a képet csak egyszer kell betölteni, és nincs várakozás a háttérképre a többi oldalon. Főleg akkor tud hasznos lenni, ha JS-el mozgatod a háttér pozícióját.
8

css sprites

gex · 2008. Okt. 5. (V), 17.48
keress rá a fenti szövegre.
9

Dinamikus kép esetleg?

deejayy · 2008. Okt. 6. (H), 07.45
Én a következőt javaslom:

background: #222 url(img/header.php) no-repeat;

A header.php pedig file_get_contents-szel és a header("Content-type...") parancsokkal tetszőleges számú képből válogathatsz.

El nem tudom képzelni, hogy hol van ilyenre szükség, dehát...
10

expression()

kris7topher · 2008. Okt. 6. (H), 18.56
A megoldás: expression(), ami a zárójelek közötti javascript kódot végrehajtja. Egyáltalán nem szép megoldás, nagyon erőforrás igényes, csak IE alatt működik, de a kérdésre a válasz ez. De így nem érdemes csinálni, viszont lehet, és ez a legrövidebb.
11

Jaj

yaanno · 2008. Okt. 6. (H), 19.51
Remélem, csak vicceltél :) Mindenki, ismétlen mindenki (Microsoft inkluzíve) igyekszik messziről elkerülni az expression-öket a stíluslapokban. Ha már js, akkor lehet full js, dom loaded-re kötve a div háttere forrásának / pozíciójának beállítását.
12

Hmm...

kruftmaftha · 2008. Okt. 7. (K), 19.22
Nem bonyolítjátok túl egy kicsit? Én egyszerűen csak azt szeretném elérni, hogy ne mindig ugyanazt a képet tegye be, ha megnyitom az oldalt, hanem több különbözőt variáljon... Én balga, gondoltam, hogy elég megadni a (mondjuk öt) kép(ek) nevét és még valami parancsot, hogy azok közül válasszon ki egyet, ha megnyitom az index.html-t...
13

Meg kell adni egy parancsot

Poetro · 2008. Okt. 7. (K), 19.29
Csak mint a programozásban mindig, egy feladatot végtelen módszerrel meg lehet oldani, az aktuális körülményektől függően érdemes választani a lehetséges megoldások közül, ami, ha statikus HTML-ről van szó, akkor marad JavaScript-es (sprite-os) megoldás.
14

Értem...

kruftmaftha · 2008. Okt. 8. (Sze), 07.56
Értem, de nekem valamiért nem akar összejönni a fent említett "random header"-es megoldás... annyira azért nem értek hozzá, mint szeretnék... :/
15

Megoldás

janoszen · 2008. Okt. 8. (Sze), 09.27
Egyrészt sztem ne akarj ilyet csinálni, mert egyrészt webhez még csak távolról sem értő emberek szoktak ilyen dizájn-ötletekkel előállni, másrészt oldalbetöltés szemszögéből nem előnyös, ha mindig új kép töltődik be.

Ami a megoldást illeti:

  • Flash, ami betölti a fejlécet.
  • JavaScript, ami egy adott div stye.background tulajdonságát állítgatja.
  • PHP, ami mindig más CSS-t húz be a fejlécbe.
  • Ezek tetszőleges kombinációja.
16

Köszi

kruftmaftha · 2008. Okt. 8. (Sze), 21.52
Sajnos tényleg nem túlzottan értek a webhez, maximum a htm alapú dolgokhoz valamennyire, de újítani szeretnék már valamit, és gondoltam a CSS-sel kezdem, de hogy mit mivel éri meg csinálni, azt még nem tapasztaltam ki...

Szóval Köszi még egyszer mindenkinek a segítséget!
17

ez kicsit demagóg lett

gex · 2008. Okt. 8. (Sze), 22.21
egyrészt a változó fejléckép szerintem akárkinek a fejéből kipattanhat, nem kell ahhoz távolról sem érteni a webhez, másrészt az oldalbetöltődés szempontjából elhangzott a css sprite-os megoldás.

szerk: a "mindig más css" és a "flash" megoldásokkal ráadásul mintha egy kicsit magad ellen is beszélnél.
18

Valóban

janoszen · 2008. Okt. 8. (Sze), 23.04
Lehet, kicsit sarkítottam, bár alapvetően azt gondolom, hogy ha valaki az oldallal egy brandet, egy arculatot vagy akár csak stabilitást akar sugározni, akkor kell(ene) lennie egy egységes kisugárzásnak. Szvsz a random módon váltakozó headerkép a teljes képernyős háttérkép egy kevésbé rossz de még mindig eléggé problémás reinkarnációja.

Ami a Flasht és a mindig más CSS-t illeti, szükségmegoldások, de legalább skálázhatóak. A Flash-el tud kezdeni más dolgot is és a mindig más CSS-sel később válthat skinezőre is, ha megtanulja, hogy kell.
19

ízlések

gex · 2008. Okt. 8. (Sze), 23.27
szerintem az, hogy ki mivel akar brand-et építeni és stabilitást sugározni az egy teljesen szubjektív dolog. mivel nem láttunk semmi konkrétat nem tudhatjuk hogy miben térnek el a háttérképek. lehet hogy az egyik csíkos a másik meg pöttyös, de a karakterük ugyanolyan. vagy ott vannak a google jeles napok alkalmából megváltoztatott logói, ennél jobb példát nem is tudok mondani.
a nagy háttérképekről pedig nemrég volt egy blogmark, egyik oldalról sem sugárzik az amatőrség.
20

Igazából a headerek úgy

kruftmaftha · 2008. Okt. 9. (Cs), 21.30
Igazából a headerek úgy festenek hogy van rajtuk egy logo meg egy kép, az oldal hangulatához alakítva, és a logo meg a dizájn mindig változatlan csak a kép változik mellette. A google-s példa találó; a hangulat meg a header alapja marad de valamennyire mégis eltérőek.

A random-ot nem úgy értettem, hogy a képeknek semmi közük egymáshoz, hanem hogy véletlenszerűen válogasson közülük. Így mindig csak egy header-képet kellene betöltenie, de nem mindig ugyan azt a képet. Ezekszerint ez CSS-ben nem megoldható...

Az hogy kezdő vagyok webszerkesztés terén, nem jelenti azt, hogy teljesen fantáziátlan is. Az pedig, hogy milyen oldalhoz, milyen dizájnhoz, milyen brandhez, arculathoz, vagy akármihez szeretném ezt megcsinálni, ez esetben teljességgel lényegtelen, volt egy problémám, amire segítséget vártam, ami(ke)t ezúton is még egyszer köszönök.

Ezek szerint akkor CSS-ben nem lehet olyat megcsinálni, hogy a főoldal megnyitásakor több megadott kép közül válasszon bannert, erre legegyszerűbb (és ehhez legközelebbi) megoldás a CSS Sprite-módszer.

Köszi még egyszer mindenkinek!