ugrás a tartalomhoz

igen extra css kérdés

Anonymous · 2004. Nov. 16. (K), 23.53
Üdv Mindenkinek!

Furcsa kérdésem lenne, és előre szólok, hogy explorer alatt is működnie kell, mert a megrendelőnek fontos.
Szeretnék egy olyan CSS elrendezést megvalósítani, hogy:
[-----kép------]
____|szoveg|____
____|szoveg|____
____|szoveg|____
[-----kép------]

(a _-t vegyétek nem létezőnek)
Eddig ezzel nem is lenne baj, ám a probléma a következő:
a két kép egy-egy félkör: így a szöveg háttérszíne ÉS a border alá kellene, hogy csússzon a képeknek.
Elég sok mindent megpróbáltam már, de valamiért mindig szétesett.
Jut eszembe, nem fix a lábléc, tehát bottom: 0 kizárva. De persze explorer a position:inherit-et nem kezeli le...
szóval szeretnék ötleteket kérni.


Cadeyrn
‹ Pozíciólekérdezés Javascript-ből CSS és INPUT, különböző böngészőkben... HELP! ›
 ■
1

így?

bbalint · 2004. Nov. 17. (Sze), 00.47
ez csak elméleti megoldás, ki nem próbáltam:

<div style="background:url(felsofelkor.jpg) 0 50% no-repeat;">
  <div style="background:url(alsofelkor.jpg) 100% 50% no-repeat;text-align:center;">
    <div style="margin:0 auto;padding-top: !felso ellipszis magassága!px;padding-bottom: !also ellipszis magassága!px;text-align:left;">
      szöveg, középre igazítva, mert gondolom az akart lenni
    </div>
  </div>
</div>
persze, ez így korántsem jó, mert. mert lehetne olyat is, hogy framéket csinálsz és az tuti műxik minden böngészőbe, internet explorer-be.

illetve, eme kód: van egy div (layer), aminek a háttere a felső ellipszis, azon egy másik layer, átláccó, hátterének beállítva a alsó ellipszis, majd tartalom.

és az a nem jó ezzel, hogy nem 100% magas, bár itt a ,,weblavóron'' volt már link, hogy hogyan lehet elérni, hogy egy-egy elem 100% magas legyen ...

bbalint
2

[igen] próba

bbalint · 2004. Nov. 17. (Sze), 00.59
tettem egy próbát,

<div style="width:300px;background:#844;margin:0 auto;">
  <div style="background:url(felsofelkor.bmp) 50% 0 no-repeat;">
    <div style="background:url(alsofelkor.bmp) 50% 100% no-repeat;text-align:center;">
      <div style="margin:0 auto;padding-top: 50px;padding-bottom: 50px;height:100px;">
        szöveg, középre igazítva, mert gondolom az akart lenni
      </div>
    </div>
  </div>
</div>
mely műxál firefoxban szépen, IE 4.01, IE 5.01 SP2, IE 5.5 SP2 és IE 6 (minden patch nélkül) fajta internet explorer-ekben is megjelenik, ahogyan kell. neked, asszem.

bbalint

ui: a fenti példában csináltam kép bmp filét és mindkettő magassága 50 pixel volt, szélességük pedig 300 pixel ...
3

nem extra

Jano · 2004. Nov. 17. (Sze), 02.11
a kerdes megoldhato a kerdes mar csak az, hogy kell-e hozza sok plussz elem vagy van eleg alapbol.

A lenyeget mar leirtak elottem, 2 hatterkep kell es paddinggal vagy margin-nal el kell tolni a tartalmat.

Na most ha viszonylag korlatolt magassagu a tartalom akkor akar 2 elemmel is megoldahto a dolog. Ilyenkor a kereteket hatternek adhatod osszefogva mondjuk az also felkorrrel.


Kerlek ird le reszletesebben, hogy pontosan mihez kell:
- kell-e nyulnia oldal iranyban
- mennyire kell rugalmasnak lennie magassagban
- pontosan milyen tartalomhoz kell (esetleg tobbfajtahoz is?)

A legjobb lenne ha mutatnal egy kinezet tervezetet.
4

kicsit félreértettétek

Cadeyrn · 2004. Nov. 17. (Sze), 10.18
Üdv!

A problémának más a lényege: a középső rész mondjuk 700 px, de a két kép 900...
itt egy kép, hogy milyennek szeretném, hogy kinézzen: http://cadeyrn.atw.hu/users/cadeyrn/rajn.jpg

A lényeg, hogy azért css, mert változtathetóra szeretném a középső rész színét, amik viszont benyúlnak a képek alá is.
5

png problema lesz csak

Jano · 2004. Nov. 17. (Sze), 13.31
CSS-sel megoldhato, csak az IE vacak PNG kezelesevel lesz problema:

Nezzuk:

Fogsz egy DIV-et amibe az egesz bele fog kerulni. Beallitod a szelesseget, es relativ pozicionalta teszed, igy a benne levo abszolut pozicionalasu elemek hozza fognak igazodni.

A felso felkor egy DIV hattere lehet. Ezt a DIV-et abszolut pozicionalod. Igy az utana kovetkezo elemek szamara olyan mintha ott se lenne es azok ala fognak csuszni.

A tartalom DIV a kovetkezo, ennek felso padding-ot adsz, hogy a szoveg ne csuszzon a felso felkor ala.

Ezenkivul also paddingot is adsz, hogy a mindjart elmondott also felkor ala se csuszon be.

Jon az also DIV. Ezt 2 fele modon is megcsinalhatod.
Elso, hogy ugyanugy abszolut pozicionalod mint a felso felkort, csak ennek bottom:0-at adsz.
A masik megoldas: hogy egyszeruen a felso-margot negativ ertekkel rahuzod az elotte levo tartalom DIV-re.
(IE alatt ezzel van egy kis bug, eltunteti a negativ-margo alatti reszt, hogy ezt kikerult adj neki position:relative -ot).

A problema:
A felkor es a tartalom hatterszin talalkozasanal, hogy a felkor szep sima legyen atmeneti szinu pixelek is kellenek, ezt ugy lehet megoldani, hogy a felkor alpa csatornas PNG-be lesz elmentve. Ezt viszont IE nem tamogatja alapbol.

Ezert 2 megoldasvan:
1. Vagy legyartod minden hatterszinthez a megfelelo felkort es ezt adod be CSS szaballyal. Ez egy csomo plusz munka
2. Hasznalod az IE PNG filteret. Ilyenkor nem lesz valid a kod. Ezert ezt a reszt tedd conditional commentbe.

Sok sikert!
6

köszönöm

Cadeyrn · 2004. Nov. 18. (Cs), 14.19
Jano, nagyon szépen köszönöm, bár még nem próbáltam, mert nem volt rá időm, de úgy tűnik, jó lesz.
A PNG dologgal nem lesz baj, ha kicsit szétesik is a széle GIF-ben, ha abba mentem, mindenhol jó lesz.

Ha lesz időm megcsinálni, megmutatom, sikerült-e.

Még egyszer köszönöm,
Cadeyrn