CSS smukai maliņai

Jānis Rubļevskis (koko) // 2005. gada 5. oktobrī, 21:12 // #Datori // 4 komentāri 

Agrāk biju domājis (un daudzi arī stāstīja), ka nevar dabūt smuku maliņu, kas pati stieptos uz leju, ja neizmanto table tagu... Man ie iepatikušies div bloki, tāpēc nedaudz padomāju un izdomāju struktūru, kuru izmantojot, var panākt manas vēlmes...

Tātad - ideja ir vienkārša - jāpanāk, lai attēls atkārtotos gan vienā pusē lapai, gan arī otrā pusē lapai, kā arī tam visam jābūt pārlūka centrā.

Es izdomāju struktūru, kas sastāv no 3 div blokiem. Tālāk var bīdīt iekšā dajebko..

Tātad pamatā ņemam vienu div, kas stāvēs pa vidu un mēs jamo neaiztiksim vairāk (pat nestiepsim). Galvenais, lai jams saturu noliek pa vidu!

#outer {

margin: 0 auto;

width: 800px;

}

Nākamais bloks atbild par to, lai kreisajā lapas pusē būtu smuka maliņa (var taisīt arī labajā, tad css fails mainīsies):
#outer_l {

float: left;

background: url('t1.png') repeat-y left top;

margin: 0 auto;

width: 800px;

}

Pēdējais bloks atbild par kreiso malu un arī visas lapas kontentu, tāpēc liekam padding-right:[malinjas platums]px
#outer_r {

float: right;

background: url('t2.png') repeat-y right top;

padding-right: 20px;

width: 760px;

}

Nākamais solis ir uzrakstīt html kodu tā, lai bloki atrastos viens otrā:
<div id="outer">

<div id="outer_l">

<div id="outer_r">

</div>

</div>

</div>

Domāju, ka liela daļa jau to paši saprat, bet, ja nu palīdzēja, esmu par to priecīgs...

Paraugu meklējiet https://nobody.lv/uploads/soft/malas.htm

Komentāri

šito metodi jau esmu redzējis/pielietojis daudzās lapās, citur izmanto vienu veselu bildi ko iesper ieksh galvenā div'a vai pat iekš body.

es drošvien darītu savādāk. izmantotu vienu bildi.

#container

{

width: 770px;

background: url('t.png') repeat-y left top;

margin: auto;

}

#text

{

margin: 0 20px 0 20px;

}

laikam jau neko nesaprotamu neuzrakstīju.

+ vēl izvairīsies no IE float 3px kļūdas.

Nu būtībā tas atkarīgs no dizaina... Manam dizainam ar manu variantu ir ok :)

Paud savu subjektīvo viedokli:

Visi lauki (izņemot interneta vietni) aizpildāmi obligāti!
E-pasts publiski netiks parādīts.
Zinot vairākumu, komentāros tagi netiek atrādīti kā tagi. Linki automātiski pārveidosies par spiežamiem (cerams).
Bloga īpašnieks patur tiesības ļaunus komentārus dzēst vai pārveidot cilvēkiem patīkamākā formā, bet tajā pašā laikā neatbild par komentāru saturu.