Autor Zpráva
MilanJ
Profil
Potřeboval jsem vytvořit 3-sloupcový fluidní layout a na webu jsem našel zajímavej článek na css.interval.cz/clanky/vychytany-trisloupcovy-fluidni-layout-se-stejno u-delkou-panelu/.
Při úpravě tohoto layoutu jsem narazil na problém, se kterým si nevím rady. Tím problémem je elastický banner v horní části stránky, u kterého by levá a pravá část byla pevná a prostřední část by byla elastická podle toho, jak byuživatel stránku zvětšoval či zmenšoval.

Asi to nezní moc srozumitelně, tedy příklad: www.mdesign.ru/projects/sko3/
Jak vidíte, horní banner, oblast mezi menu a fotkou, je elastická.
Jak tohle udělám netuším, snad někdo poradí.
habendorf
Profil
Necháš střed opakovat na pozadí a něco floatneš doleva, něco doprava. Žádný problém.
MilanJ
Profil
Ale jak zařídím, aby se ta elastická část, kterou tvoří obrázek určité výšky se šířkou 1px roztáhla na požadovanou úroveň a pak se elasticky zmenšovala?
tiso
Profil
Necháš ten obrázok opakovať:

background: White url(obr.gif) 0 0 repeat-x;
MilanJ
Profil
Horní banner tvoří DIV a uvnitř by měl být 3 obrázky tvořící banner...levý, střední elastický a pravý.
Mám přímo vkládat obrázky a těm nastavit float na left/right nebo je obalit do DIVu a tomu nastavit float?
MilanJ
Profil
tiso
Šířka toho obrázku by měla být nastavena na určitou šířku a měnila by se podle velikosti okna až na minimální šířku 1px.
MilanJ
Profil
Jak ale zajistím, aby se při změnšování stránky nezalamovali obrázky z banneru pod sebe?
habendorf
Profil
Šířka toho obrázku by měla být nastavena na určitou šířku a měnila by se podle velikosti okna až na minimální šířku 1px.
Ne, tak se to nedělá. Oba se ti snažíme říct, že se to dělá opakováním.

Jak ale zajistím, aby se při změnšování stránky nezalamovali obrázky z banneru pod sebe?
No stejně asi budeš mít pro celou stránku nastavenou nějakou minimální šířku, ne?
MilanJ
Profil
habendorf
Celý problém bude asi v tom, že si nerozumíme.
Horní banner obaluje DIV, který je roztažený na celou šířku stránky, resp. šířku nadřazeného DIVu.
Můj banner tvoří 3 části: první a třetí jsou obrázky s fixní šířkou, uprostřed je obrázek s šířkou 1px, který by se měl roztahovat a smrskávat podle toho, jak velké rozlišení nebo velikost okna uživatel má.
Minimální šířka banneru je samozřejmě tvořena součtem šířek 1+3 banneru + 1px prostředního obrázku.

Problém je v tom, že se mi ten prostřední obrázek neroztáhne tak, aby "vytlačil" pravý oprázek až ke kraji.
MilanJ
Profil
Když nastavím float pravého obrázku, což bude asi ten problém, obrázek se zobrazí až v pravo jak má, ale vedle textu, takže ho zmenší na minimum.
habendorf
Profil
MilanJ: Ale rozumíme si velmi dobře, jen ty prostě nechceš slyšet. Tohle je běžná záležitost, dělá se to často. Já se ti ale už potřetí (a fakt naposled) snažím říct, že prostřední obrázek SE NEROZTAHUJE, ALE OPAKUJE na pozadí. Navíc střední obrázek ten pravý nikam nevytlačuje, pravý obrázek je floatován doprava jak jsem ti psal v úplně prvním příspěvku.

Schematicky:

<div background:ten-maly-obrazek.gif repeat-x>
<img float:left>
<img float:right>
cleaner
</div>

V reálu by to asi mělo být klikací, nějaký ten replacement atd., ale tohle je kostra.
Co na tom pořád nechápeš?

Chceš-li poradit, musíš si nechat poradit a ne pořád omílat jeden nesmysk dokolečka :o)
MilanJ
Profil
No jooo....už chápu! :-) Jsem maličko natvrdlej, moc díky.;-)
habendorf
Profil
ok, fajn, hlavně že to šlape :o)
MilanJ
Profil
habendorf
O to mi šlo.:-) Já nechápal, že opakující se prvek musí být nastaven jako pozadí obalujícího DIVu.

Teď řeším jak zajistit, aby se levý i pravý sloupec protáhli až dolů k patičce, protože budou mít barevné pozadí a bylo by mnohem pěknější, kdyby spojovali hlavičku s patičkou stránky.
habendorf
Profil
Už si asi budeš myslet, že si z tebe dělám srandu, ale je to úplně stejné. Opět opakování malého obrázku na nadřazeném prvku, jen tentokrát v ose y.
MilanJ
Profil
habendorf
Myslím, že tentokrát mi nerozumíš Ty.:-) Obsah má proměnlivou délku, tudíž délka stránky bude vždy jiná.
Pravý a levý sloupec mají ovšem obsah stále stejný a já teď řeším jak zajistit, aby se délka pravého i levého sloupce vždy rovnala délce prostředního sloupce s obsahem.

Napadá mě jediné řešení...JavaScriptem zjistit délku prostředního sloupce a pak nastavit délku levého a pravého sloupce na stejnou hodnotu.
Tohle ale není moc elegantní řešení, navíc při vypnutém JS vzniká problém.
habendorf
Profil
Ale ne, opět mi nerozumíš ty :o) Je to jak jsem řekl.

Řekněme že levý i pravý sloupec mají 200px, levý je červený, pravý zelený. Střed je třeba bílý 500px.
No tak si vyrobíš 1px vysoký proužek široký 900px, který bude mít 200px červených, pak 500px bílých a nakonec 200px zelených. No a tenhle proužek necháš opakovat na pozadí obalujícího divu.

To je princip. Skutečnost je taková, že ty máš gumový layout, proto budeš potřebovat obrázky dva a jeden obalující div navíc. Na jednom obalu necháš opakovat jeden obrázek vlevo, na druhém obalu vpravo. Obrázky ale budeš mít jen dvoubarevné.

Takže jak říkám, je to zase jen repeat na backgroundu :o)
MilanJ
Profil
habendorf
Člověk se pořád učí. Teď už kupodivu rozumím.:-)
Toto téma je uzamčeno. Odpověď nelze zaslat.

0