ugrás a tartalomhoz

css - 2 image backgroundban

spuri · 2005. Május. 9. (H), 17.01
olyat szeretnék hogy van egy table annak is egy oszlopa és sretném ha bg-image csak az 5px-től lefele jelenne meg (az oszlop magassága változo!)

0px 5px repeat-y együtt nem jó
probámtam 2 imaget berakni hogy a 2. lefedje az alső tetejét de az sem nyert...

vki tud segiteni?
köszi
s
 
1

egymásba ágyazott elemek

Jano · 2005. Május. 9. (H), 18.25
Nem lehet egynél több képet háttérnek definiálni. A háttérképen kívűl egy hozzá passzoló hattérszín beállítása viszont célszerű.

Két képet úgy lehet egymásra tenni, ha azok egymásba ágyazott elemekhez vannak rendelve. Pl te esetedben a tr vagy table elemhez próbálhatod rendelni. (Menüknél a lista LI és a link A elemhez szokták.)

A pozició azt mondja meg, hova kerüljön a kép ha nincs ismétlődés. Ha van ismétlődés akkor ehhez a pozicióhoz kerül a referencia kép és ehhez képest minden irányba (illetve csak függőlegesen, vagy vizszintesen) kerül ismétlésre.
2

Még egy lehetőség lehet,

Anonymous · 2005. Május. 11. (Sze), 10.48
Még egy lehetőség lehet, ha minden említett táblázat cellába beszúrsz pl egy span elemet.
SPAN {
display: block;
height: 5px;
}

Vagy használhatsz backgroundnak egy a cella méreténél nagyobb gif-et aminek a felső 5 sora átlátszó. de ebben az esetben no-repeat
3

ne terjen vissza a spacer.gif

Jano · 2005. Május. 11. (Sze), 11.16
Na azert az ilyen feleslegesen beszúrkált elemekkel csak ovatosan kulonben visszaterunk oda amikor meg helykihagyashoz spacergiffeket tomkodtunk mindenhova!
4

hogy is mondjam el...

spuri · 2005. Május. 12. (Cs), 01.25
az oszlop (<td colspan='2' bgcolor='ffffff' valign='top' class='menubg'>)
.menubg {background:url('images/035_20.gif');}

ebben vannak képek (gombok) és legfelül nem szabadna kilátszani a háttérnek de kb 1px kilog :( jo lenne ha a 0 5 repeat-y lehetne +/- hogy csak lefelé szaporodjon

a span-t kiprobáltam de mintha nem jó helyen jelenne meg a block, a töbit meg még nem értem teljesen :(

köszi
s
5

screenshot

Jano · 2005. Május. 12. (Cs), 11.41
Fel tudnal tenni egy screenshotot hogy hogyan kene kineznie? Konkret peldara konnyebben tudunk megoldast mondani!

A szamok utan mindig kell mertekegyseg!
6

screenshot

spuri · 2005. Május. 14. (Szo), 23.05
remélem látszik hogy az alulrol fölfelé jövö fuggoleges vonalak elhalványulnak, de kilog alola a hatterkep egy picit -
7

vmit latok :)

ashnur · 2005. Május. 15. (V), 08.23
en szemely szerint valamit latok de nekem egy ekkora reszlet nemannyira eleg hogy megmondjam, hogy csinalnam :)

lehet van olyan akinek egy ekkora kep is eleg. de szerintem jobban jarnal ha legalabb meg 100-100 pixelt minden iranyba megmutatnal mar ha egyaltalan van annyi mindegyik iranyban
persze lehet felted a designt le ne lopjak vmelyik reszet. akkor viszont max mailben kuldheted e lvkinek akiben megbizol

azt tudnod kell, hogy mar rengeteg designtervet lattam de meg nem lattam olyat amit a legmodernebb bongeszokre tervezve ne lehetett volna megoldani pontosan ugyanugy.
8

lista

Jano · 2005. Május. 15. (V), 12.00
Na probaljuk meg:

Eloszor is a menut HTML-ben egy listaval (UL) jelold mert az "szemantikusabb" vagyis jobban vissza adja a szerepet. A menu ugyanis egy link felsorolas, hogy milyen fo reszekbol all az oldal. Vagy roviden: navigacios linkek listaja. A leginkabb az bizonyitja a lista elonyet a tablazattal szemben amikor almenuk is vannak egy menuponthoz mert ekkor egy beagyazott listaval ez jol jelolheto!

Itt talalsz általam listában lekódolt menüket amik CSS-sel lettek formázva:
CSS menü

Többféle lehetséges trükköt is alkalmazhatsz attól függően, hogy a lista alja hogyan néz ki, illetve a menük váltanak-e állapotot amikor egér rájuk megy. Más a praktikus képkivágás.

Ha a lista alján nincs ilyen elhalványodás akkor alkalmazd azt a trükköt mint én az Index almenünél, hogy az UL-nek adod hátteréül az elhalványodó részt és padding-top segítségével lejjebb nyomod a lista elemeket.

A lista elemeket az Index fömenüs képcserés megoldással tudod megoldani.
Ha kell váltó állapot is akkor a háttér pozició váltás a megoldás. Nézd meg itt a főmenüt: Pszinapszis
9

onlány

spuri · 2005. Május. 16. (H), 22.53
idöközben kénytelen voltam feltenni a hibával együtt
http://www.tiszaroff.hu/
10

ize...

ashnur · 2005. Május. 17. (K), 06.24
vesszek meg ha latom a hibat. mindenesetre amit Jano mondd azt megszivlelheted nyugodtan :)
15

Használhatóság - tartalom

Jano · 2005. Május. 17. (K), 15.30
Az oldal grafikailag eleg korrekt, megeloz nehany "profibb" alkotast is!
Viszont a hasznalhatosagan kene egy picit javitani. Ha megengedsz nehany eszrevetelt es tanacsot:

1. A menünél nem látszik ránézésre hogy hogyan működik, nem gondolná az ember, hogy almenük fognak kinyilni mert nincs erre utalo semmilyen grafikai jel (pl lefele mutato nyil). Ami nagyobb problema, hogy a menupontok felett nem valt at "itt valami kattinthato" modba az eger kurzor igy olyan mintha a menu nem lenne kesz!
A menü csak akkor működik ha javascript is engedélyezve van. Azok akiknek nincs nem tudnak navigálni az oldalon. Kerülő megoldásként egy sitemap oldal megoldást jelentene nekik is. Illetve ha a főmenü pontok linkek lennenek egy olyan oldalra ahonnan elerhetok az almenuk. Megoldato lenne, hogy onclick-re a menu kinyilna ha van javascript, ha pedig nincs akkor az aloldal jon be)

2. A fejlecben a logo hagyomanyosan kattinthato a weboldalakon es a fooldalra visz vissza. Erdemes lenne ezt itt is alkalmazni pl imagemap segitsegevel gyorsan megoldhato.
(En a fejlec feldarabolasa helyett javasolnam a progresziv jpeg alkalmazasat! Ilyenkor a kep fokozatosan elesedik ahogy toltodik le.)

3. A hireknel a cim szokas szerint kattinthato. A tovabb link jobban mutat a bekezdes vegenel mint uj sorban. A kategoria jelolo ikonok jopofak, szinesek de nem mindig tudom elsore kitalalni, hogy mit is abrazolnak. Itt segithetne a title parameter kitoltese, hogy amikor fole viszem a kurzort kiirja mi is az.

Tartalmi dolgok:

A nyitolap eleg kihasznalatlan! Ha belegondolunk, hogy egy ide erkezo ember mire kivancsi akkor az biztos nem a polgarmester udvozlese. (De ha mar marad, legalabb itt nem az egesz oldalt foglalja el, mindossze 1 bekezdest.)
Ami erdekli az embereket az talan 3 nagy csoportra oszthato: helyi lakosok, turistak, vallakozok. Igaz hogy ezekaz informaciok elerhetok a menupontokban de sokkal szinesebb lenne es figyelemfelhivobb ha ezek a csoportok mar a nyitolapon a tartalmi reszben friss informaciokat kapnanak!

Miert erdemes a turistaknak ide jonni?
Miert erdemes a vallakozoknak itt befektetni?

Formazas:
A szovegek jol vannak tagolva de a betumeret mindenhol egyforma. Alkalmazd tobbet a cimeket, alcimeket az oldalon belul! Segit a szemnek megtalalni az informaciot!
Szerintem nagyon picik a betuk, egy ilyen oldalon ahol oregek is valoszinu latogatok lehetnek minimum 12-es betumeret ajanlott.

Remelem epitojellegunek talalod a hozzaszolasomat.
Tovabbi jo munkat!
17

ezt meg hogy hogy csak most olvasom

spuri · 2005. Május. 18. (Sze), 23.56
köszönöm az épitő kritikát, kevés az időm de mindenben lépni fogok amit javasoltál - sőt volt olyan amit megnéztem hogy még tényleg nem csináltam meg? ;)
köszi
11

A "" felett lévő miért

csla · 2005. Május. 17. (K), 07.12
Az első "<!-- Keep all menus within masterdiv-->" felett lévő <SPAN></SPAN> miért van benne? Ha azt kiveszem, akkor nem látszik ki felül a háttérkép. (Legalábbis FireFox-ban)
12

kivettem

spuri · 2005. Május. 17. (K), 14.10
kivettem a span -t de firefoxban nekem még látszik
apró kis vacak de zavar :(
13

Megértem, engem is szokott

csla · 2005. Május. 17. (K), 14.24
Megértem, engem is szokott zavarni az ilyesmi.
Firefoxban ha van validatorod, akkor nézd meg a Clean up the page funkciót, ott ha megnézed a javított eredményt, akkor annál nem jelentkezik a hiba. Első ránézésre azt hittem, csak a span a hiba, mert azt láttam, hogy kivette, de nézd akkor végig, hogy mi a különbség, és talán megtalálod a megoldást.
14

kep a sorban

Jano · 2005. Május. 17. (K), 15.11
A problema valoszinu az, hogy egy 14px magas kep van egy sorban es alapbol a sormagassag kb. 16px! Tehat allitsd at a felso elhalvanyodo kep korul a line-height erteket, es meg megadhatod a vertical-align:bottom; tulajdonsagot is a kepnek!
16

99%

spuri · 2005. Május. 18. (Sze), 23.49
átméreteztem 16px-re és firefoxban már jó is, ie még sajna nem érti

v-align top-ra gondoltál nemde? és a line-high az meg hogy is mert az nem megy :(

naon köszi
18

Line-height vertical-align

Jano · 2005. Május. 19. (Cs), 00.06
Itt egy link line-height témában:
http://www.autisticcuckoo.net/archive.php?id=2005/05/05/line-height


Nem top-ra hanem bottomra gondoltam. Az inline elemeknel ha a szövegben van egy kep akkor annak alja az alapvonalra kerül alapból igazításra. Az alapvonal az a vonal amire a betűk alja támaszkodik, azoké amik nem lógnak le mint pl j vagy a g. Lathato, hogy ha erre a vonalra igazodik a kép akkor alatta hely marad ki. (Felette is valószínűleg mivel a line-height ertekebol a font-size erteke levonasra kerul es elosztja fent és lent egyenletesen.)
19

értem már de nemtom hogy kell használni

spuri · 2005. Május. 22. (V), 18.46
elolvastam minden okosságot, már-már értem hogy mire való ez a line high de nem tom hol és hogyan kellene alkalmaznom hogy sikerüljön végre :(

probáltam igy vagy a div -hez vagy a td -ben megadni
<img src='images/menu_00.gif' width='150' height='16' style="line-height:16px">
ill vhol azt irják hogy image -hez nem megy ie & ns 4+ -ban
:((((
20

nem megy :(

spuri · 2005. Május. 31. (K), 22.43
olyan szinten kisebbre vettem a line-height -t hogy a betűk már alig látszódtak de a képre nem hatott :(
21

lécci

Anonymous · 2005. Jún. 6. (H), 09.53
please help