Pereiti prie turinio

CSS ir JavaScript naudojimas

Myla

Sukūrė Myla
Programuotojų kampas

 Dalintis Sekėjai 0

Rekomenduojami pranešimai

Myla

Myla 10

Sukurta
Sukurta (redaguota)

Padariau su photoshopu sukarpyta svetainę.

 

Pagrinde ji susidaro iš paveiksliukų, stilizuotų buttonų ir banerių. Yra tik viena vieta (Texts Area), kur bus koduose papildomas tekstas. Man ją reikia sudėlioti taip (prisegu paveiksliuką).

 

post-8620-1199430590_thumb.jpg

 

Tačiau nemoku dirbti su CSS DIV elementais. Gal galite parašyti kodą šiam eskizui?

Labai labai būčiau dėkinga už profesionalią pagalbą. :blink:

Redagavo Myla
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta

Aišku tokiam dalykui padaryt su CSS yra begalės variantų, tačiau mano siūlomas variantas atrodytų maždaug taip:

<div id="centras">
 <div id="header">
<div id="logo"></div>
<div id="banner"></div>
 </div>
 <div id="turinys">
<div id="kaire">
  <div id="meniu1"></div>
  <div id="meniu2"></div>
  <div id="meniu3"></div>
		   ....
  <div id="img"></div>
</div>
<div id="desine">
  <div id="texts-area"></div>
</div>
 </div>
</div>

Visi div'ai, išskyrus "centras", turėtų turėti float: left; atributą (ar kaip čia lietuviškai). :blink:

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Myla

Myla 10

Atrašyta
  • Autorius
Atrašyta

Na pagaliau kaip ir pradėjau viską dėlioti. Tačiau yra kitas klausimas. Sudėliojus kode Meniu1, Meniu2, Meniu3 paveiksliukus juos deda ne vieną po kitu (į apačią), o vieną paskui kitą (rikiuojant į dešinę). Gal ką css ar html kode reikia įterpt kad gautųsi savotiškas "enter"?

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta

Na pagaliau kaip ir pradėjau viską dėlioti. Tačiau yra kitas klausimas. Sudėliojus kode Meniu1, Meniu2, Meniu3 paveiksliukus juos deda ne vieną po kitu (į apačią), o vieną paskui kitą (rikiuojant į dešinę). Gal ką css ar html kode reikia įterpt kad gautųsi savotiškas "enter"?

Daryk juos tokio plocio, kokio yra sonine skiltis.

O jei jie ten labiau tekstiniai ir nevienodo plocio, tai tada gali daryti juos geriau su <ul> ir <li>. Patogiau kartais. :(

 

O enter HTML'e siaip yra <br />. Taciau ne visada jis veikia.

Jei visus elementus float'ini, tai vietoj enter gali toki pabandyti iterpti: :D

<div style="clear: both; height:0;"></div>

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Myla

Myla 10

Atrašyta
  • Autorius
Atrašyta

Valio, kai paminėjai, supratau kame bėda. Paveiksliukų pločius sudėliojau, o šoninės skilties pločio nenurodžiau, dėl to naršyklė ir užskaitė paveikslėlius dėliot per visa ekrana :D

 

Ufff neblogai kaip per šiandien prasimokyt CSS. Sakyčiau kaip vienai dienai, tai jau čia pasiekimas. Einu ilsėtis, rytoj tęsiu darbą ir vėl tave savo klausimais kankinsiu :( (nepyk)

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta

Tiesa, gal žinai, kodėl į <div> ... </div> įdėjus tvarkingo javascripto, kad pasikeistų (rollover on mouse on/off) meniu paveiksliukas pvz neveikia. Realiai viska rodo, bet nepasikeitinėje. Gal div'uose nesideda javascriptas, kad judėtų paveiksliukai? :(

Tai parodyk koda (gali ne visa, tik divo ir javascript'o), tada pasakysim, kodel jis neveikia. :D

Daznai JavaScript'as dedamas i <head>, bet turi veikti ir div'uose.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
ziogas

ziogas 5

Atrašyta
Atrašyta (redaguota)

O enter HTML'e siaip yra <br />. Taciau ne visada jis veikia.

Jei visus elementus float'ini, tai vietoj enter gali toki pabandyti iterpti: :D

<div style="clear: both; height:0;"></div>

 

 

Vat šitą dalyką jau seniau iš taves išmokau ir labai sėkmingai naudoju :D tik paprasšiau aišku klasę pasirašyti

 

 

Tiesa, gal žinai, kodėl į <div> ... </div> įdėjus tvarkingo javascripto, kad pasikeistų (rollover on mouse on/off) meniu paveiksliukas pvz neveikia. Realiai viska rodo, bet nepasikeitinėje. Gal div'uose nesideda javascriptas, kad judėtų paveiksliukai? :(

 

<style type="text/css">
.bla{
background-image: url('kazkas.jpg');
}
.bla:hover{
background-image: url('kazkas2.jpg');
}
</style>

<div class="bla">kazkas</div>

 

 

Atitikmuo js, tik neveikia su IE6

Redagavo ziogas
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Myla

Myla 10

Atrašyta
  • Autorius
Atrašyta

Va tas kodas, kuris man neveikia... Ai beje, naudoju naujausią Mozilla Firefox versiją peržiūrai ne IE, tai gal dėl to neveikia. O gal dėl to, kad dar nesudėjau nieko į hostingo servą, kol pilnai nepadariau nieko. Tai kolkas linkai eina i folderius kompe mano. Bet ar tai turi esmės kuri nors iš šių priežasčių? :( Gal ką atrasit klaidingo... klaidos moko

 

 

HEAD DALIS:

 

<script language="JavaScript" type="Text/Javascript">

<script language="Javascript">

<!--

if (document.images) {

button1 = new Image

button2 = new Image

 

button1.src = 'images/1meniu.jpg'

button2.src = 'images/1meniufire.jpg'

}

//-->

</script>

 

 

BODY DALIS (vieta, kur turėtų kaitaliotis meniu paveiksliukai. Čia kolkas bandau su vienu iš meniu buttonų kad iš vienokio jpg pasikeistų į kitokį, identiško dydžio):

 

<div id="turinys">

<div id="meniu1"><a href="" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="images/1meniu.jpg" border=0 name="rollover"></a></div>

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Myla

Myla 10

Atrašyta
  • Autorius
Atrašyta

jei jau su css dirbi tai kam javascript tokiem dalykam naudoji?

 

Tam, kad css mano manymu tik gražiai sudėlioja grafiką, bet "judesio" nepadaro (flasho nemoku dar)

 

O taip ne paprasčiau?

 

<img src="images/1meniu.jpg" onmouseover="this.src='images/1meniufire.jpg';" onmouseout="this.src='images/1meniu.jpg';" />

 

Wow tu genijus!!!!!!! :( :D

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Myla

Myla 10

Atrašyta
  • Autorius
Atrašyta (redaguota)

Nupaišiau esamos svetainės eskizą su matmenimis:

 

post-8620-1199570997_thumb.jpg

 

Man reikia kad patikrintumėte mano parašytą index.html failo BODY dalį, kadangi sritis "Tekstas" (padaryta per formą "CSS container) kažkodėl atsiduria po "Paveiksliukas.jpg". Manau, kad čia per daug arba trūksta kažkur įterpti <DIV> ... </DIV>

 

BODY KODAS:

 

<body>

 

<div id="centras">

<div id="antraste">

<div id="uzrasas"><img src="images/uzrasas.jpg" alt="uzrasas" /></div>

</div>

<div id="turinys">

<div id="kaire">

<div id="meniu1"><img src="images/1meniu.jpg" onmouseover="this.src='images/1meniufire.jpg';" onmouseout="this.src='images/1meniu.jpg';" /><img src="images/1meniu.jpg" alt="1meniu" /></div>

<div id="meniu2"><img src="images/2meniu.jpg" onmouseover="this.src='images/2meniufire.jpg';" onmouseout="this.src='images/2meniu.jpg';" /><img src="images/2meniu.jpg" alt="2meniu" /></div>

<div id="meniu3"><img src="images/3meniu.jpg" onmouseover="this.src='images/3meniufire.jpg';" onmouseout="this.src='images/3meniu.jpg';" /><img src="images/3meniu.jpg" alt="3meniu" /></div>

<div id="meniu4"><img src="images/4meniu.jpg" onmouseover="this.src='images/4meniufire.jpg';" onmouseout="this.src='images/4meniu.jpg';" /><img src="images/4meniu.jpg" alt="4meniu" /></div>

<div id="meniu5"><img src="images/5meniu.jpg" onmouseover="this.src='images/5meniufire.jpg';" onmouseout="this.src='images/5meniu.jpg';" /><img src="images/5meniu.jpg" alt="5meniu" /></div>

<div id="meniu6"><img src="images/6meniu.jpg" onmouseover="this.src='images/6meniufire.jpg';" onmouseout="this.src='images/6meniu.jpg';" /><img src="images/6meniu.jpg" alt="6meniu" /></div>

<div id="paveiksliukas"><img src="images/paveiksliukas.jpg" alt="paveiksliukas" /></div>

</div>

<div id="desine">

<div class="curlycontainer">

<div class="innerdiv">

<b>Some title</b> <br />

Some text here.Some text here.<br />

Some text here.Some text here.<br />

Some text here.Some text here.<br />

Some text here.Some text here.

</div>

</div>

</div>

</body>

Redagavo Myla
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Rimas

Rimas 1.146

Atrašyta
Atrašyta

Apačioje trūksta dviejų uždaromųjų div'o žymių, uždarančių "centras" ir "turinys", nes jie dabar neuždaryti.

Tačiau problema turbūt ne čia, nes naršyklės dažniausiai tokias žymas uždaro automatiškai.

Problema tikriausiai CSS kode. Spėju, kad "kaire" ir "desine" nesutelpa į "turinys", tad "desine" keliama į "naują eilutę" - po paveikslėliu.

Pasitikrink CSS kodą ar tikrai viskas visur telpa. Nustatyk paraštes net ir tiems objektams, kurie jų neturi (padding: 0px; margin: 0px;). Jei taip nepavyks išspręsti problemos, tai dėk čia visą tinklapį, kartu su CSS kodu. Žiūrėsim kas negerai jame. :rolleyes:

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Myla

Myla 10

Atrašyta
  • Autorius
Atrašyta

Čia vėl aš :D Truputuką turiu problemų su nuorodų darymu. Turiu kodą, kuris bendrai yra css ir javascript mišinys. Man reikia ant kiekvieno meniu1, meniu2 ir t.t. sudėti linkus be rėmelių. Kaip suprantu tai paprastai darytųsi taip <a href="" border="0">...</a>, bet čia šitam kode neveikia, o jei uždedu, tai gaunasi rėmelis, kuris su border="0" nepasinaikina. Taigi kas nors iš čia esančių, žino kaip tai padaryti? Gal yra kita komanda padaryt linkus šiems css ir javascript mišiniams?

 

KODAS:

 

<div id="leftside">

 

<div id="meniu1"><img src="images/1meniu.jpg" onmouseover="this.src='images/1meniufire.jpg';" onmouseout="this.src='images/1meniu.jpg';" /><img src="images/1meniu.jpg" alt="1meniu" /></div>

 

<div id="meniu2"><img src="images/2meniu.jpg" onmouseover="this.src='images/2meniufire.jpg';" onmouseout="this.src='images/2meniu.jpg';" /><img src="images/2meniu.jpg" alt="2meniu" /></div>

 

<div id="meniu3"><img src="images/3meniu.jpg" onmouseover="this.src='images/3meniufire.jpg';"

onmouseout="this.src='images/3meniu.jpg';" /><img src="images/3meniu.jpg" alt="3meniu" /></div>

 

<div id="meniu4"><img src="images/4meniu.jpg" onmouseover="this.src='images/4meniufire.jpg';"

onmouseout="this.src='images/4meniu.jpg';" /><img src="images/4meniu.jpg" alt="4meniu" /></div>

 

<div id="meniu5"><img src="images/5meniu.jpg" onmouseover="this.src='images/5meniufire.jpg';"

onmouseout="this.src='images/5meniu.jpg';" /><img src="images/5meniu.jpg" alt="5meniu" /></div>

 

<div id="meniu6"><img src="images/6meniu.jpg" onmouseover="this.src='images/6meniufire.jpg';"

onmouseout="this.src='images/6meniu.jpg';" /><img src="images/6meniu.jpg" alt="6meniu" /></div>

</div>

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 0
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...