Diskusijų forumai
Diskusijų forumai     Kompiuterinė grafika, dizainas     Tinklalapių dizainas     Paziurekit ir patarkit



Paziurekit ir patarkit

Frozen1030
Bendruomenės narys

 
Sveiki,
  Pries 3 dienas pradejau mokintis koduoti, per ta laika pabandziau sokoduoti kelis dizainus (jie pilnai nesukoduoti). Ir noreciau paprasyti kad juos paziuretumete ir pasakytumete, ka as blogai dariau. Nepykit kad panaudojau jusu ta header'i. Neturejau kito header'io, kuri galetau panaudoti.

Nuoroda iki failo
 


Atsakymai į temą

Edmundas
Tinklalapio šeimininkas

 
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. wink

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. wink