sveiki, butu toks klausimas, svetaines backgruonde noriu naudoti paveiksleli, panasu i toki http://www.ipix.lt/desc/58447720/ , ar imanoma taip panaudot toki paveiksleli, kad rasant svetaines teksta jo viduryje jis temptusi kartu su tekstu, kad neperliptu per remeli, kad nebutu taip http://www.ipix.lt/desc/42810011/ , ar imanoma taip padaryt? ir kaip? dekui uz pagalba, tikiuosi supratot klausima.

Sveikas,

taip, tai įmanoma, tačiau reikia žinoti, kaip tinkamai viską padaryti. Pateiksiu pavyzdį.



Kaip matai iš paveikslėlio, bloką suskaidžiau į 3 dalis: viršų, vidurį ir apačią. Mėlynosios ir geltonosios zonos fonas nesikartos jokia ašimi, nes mums to nereikia. Mūsų tikslas — padaryti taip, jog vidurinė zona (pažymėta pilkai) plėstųsi vertikaliai proporcingai teksto užimančiai vietai. Taigi pirmiausia pateiksiu HTML struktūrą, o vėliau CSS aprašus.

<div class="blokas">

	<div class="bloko-virsus"></div>
	
	<div class="bloko-turinys">
	
		<p>Pirmoji pastraipa: bloko turinio tekstas.</p>
		
		<p>Antroji pastraipa: dar daugiau turinio teksto.</p>
	
	</div>
	
	<div class="bloko-apacia"></div>

</div>

Iš HTML struktūros puikiai matosi, kad blokas suskaidytas į 3 dalis, apie kurias rašiau anksčiau. Į bloko dalis bloko-virsus ir bloko-apacia nieko nededame, nes šie elementai skirti tik fono paveikslėliams atvaizduoti. Tekstą dedame į jam skirtą dalį — bloko-turinys. Dabar pereikime prie CSS.

.blokas { width: 600px; }

.blokas .bloko-virsus 
{ 
	width: 600px; 
	height: 115px; 
	background-image: url(images/bloko-virsus.png); 
	background-repeat: no-repeat; 
}

.blokas .bloko-turinys
{
	width: 500px;
	height: auto;
	padding: 15px 50px;
	background-image: url(images/bloko-turinys.png);
	background-repeat: repeat-y;
}

.blokas .bloko-apacia
{
	width: 600px;
	height: 115px;
	background-image: url(images/bloko-apacia.png);
	background-repeat: no-repeat;
}

Sakykime, kad bloko plotis yra 600 taškų (angl. „pixels“). Taip pat „iš akies“ parašiau ir elementų aukštį. CSS aprašai yra labai paprasti, tačiau būtina atkreipti dėmesį į keletą dalykų.

Pirmiausia, pastebėsi, jog identifikatoriaus (klasės) .bloko-turinys plotis yra ne 600px, o 500px. Argi mes „nesusitarėme“, jog bloko plotis yra 600px? Būtent! Tačiau nepamirškime dar vienos CSS savybės padding, kurios reikšmės prisideda prie galutinių elemento matmenų. Taigi paskaičiuokime, ar galutiniai matmenys yra tokie, kokių mums reikia.

500px (width) + 50px (padding-left) + 50px (padding-right) = 600px. Šaunu, judame pirmyn!

Antra, identifikatoriams (klasėms) .bloko-virsus ir .bloko-apacia nurodėme background-repeat savybės reikšmę no-repeat, o klasei .bloko-turinys — repeat-y. Kadangi jau anksčiau rašiau, kad mums tereikės kartoti turinio srities paveiksliuką (vertikalia ašimi, t.y. y-iko ašimi), tik klasei .bloko-turinys ir priskyrėme reikšmę repeat-y.

Taigi koks rezultatas turėtų gautis? Trumpai tariant, turinio sritis .bloko-turinys turėtų ilgėti į aukštį atitinkamai pagal tai, kiek teksto įdėta toje dalyje, o apatinė sritis .bloko-apacia turėtų leistis (slinktis) į apačią. Žemiau pateikiu dar vieną pavyzdinį paveiksliuką, kuriame parodyta, kaip atrodytų išsitempusi turinio dalis (skaičiukai reiškia, kiek kartų kartojamas fono paveiksliukas).



Nepamiršk, kad neatsižvelgiau į patį tavo paveiksliuke parodytą rudą foną-tekstūrą. Aš norėjau tik parodyti patį principą. Sėkmės.

dėkui už išsamų atsakymą, turinys kartojasi, viskas tvarkoj. Būtų dar vienas klausimas, rašant tekstą bloko_virsuje, tekstas pasiekęs bloko_turini neperšoka į bloko_turini, o tik kartojasi bloko_turinys, stumiasi žemyn, kame problema? rašant tekstą bloko_turini tekstas keliasi ir bloko_turinys kartojasi, su tuo viskas tvarkoj.

Nežinau ar gerai supratau tavo klausimą, bet ,kai tekstas, esantis bloko-viršuje pereina jo apačią, po tekstu nebelieka paveiksliuko, o tik tuscias laukas?  Jei klausimas buvo toks, tai ši problema atsiranda dėl to, nes .bloko-virsus paveiksliukas yra nustatytas, kad nesikartotų (to mum ir nereikia, nes kartotųsi netinkama dalis):

.blokas .bloko-virsus 
{ 
...
   background-repeat: no-repeat;
...
} 

Tačiau, šios problemos lengvai neišspręsi, nes bloko-viršuje esantis tekstas nemoka pratęsti bloko-turinio. Taip yra dėl paprastos priežasties. Pvz.:

<div class="bloko-virsus">

   <div class="tekstas"></div>

</div>

<div class="bloko-turinys"></div>

<div class="tekstas">

yra "įkalintas"

<div class="bloko-virsus">...</div>

ir besitempdamas į apačią, moka tempti tik jį apjuosiančius blokus. Taigi, šią problemą būtų galima išspręsti bent pora būdų, tačiau vienas lengviausių (bent mano manymu):

Teksto išvis nerašyti į .bloko-virsus arba tik tai, kas tikrai neišeis už jo ribų. Tai, kas gali išeiti, rašyti į .bloko-turinys panaudojus vieną paprastą nustatymą: margin-top: -{skaičius}px; Pvz.:

<div class="bloko-virsus">

   <p class="tekstas"></p>

</div>

<div class="bloko-turinys">

   <p class="tekstasDu" style="margin-top:-20px;"></p>

</div>

.bloko-virsus ir .bloko-turinys nustatymus paimkime iš Adijux pavyzdžio.

Taigi, kas čia vyksta. .tekstas pastraipa niekada neišeis iš .bloko-virsus (priimkime tokį sprendimą), tad jį galima rašyti į .bloko-virsus .Tačiau, mes norime, kad į .bloko-virsus būtų galima įrašyti daugiau teksto, kuris nusitęstų į .bloko-turinys, tam naudojame .tekstasDu pastraipą. Jos padėti nuo .bloko-turinys viršaus nustačius į neigiamą (margin-top: -10px; ), mes priverčiame šią pastraipą išeiti iš .bloko-turinys ribų per 10px į viršų. Šiuo būdu, .tekstasDu pastraipa yra .bloko-turinys dalis ir ji gali jį tempti į apačią.



Tikiuosi šis problemos sprendimas padės. Jei ko nesupratai klausk, paaiškinsiu tiksliau.

Pridejau:
Antras būdas:

Pirmiausia apžvelkime koks tai bus tinklapis ir apie jo savybes.



Sakykime, tai puslapis skirtas vienam ilgam straipsniui. Trumpai apie savybes:
1. puslapio fonas - rašymo sąsiuvinio tipo juostelės. Daugėjant tekstui turi temptis (atsikartoti) ir puslapio fonas.
2. Viršuje kairėje esantis paveiksliukas visad išlieka toje pačioje vietoje ir jis veikia kaip fono sudėtine dalis.
3. Apačioje dešinėja esantis paveiksliukas toje pačioje vietoje ir jis veikia kaip fono sudėtine dalis.

Pažvelkime į šio puslapio html kodą:

<div id="turinioFonas">

	<div class="turinioFonas-apacia">
    
    		<div class="turinioFonas-virsus">
        
        		<div class="turinys">
            
            			<h1>Lorem ipsum</h1>
                		<p>...</p>
            
           		 </div>
        
        	</div>
    
    </div>

</div>

Dabar pažiūrėkime į kiekvieno elemento reikšmę ir .css nustatymus:

<div id="turinioFonas">...</div>

#turinioFonas {
background:url("juosteles.png") repeat-y;
width:360px;
}

Šiame elemente yra nustatomi puslapio išmatavimai ir pagrindinis fonas (šiuo atveju juosteles).

<div class="turinioFonas-apacia">

.turinioFonas-apacia {
background:url("apaciosFonas.png") no-repeat right bottom;
}

Šiame elemente talpinamas apačioje esantis paveiksliukas - bendro fono dalis. Jo vietą nustatome su prierašu: "right bottom".

<div class="turinioFonas-virsus">

.turinioFonas-virsus {
background:url("virsausFonas.png") no-repeat left top;
}

Šiame elemente talpinamas viršuje esantis paveiksliukas - bendro fono dalis. Jo vietą nustatome su prierašu: "left top".

<div class="turinys">

#turinys{
float:left;
padding:25px 10px 20px 10px;
width:340px;
}

Šiame elemente talpinamas visas tekstas (antraštes, pastraipos, paveiksliukai ir pan.). Jo padėtis nustatoma naudojantis "padding" komanda. (25px 10px 20px 10px atitinkamai: viršus dešinė apačia kairė). Šiam elementui galimybę 'ištempti' kitus elementus suteikia prierašas: "float:left;".

Šis puslapio išdėstymas grafiškai atrodytų:


Tikiuosi pravertė.

P.s. ši idėja paimta iš webdesignerwall.com
Jei norite tiksliau pažiūrėti į kodą, peržiūrėkite šios svetainės kodą.