Autor Zpráva
Knopi
Profil
Ahoj, aby bylo na srozuměnou.
- Zelený blok, bude v normálním toku dokumentu. (nesmí být pozicován)
- Čevený blok bude mít pevnou šířku a výšku, musí být pod zeleným. Ten Zelený blok nebude mít pozadí, takže červený blok pod ním bude vidět - ten růžek co se překrývá.

Asi se ptáte, proč chci cpát ten červený blok pod. Bude se v něm měnit obrázek. Řešením by také bylo ho prostě umístit jako pozadí rodičovskému bloku, jenže je to podněkud komplikované. Ty obrázky co se budou měnit budou sloučené - bude to jeden dlouhý obrázek, proto to musí být v tom bloku, zbytek bude schovaný.

Pokoušel jsem se to nějak udělat absolutním pozicováním, jenže bez úspěchu. Když dám záporný z-index, tak blok napříč prohlížeči zcela zmizí. Budu rád za každou radu. Děkuji.

Ilustrační obrázek:
xthomas
Profil
no jestli proste potrebujes to aby byl v rohu zeleneho vidět roh červeneho, tak ten červený můžeš proste napoziciovat s kladnym z-indexem nad něj, ne?? nebo jde o nejaky border u zeleného prvku?
Knopi
Profil
xthomas: Musí být pod a vcelku červený blok, protože v zeleném bloku bude text, který by se schoval by se pod ten červený blok, kdyby byl výše, jak radíš. Proto potřebuji, aby byl červený blok vespod.

Pokoušel jsem se o to nějak takto:

css:
#box {
background: red;
width: 300px;
height: 320px;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
xthomas
Profil
to půjde ten text pres roh obrázku v červenem bloku? tomu se raději vyhni, ne?

se z-indexem mám špatnou zkušenost, asi ho neumím správně používat, protože jsem se dostával do podobných situací jako ty :) nakonec jsem vždy vymyslel nějaký jiný řešení. nemuzeš jít třeba u toho cerveneho bloku do varianty ze by byl jako background? Každopádně jiný řešení jsem nikde nenašel..
Zahon
Profil
Napadlo mě řešení, ale není to zrovna elegantní... Spočívá v tom, že zelený div by měl position: relative; a v něm by byly dva divy s position: absolute; - jeden je ten červený s z-index: 1; a druhý je menší a zelený s z-index: 2; překrývající roh toho červeného divu, který nechceme aby byl vidět. Jak říkám, není to moc elegantní ale mělo by to fungovat..

EDIT: kdybych znal výšku a šířku zeleného bloku šlo by to i elegantněji se třemi divy. Ale to asi neznám, což?

EDIT2: Pardon, tak jak mne Knopi upozornil níže, špatně jsem pochopil nákres... Takže takhle se to nevyřeší.
Knopi
Profil
xthomas:
to půjde ten text pres roh obrázku v červenem bloku? tomu se raději vyhni, ne?
Ano, ta grafická opičárna co bude v červeném bloku, růžek bude zasahovat do zeleného bloku (proto to nemůže být nastaveno na background a musí to být pozicované "vyjmuté z dokumentu", nemůže ovlivňovat jiné bloky - není místo), přes ten roh možná povede text nadpisu, když bude dlouhý, nebo zvětšený.

Chápej, že to musí být tvořeno takto, protože obrázek musí být v celku, poněvadž se bude na každé stránce měnit. Nemůžu ho rozstříhat.
Knopi
Profil
Zahon: Trošku jsem to zřejmě špatně nakreslil. ZELENÝ BLOK bude průhledný a ČERVENÝ BLOK bude tedy pod zeleným vidět.
Knopi
Profil
Díky všem, už jsem to vyřešil, ale stejě by mne zajímalo jestli existuje nějaká cestička záporným z-indexem při absolutním pozicování. Každopádně mozzilka je z toho celá pryč. :)
Plaváček
Profil
Knopi

Možná se pletu, ale mám takový pocit, že i na prvky s position:relative lze úspěšně naroubovat vlastnost z-index. Čili bloku zelenému dáš position:relative a z-index:2 a blok červený umístíš absolutně v kódu za zeleným s vlastností z-index:1 a mělo by to fungovat (netestoval jsem).
Knopi
Profil
Plaváček: Funguje. :o) To jsem z toho celej vedle. :o) Jen prvku s position:relative a z-index:2
se nesmí přiřadit float, potom ze záhadných důvodů zmizne v IE absolutně pozicovaný prvek - jen první postřeh z mého pohledu, ale to mi nevadí. Díky nadevše.
Plaváček
Profil
Knopi

potom ze záhadných důvodů zmizne v IE absolutně pozicovaný prvek

To může mít souvislost s několika věcmi. Především plovoucímu prvku je dobré nastavit šířku (to asi máš), ale abys obešel Peekaboo, je dobré bloku nadřazenému nastavit pevnou šířku (nebo výšku, prostě nějaký rozměr), postačí třeba i pro IE width:100%. A zase by to mělo šlapat.
Knopi
Profil
Plaváček: To může mít souvislost s několika věcmi. Především plovoucímu...
Na to jsem dával pozor. Zdá se, že tato krkolomná konstrukce je nad mé síly.

CHYBY:

- MSIE absolutně pozicovaný prvek se vůbec nezobrazí, když se uvede float u každého prvku. Mimo bloku (#obsah) - v něm se může floatit

- OPERA 8.54 absolutně pozicovaný prvek se zobrazí, ale nad blokem s vyšším z-indexem tedy (#obsah)

Jinak je to funkční!

Ukázka je zde:

Absolutně pozicovaný prvek - zmizí v MSIE

Mám v záloze ještě jedno funkční řešení, takže kdybyste si také nevěděli rady, tak to přežiju. Jinak všem děkuji.
Plaváček
Profil
Knopi

Prostě matrjoška je zlato, říkám to pořád. Udělej to takto:

Divy #obsah a #sloupec včetně clearu vraž do divu třeba s id="content" a tomu nastav šířku na width:100%. Šlape jak hodinky a jeden DIV navíc nikoho nezabije.

Viz http://klient.plavacek.net/rosicky.html
Knopi
Profil
Teda Plaváčku, já čumim jak péro z gauče. Na to bych nepřišel ani za sto let. :) Ty si génius..., ještě jednou děkuju.
Toto téma je uzamčeno. Odpověď nelze zaslat.

0