Atsakymas parašytas: 2010-06-24 12:00:32
[#966]
Ilgalaikė nuoroda į atsakymą #1
Sveikas,
gerai, jog susiprotėjai parašyti į forumus, kadangi iš to gali pasimokyti ir kiti. Jeigu aš tau būčiau atsakęs į tavo asmeninę žinutę, tai būtų nauda tik tavo atžvilgiu. Nereikia bijoti prašyti pagalbos ir klausti mūsų diskusijų forumuose — juk niekas per galvą neduos.
Taigi grįžtant prie temos. Pirminė mano pastaba: nesilaikai kodo rašymo kultūros. Pavyzdžiui, pirmojo dizaino index.html faile radau tokį kodą.
<div id="paveikslelis_fonas">
<div id="paveikslelis">
<div id="papildoma_navigacija">
</div>
</div>
</div>
Esmė tame, kad tu netinkamai sudėlioji tarpus tarp žymių ir todėl kodas tampa sunkiau „skaitomas“, t.y. sunkiau susigaudyti, kur prasideda ir baigiasi tam tikros žymės. Pateikiu pavyzdį, kaip turėtų atrodyti kodas.
<div id="paveikslelis_fonas">
<div id="paveikslelis">
<div id="papildoma_navigacija">
</div> <!-- #papildoma_navigacija pabaiga -->
</div> <!-- #paveikslelis pabaiga -->
</div> <!-- #paveikslelis_fonas pabaiga -->
HTML komentarai nebūtini, tačiau kartais pravartu juos įterpti, jeigu didelis HTML failas. Žinoma, nuo to, kaip atitrauksi žymes, vaizdas naršyklėje nepasikeis, tačiau pamatysi, jog sistemingai rašydamas kodą išvengsi įvairių žioplų klaidų bei galėsi greitai surasti tai, ko tau reikia.
Tiesa, index.html faile neradau jokių klaidų, tad belieka problemų ieškoti CSS faile. Pastebėjau tokį CSS kodą:
#papildoma_navigacija { width: 50%; height: 100px; background: #999; margin: 0 0 0 99.5%; }
kaip matau, atitraukimą nuo dešinės pusės nurodei nefiksuotais vienetais (procentais). Tačiau galima viską padaryti paprasčiau. Vietoj margin savybės įterpkime
float. Tokiu atveju taip pat reikia
float savybę priskirti ir kitam elementui. Be to, priskyrus float reikšmes, jas vėliau reikia ir panaikinti, tad dar papildomai pridedu .clear klasę.
#paveikslelis { background-image:url(images/img02.jpg); width: 67%; height: 377px; float: left; }
#papildoma_navigacija { width: 50%; height: 100px; background: #999; float: right; }
.clear { clear: both; }
Tada atitinkamai reikia pakeisti HTML struktūrą pagal CSS kodą.
<div id="paveikslelis_fonas">
<div id="paveikslelis">
</div>
<div id="papildoma_navigacija">
</div>
<div class="clear"></div>
</div>
Jeigu nelabai supranti, kaip veikia
float savybė, siūlau peržiūrėti vaizdo pamoką apie dizaino kūrimą — ten trumpai paaiškinau apie tai. Be to, pasinaudok mūsų tinklalapio paieška, kadangi, jeigu neklystu, jau ne pirmą kartą rašiau apie
float.
Beje, redaguok mano duotą CSS kodą pagal savo poreikius (keisk
width ir pan.). Ir dar noriu atkreipti dėmes į tai, kad tu viską nurodai procentais, kas nėra būtina. Kitaip sakant, geriau naudok fiskuotus matavimo vienetus (pikselius px), kadangi taip bus mažiau painiavos.
Antrojo dizaino nebenagrinėjau, nes neturiu daug laiko. Na, galbūt kiek padėjau. Sėkmės.