WordPress, Shopify ir PHPFusion programuotojų bendruomenė

Temos pavadinimas: WordPress, Shopify ir PHPFusion programuotojų bendruomenė :: Dėl PSD to HTML&CSS

Parašė SonyNokia· 2014 Kov. 6 00:03:48

Sveiki visi!

Taigi ir Aš čia. Truputi pailsėjęs nuo PHP kalbos, Aš nusprendžiau sugrįžti prie HTML&CSS kalbų, jas truputi patobulinti. ;)

Norėčiau paklausti Jūsų, kaip geriau ir patogiau daryti ir daro tikri programatuojai su CSS kalba, kai jie koduoja iš psd į html ir css kalbas. Jie kuria atskirai failą css kalbai, ar rašo į index.html?

Kaip ir visada žinoma norėsiu tęsti klausimus į vieną savo temą.

Parašė Pakartoti slaptažodį· 2014 Kov. 6 00:03:49

sveikas ir vėl ;) na, kaip įprasta iš pradžių nusipaišai dizainą per photoshopą, kaip viskas turi atrodyt, detalės, išdėstymas ir panašiai. na o tada pradedi karpyti. koduoti nėra teisingas žodis

pagal visas taisykles yra atskiras css failas, ir tuomet seka html failai. aišku galima iš pradžių ir nenaudoti css failų kad būtų greičiau, tiesiai viską rašyti į vieną failą, na o paskui išskaidyti.

čia lankstesnis dalykas, labiau nuo stiliaus priklauso

Parašė SonyNokia· 2014 Kov. 6 00:03:35

Šiuo atvėju užsimti Photoshop'u tai nenorėčiau. Tiesiog norėčiau iš interneto parsisiųsti kokį geresnį , bet ne gera nupiešta dizainą, ir bandyti karpyti. Esu jau tai bandęs, ir visai gerai sekėsi, tik keleta neatitikimų buvo, todėl, nes nežinojau kaip tą atlikti . Galbūt netyčia žinai kur galėčiau rasti psd failų, kur būtų ten su naujienos forumas ir kitais dalykais? Na tiesiog norėčiau tokius labiau koduoti.. Bandžiau ieškoti Aš pats, bet.. randu visiokių, bet , kad ten būtų normalesnis koks, tai nelabai ir sekasi rasti..

Papildau: Na, o dėl css failo atskirai ar ne, nusprendžiau, kad kolkas pabandysiu daryti į vieną, o vėliau kai būsiu +/- atlikes darbą, bandysiu viską iškelti į atskirą css failą.

Redagavo SonyNokia· 2014 Kov. 6 00:03:05

Parašė Pakartoti slaptažodį· 2014 Kov. 6 01:03:37

į visokius temų saitus bandyk keliaut, ir lietuviškų nemažai yra, ten tikrai rasi begales psd ruošinių, ir paprastai gana profesionaliai nupieštų.

taip, css tikrai ne problema, gali kaip tik nori laviruot. kad nenaudok atskiro failo, gali dirbti index.html'e. tiesiog tarp <head> ir </head> rašyk visus stilius:
<style>
...
</style>

na arba prie pačio elemento. tarkim bus kažkoks mygtukas, tai jį apipavidalinsim taip: <input type="button" style="..." />

Parašė SonyNokia· 2014 Kov. 6 01:03:54

Bet vis dėl to nusprendžiau iškarto daryti į atskirą style.css failą, manau užims ilgiau laiko, bet manau darysiu kaip visi stengiasi daryti. Pastebėjau, kad dažnai nuomonės keičiasi kaip darysiu, supratau, kad esu nepastovus žmogus. Na, o dėl psd failų, ieškau jų, buvau keleta atsisiuntęs, bet background gif/png/jpg jie tokie juodi sulieti, nu tokie labai jau keisti.. Tai dar vis ieškau kuris bent būtų padorus , ir be tokių juodų dėmių, galbūt čia specialiai taip padaryta, todėl , jog tai nemokamas psd. Na , bet čia toks spėjimas tik.

O dar norėjau paklausti kaip ten dėl tų karpinių formato? Tinka tik gif, ar tinka viskas pvz: jpg, png, gif, ir kt formatai ?

Papildau: Ir dar norėjau paklausti pvz dėl logotipo: Jį reikia kopijuoti iškarto su headeriu ar kaip tas viršus vadinasi, ar atskirai? Kad galėčiau paspaudus ant to logotipu suveiktų taip pat kaip čia paspaudi ant phpfusion Lietuva, ir įmeta į index.php?

Redagavo SonyNokia· 2014 Kov. 6 01:03:23

Parašė Pakartoti slaptažodį· 2014 Kov. 6 01:03:31

ak, pažįstamas jausmas tas nepastovumas, patikėk, high five ;D nors ir gerai bus, geriau lėčiau, kaip ir sakai užims daugiau laiko, bet vėliau nereiks perdarinėt, super

va iš čia gali rasti keletą psd dizainų http://themes-lt.eu/darbai/1/web...20/%20/%20

tinklalapių elementai būna tik gif ir png. gif dažniausiai labai smulkioms detalėms, o šiaip pagrinde png. png ir peršviečiamas gražiau atrodys, neapkramtytas. dar rekomenduoju visiems spausti paveikslėlius per čia: http://kraken.io - paveikslėliai užims dar mažiau vietos, tinklalapiai veiks greičiau, srauto valgys mažiau, puikus atradimas :D

Redagavo Pakartoti slaptažodį· 2014 Kov. 6 01:03:57

Parašė SonyNokia· 2014 Kov. 6 01:03:05

Na dėkoju už pasidalinimus. Šiandien atrodos susirasiu tik psd padorų. O rytoj pabandysiu pakarpyti, ir žiūrėti kaip ten gaunasi. O dėl http://kraken.io pabandysiu pažiūrėti kaip veikia, kaip skirtumai. ;)

Parašė Pakartoti slaptažodį· 2014 Kov. 6 01:03:38

šaunu, aš pats jau irgi lėksiu, sėkmės, būtinai pasidalink kaip seksis ;)
kas dėl krakeno.. tai paveikslėlių kokybė nenukenčia nė kiek, o vartymo greitį pastebėti gali būti keblu, bet faktas tas, kad paveikslėliai - sunkiausia ir didžiausia eilinio tinklalapio dalis - užims tikrai mažiau.

Parašė SonyNokia· 2014 Kov. 6 01:03:38

Nesenai išbandžiau krakena, tikrai geras išradimas. Pabandžiau ir sukonvertuoti, tai tikrai eina sutaupyti tuos kb, kokybė nei truputi nenukentėjo, ir tikrai manau pasijaustų skirtumas, bet reiktų, kad būtų didesnis puslapis, kad būtų pastebas vertimo greitis. :)

Parašė SonyNokia· 2014 Kov. 6 02:03:44

#10

Na štai.. Pabandžiau ir padariau, bet ne idealiai.. Iki idealumo trūksta truputėli.

Orginal:

Mano:

Kas man nepavyko? Raidės kvailai atrodo + nedidelis sriftas, bet šita mokėčiau pataisyt, bet kažkodėl man atrodo tas visas meniu kreivas, žemyn, aukštyn.. Tas man nepatiko. Tada neįdėjau tų brukšnių , orginaliame matosi. Šešėlio neuždėjau kur yra prie logotipo. O visa kita mano akiai kaip ir gerai gavosi. Dabar duosiu Jūsų kritikai. :)
Dariau viską pats, niekas nepadėjo.

DĖL LOGOTIPO IR PIEŠĖJO: nei puslapio , nei piešėjo nenorėjau ir nenoriu reklamuoti, bet tiesiog internete radau tokį psd failą, tai tokį ir perkūriau.

Redagavo SonyNokia· 2014 Kov. 6 02:03:28

Parašė Pakartoti slaptažodį· 2014 Kov. 6 15:03:44

#11

ar man taip atrodo ar tik navigacija yra teksto forma? visur kitur atrodo lyg tie patys iškarpyti paveiksliukai :D

Parašė SonyNokia· 2014 Kov. 6 16:03:37

#12

Nu taip, čia tik šiuo atvėju navigacija yra su tekstu, o visa kita tik karpiniai, tai kaip supratau viskas blogai , kas tik su karpiniais padaryta..

Parašė Pakartoti slaptažodį· 2014 Kov. 6 17:03:41

#13

na jo, nes kaip sakant nieko taip ir nepadarei savo rankom, vien paveiksliukai nesiskaito :D ten kur tekstas - turi ir būti tekstas

Parašė SonyNokia· 2014 Kov. 6 20:03:39

#14

Pakartoti slaptažodį, na štai , atkarpiau ir surašiau pats ranka tuos laukelius. Taigi paliksiu dabar Tavo kritikai. Ką blogai dariau , galbūt patarimų duosi. Krakeno šį kartą nenaudojau.

Redagavo SonyNokia· 2014 Kov. 6 20:03:54

Parašė Pakartoti slaptažodį· 2014 Kov. 6 20:03:46

#15

na va, kaip matai gavosi visai nieko, tik aišku yra ir kitokių šriftų nei kad Times New Roman, pabandyk su Arial, Tahoma, Verdana kombinacijom.
ir šiaip visi tekstai truputį į viršų pasislinkę, ištaisytum tai?

Parašė SonyNokia· 2014 Kov. 6 20:03:37

#16

Vat su šitu yra sunkiausia, todėl, nes nemoku, arba neatsimenu kaip padaryt. Todėl prie to viršaus ilgai leidau laiką, bet man vistiek nepavyko.. Galbūt pasidalinsi kaip tai padaryti? O su sriftu, tai čia pagal psd reikia derinti, ar yra kažkuris sriftas yra kuris tinka labiausiai ?

Parašė Pakartoti slaptažodį· 2014 Kov. 6 21:03:16

#17

nu šitam psd naudojamas tahoma, tad jį gali pamėgint, šiaip tahoma ar koks arial - jie saugūs šriftai, jie visur tinka. o va toks klasiškas kaip tavo tikrai ne visur..

o viršus stumdyt su css padding'ais reikia.

Parašė SonyNokia· 2014 Kov. 6 21:03:50

#18

Wow, dėkoju už padding'o priminimą! ;) Jis veikia. Pakeičiau sriftą į Tahoma, ir toliau bandau pabaigti atitaikyti paddingus.

Galbūt galėtum dar priminti kaip padaryti tarpą tarp eilučių? Nes <br /> per didelius daro. :)

Redagavo SonyNokia· 2014 Kov. 6 21:03:47

Parašė Pakartoti slaptažodį· 2014 Kov. 6 21:03:49

#19

body {
line-height: 150%;
}

;)

Parašė SonyNokia· 2014 Kov. 6 22:03:06

#20

Dėkoju už tuos du priminimus.. Jie tikrai pagelbėjo dar labiau ištaisyti tekstus.. Galbūt dar rasi kokių klaidelių, būtinai lauksiu. ;)

Edit: Tarpus tarp karpinių pas save pakeičiau, bet jau čia nebedėsiu, čia kaip ir nėra sunku su šituo. :)

Redagavo SonyNokia· 2014 Kov. 6 22:03:19

Parašė Pakartoti slaptažodį· 2014 Kov. 6 23:03:30

#21

o ką, visai nieko atrodo, tik aišku dabar būtų smalsu pažiūrėti į kodą, nes esmė visa tai jame, ir įsitikinai kad atvaizduoja ant visų naršyklių vienodai puikiai? ;)

Parašė SonyNokia· 2014 Kov. 6 23:03:08

#22

Prigavai mane...
Ant Chrome Canary viską testavau ant jo viskas gerai!
Mozzila - blogai.
Internet Eeplorer - blogai.
Paprastas Canary - blogai.

O daugiau naršyklių neturiu.

O dėl kodo, įdėsiu.
INDEX.HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TPG-LIFE.LT</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div align="center">
<div id="logo">
</div>
<div id="meniu">
<ul id="meniu_tekstas">
<li><a href="index.html">Namai</a></li>
<li><a href="index.html">Forumas</a></li>
<li><a href="index.html">Pagalba</a></li>
<li><a href="index.html">Reklama</a></li>
<li><a href="index.html">Paslaugos</a></li>
<li><a href="index.html">Kontaktai</a></li>
</ul>
<div align="left">
<div id="junk">
<div align="center">
<h6>PRISIJUNKITE PRIE MŪSŲ!</h6>
</div>
<br />
</div>
<br />
<div id="jpg">
<h2> Tik čia atskleidžia tikro gyvenimo galimybes </h2>
</div>
<div id="monitorius"> 
<div align="center">
<h3> SERVERIO MONITORIUS </h3>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h3> ŽAIDĖJAI: 64/200 </h3>
<h3> VERSIJA: 0.3x </h3>
<h3> IP ADRESAS: samp.tgp-life.lt</h3>
</div>
<div id="info">
<h1>INFORMACIJA APIE PROJEKTA</h1>
<br />
<h4>Sveiki, taigi atsidarė naujasis  TPG-LIFE.LT projektas, su laiku bus atnaujinimų. Šis projektas yra unikalus, kurtas nuo 0. Kūrėme penkiese. Puslapio dizainą su laiku pagerinsim. ČIA NETIKRA,ČIA TIESIOG KARPIAU. </h4>
</div>
<div id="end">
<p> © 2013 TPG-LIFE.LT - Visos teisės griežtai saugomos</p> 
<div align="right">
<h5>dizainas: GReddy </h5>
</div>

STYLE.CSS

body {
background:url(images/bg.gif);
}
 
#wrap  {
width: 891px;
height: auto;
margin: 0 auto;
}
 
#logo {
background:url(images/logo.gif) no-repeat;
width: 1000px;
height: 170px;
margin-top: 10px;
margin-left: -50px;
margin-bottom: -23px;
font-family: Tahoma;
}
 
#meniu {
background:url(images/meniu.gif) no-repeat;
padding-top:0px;
width: 664px;
height: 45px;
margin-left: auto;
margin-right: auto;
font-family: Tahoma;
padding-top: 5px;
}
 
#meniu_tekstas {

width: 664px;
height: auto;
list-style: none; 
padding-left: 0px;
padding-top: 5px;
margin-top: 0px;
margin-bottom: 0px;
font-family: Tahoma;
}
 
li {
list-style-type: none;
display: inline;
padding-top:20px;
font-family: Tahoma;
font-size: 18px;
font-style: regular;
margin-bottom: 10px;
margin: 20px;
 
}
 
a {
color: #F8F8F8;
text-decoration: none;
font-family: Tahoma;
}
 
a:hover {
text-decoration: none;
font-family: Tahoma;
}
 
#junk {
background:url(images/junk.gif) no-repeat;
width: 667px;
height: 23px;
margin-top: 16px;
font-family: Tahoma;
padding-top: 5px;
 
}
 
p {
padding-right: 1cm;
font-size: 13px;
color: #FFFFFF;
margin-right: 2px;
text-indent: 10px;
font-family: Tahoma;
}
 
h6 {
color: #FFFFFF;
font-size: 12px;
font-family: Tahoma;
}
 
h5 {
color: #FFFFFF;
margin-right: 20px;
font-size: 12px;
margin-top: -15px;
text-indent: px;
font-family: Tahoma;
}
 
h4 {
color: #484848  ;
font-size: 13px;
text-align:center;
font-family: Tahoma;
text-indent: 1px;
}
 
h3 {
color: FFFFFF;
font-size: 12px;
text-indent: 19px;
font-family: Tahoma;
line-height: 150%;
}
 
h2 {
font-size: 12px;
color: #FFFFFF;
text-align: center;
padding-top: 120px;
font-family: Tahoma;
}
 
h1 {
color: #FFFFFF;
font-size: 12px;
font-family: Tahoma;
text-align: center;
padding-top: 4px;
}
 
#monitorius {
background:url(images/monitorius.gif) no-repeat;
width: 195px;
height: 241px;
margin-top: -144px;
padding-bottom: 8px;
font-family: Tahoma;
padding-top: 6px;
}
 
#jpg {
background:url(images/jpg.gif) no-repeat;
width: 465px;
height: 144px;
margin-left: 200px;
margin-right: auto;
margin-top: -22px;
font-family: Tahoma;
}
 
#info {
background:url(images/info.gif) no-repeat;
width:468px;
height: 95px;
margin-left: 199px;
margin-right: auto;
margin-top: -85px;
font-family: Tahoma;
}
 
#end {
background:url(images/end.gif) no-repeat;
width: 669px;
height: 23px;
margin-top: 5px;
font-family: Tahoma; 
padding-top: 3px;
}

Įdėsiu dėl viso pikto images, kaip pavadines juos, nes pavadinau juos, bet kaip tiesiai šviesiai pasakius.

Dėl kodo abejoju ar teisinigai parašes esu, bet iš klaidų ar pastabų mokomės.! ;) Norėjau paklausti, o kaip suderinti visas naršykles, kad viską vienodai rodytų, ar tai sunku ?

Redagavo SonyNokia· 2014 Kov. 6 23:03:10

Parašė Pakartoti slaptažodį· 2014 Kov. 7 00:03:41

#23

hm, o matosi jog tu čia tikrai ne naujokas, viskas su divais, jokių table ;)
tik dizaine neturi būti jokių <br />, tai labai blogas būdas "apeiti problemą", vėlgi stumdyk viską su paddingais. paskui tie visi h1, h2 h3... geriau jų nenaudok, jie ne tam skirti, paprastai tekstą dekoruok su <span>tekstas</span> css kode irgi labai daug nereikalingų dalykų. gali prie body { } pasirašyk font-family ir viskas, galios visam dokumentui, nereiks prie kiekvieno bloko rašyt tą patį. ir per css paveikslėlius įterpiam tarp kabučių..
šiaip jei giliau gilinantis galima būtų dar klaidų tų rast, tačiau pradžiai tiek, visai nieko, gera pradžia ;) tik įsivaizduok jei nusipieštum savo dizainą, jį taip sukarpytum ir dar užmautum ant kokios nors php sistemos, irgi savo kūrybos. osum? :]

Redagavo Pakartoti slaptažodį· 2014 Kov. 7 00:03:00

Parašė SonyNokia· 2014 Kov. 7 00:03:15

#24

Na ant šitų kalbų ne taip plaukioju kaip ant PHP plaukioju, bet .. Ateis savas laikas ir jam . ;). Keleta kartų skaičiau Tavo pagyrimus, pastabas, kad supraščiau viską. Na supratau +/-. Tik mane labai gąsdina su tais (h1-h6), su šitu truputi plaukioju . Bet reikės bandyti viską, pataisyti. Stengsiuosi ištrinti visus <br /> , ir pakoreguoti viską su padding'u. O dėl kabučių man kyla klausimas kaip turėtų atrodyti tarkime yra #meniu, tai reiktų rašyti "meniu" , ar kaip kitaip?

Na , jeigu mokėčiau piešti, ir taip neplaukiočiau PHP kalboje, tikrai būtų osum darbas, jeigu tą padaryčiau nuo 0 iki 100% su nedaug klaidelių.. ;)

Redagavo SonyNokia· 2014 Kov. 7 00:03:47

Parašė Pakartoti slaptažodį· 2014 Kov. 7 01:03:58

#25

sakyk garsiai jei kas neaišku, būtinai paaiškinsiu suprantamesniais (jei tai įmanoma) žodžiais ;) dėl kabučių tai turėjau omeny tai: background:url("images/logo.gif") no-repeat;

vieną dieną tikrai padarysi puikų projektą, pamatysi nesitikėk stebuklingų rezultatų per ~savaitę

Parašė SonyNokia· 2014 Kov. 7 01:03:58

#26

Na dabar iškilo tokia problema.. Tiesiog neina teksto per index.html padaryti <br /> pagal taisykles kokias 5-15px

Kodą naudoju štai tokį:

<span style="color:#484848; font-size: 12px; margin-top: 12px; callpadding-top: 15px">Sveiki, taigi atsidarė naujasis  TPG-LIFE.LT projektas, su laiku bus atnaujinimų. Šis projektas yra unikalus, kurtas nuo 0. Kūrėme penkiese. Puslapio dizainą su laiku pagerinsim. ČIA NETIKRA,ČIA TIESIOG KARPIAU.</span>

Žinoma daug visiokių nesąmonių dėl top privėliau, bet bandžiau visus, nes tiesiog nežinau, arba neatsimenu kaip padaryti taip pat kaip <br /> . :)

Parašė Creatium· 2014 Kov. 7 11:03:00

#27

Naudok div vietoje span, jis suteikia daugiau valdymo galimybių.

Parašė IlikeIT· 2014 Kov. 7 12:03:27

#28

<span style="color:#484848; font-size: 12px; margin-top: 12px; <b>callpadding-top: 15px</b>">Sveiki, taigi atsidarė naujasis  TPG-LIFE.LT projektas, su laiku bus atnaujinimų. Šis projektas yra unikalus, kurtas nuo 0. Kūrėme penkiese. Puslapio dizainą su laiku pagerinsim. ČIA NETIKRA,ČIA TIESIOG KARPIAU.</span>

cellpadding-top: 15px, arba tiesiog padding-top: 15px.

Parašė SonyNokia· 2014 Kov. 7 14:03:03

#29

Dėkui tiek Creatium tiek IlikeIT. Labai padėjo tiek div, tiek padding'as. :)

Parašė Pakartoti slaptažodį· 2014 Kov. 7 16:03:51

#30

Creatium parašė:
Naudok div vietoje span, jis suteikia daugiau valdymo galimybių.

teisybė, span skirtas žodžio ar kelių smulkiam apipavidalinimui (šriftas, spalva, dydis), o jau blokams - tik div'as

Parašė SonyNokia· 2014 Kov. 7 17:03:52

#31

Norėjau paklausti dėl tarkim padding-top: -15px; , tai skaitosi kaip klaida jeigu tai minusas? Bet atlieka tą pačia funkcija, kaip ir paprastas tarkim 15px ,tik minusas nuo paprasto skiriasi tuo, kad pusės keičiasi, nes pavyzdžiui padding-bottom: 15px; visiškai neveikia..

Ir dar klausimas tarkime yra Index.html'e kodas <div id="junk">, tai sekančioje eilutėje turi būti būtinai uždaromas div </div> ?

Redagavo SonyNokia· 2014 Kov. 7 17:03:39

Parašė Pakartoti slaptažodį· 2014 Kov. 7 18:03:29

#32

sintaksė visiškai teisinga, naudoti galima drąsiai, tik aišku jei dirbant profesionaliai, minusų geriau išvengt, turi gautis viskas be jų.. taip, pusės skiriasi.

na kas be ko, kai baigiasi tavo blokas junk visada turi jį uždaryti, nebūtinai sekančioje eilutėje, svarbu ten, kur pabaiga

Parašė SonyNokia· 2014 Kov. 7 18:03:46

#33

O kodėl galėtų neveikti man padding-bottom? Nes vesdamas 15px ar 150px nejuda iš vietos , bet pvz padding-top veikia kuo puikiausiai..

Parašė Pakartoti slaptažodį· 2014 Kov. 7 18:03:58

#34

na čia sunku pasakyt, netgi aš susiduriu su tokiom problemom kad aha, šitas būdas kažkodėl neveikia, nežinau kodėl, bet kitas veikia, liekam prie jo..

Parašė SonyNokia· 2014 Kov. 7 21:03:17

#35

Nes kitokiu atvėju, aš nebemoku padaryti, kad vaikščiotų su tuo padding - top be minuso, to minuso neišvengiu...

Nutinka ir tokių dalykų kaip padding-top ( su minusu) kai būna daugiau px, irgi pradeda nebevažinėti. . :?

Redagavo SonyNokia· 2014 Kov. 7 22:03:26

Parašė SonyNokia· 2014 Kov. 8 00:03:35

#36

Taigi.. Kaip ir pabaigiau savo darbą daryti, perdariau, kad nebūtų nei h1-h6 , nei kitų dalykų kurie trukdė, pastačiau ant div.

Nuotrauka:

HTML kodas:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TPG-LIFE.LT</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="wrap">
<div align="center">
<div id="logo">
</div>
 
 
<div id="meniu">
<ul id="meniu_tekstas">
<li><a href="index.html">Namai</a></li>
<li><a href="index.html">Forumas</a></li>
<li><a href="index.html">Pagalba</a></li>
<li><a href="index.html">Reklama</a></li>
<li><a href="index.html">Paslaugos</a></li>
<li><a href="index.html">Kontaktai</a></li>
</ul>	</div>
 
<div style="color:white; font-size: 12px">PRISIJUNKITE PRIE MŪSŲ!	</div>
<div id="junk">	</div>
 
 
<div id="jpg">
<div style="color:white; font-size: 12px; padding-top: 118px">Tik čia atskleidžia tikro gyvenimo galimybes	</div>
 
 
<div id="monitorius"> 
<div style="color:white; font-size: 12px; text-indent: 15px; padding-top: 7px"> SERVERIO MONITORIUS
<div style="font-size: 12px; padding-top: 158px; color:red">ŽAIDĖJAI: 64/200
<div style="font-size: 12px; padding-top: 5px; color:red">VERSIJA: 0.3x 
<div style="font-size: 12px; padding-top: 5px; color:red">IP ADRESAS: samp.tgp-life.lt	</div>
 
 
<div id="info">
<div align="center">
<div style="color:white; font-size: 12px; padding-top:4px">INFORMACIJA APIE PROJEKTA 
<div style="color:#484848; font-size: 12px; padding-left: 5px; padding-top: 15px">Sveiki, taigi atsidarė naujasis  TPG-LIFE.LT projektas, su laiku bus atnaujinimų. Šis projektas yra unikalus, kurtas nuo 0. Kūrėme penkiese. Puslapio dizainą su laiku pagerinsim. ČIA NETIKRA,ČIA TIESIOG KARPIAU.	</div>
 
 
<div id="end">
<p> © 2013 TPG-LIFE.LT - Visos teisės griežtai saugomos</p> 
<div align="right">
<div style="color:white; font-size: 13px; margin-top: -17px; margin-right: 20px"> dizainas: GReddy	</div>

CSS kodas:

body {
background:url("images/bg.gif");
font-family: Tahoma;
}
 
li {
display: inline;
font-size: 18px;
margin: 20px;
}
 
a {
color: #F8F8F8;
text-decoration: none;
}
 
 p {
font-size: 13px;
color: #FFFFFF;
text-indent: 10px;
text-align: left;
}
 
 
a:hover {
text-decoration: none;
}
 
 
 
#wrap  {
width: 891px;
height: auto;
margin: 0 auto;
}
 
#logo {
background:url("images/logo.gif") no-repeat;
width: 1000px;
height: 170px;
margin-top: 10px;
margin-left: -50px;
margin-bottom: -23px;
}
 
#meniu {
background:url("images/meniu.gif") no-repeat;
width: 664px;
height: 45px;
padding-top: 5px;
}
 
#meniu_tekstas {
width: 664px;
height: auto;
list-style: none; 
padding-top: 5px;
}
 
#junk {
background:url("images/junk.gif") no-repeat;
width: 667px;
height: 23px;
margin-top: -19px;
}
 
#jpg {

background:url("images/jpg.gif") no-repeat;
width: 465px;
height: 144px;
margin-left: 200px;
margin-top: 2px;
}
 
#monitorius {
background:url("images/monitorius.gif") no-repeat;
width: 195px;
height: 241px;
margin-left: -672px;
margin-top: -132px;
 
}
 
#info {
background:url("images/info.gif") no-repeat;
width:469px;
height: 96px;
margin-left: 199px;
margin-top: -85px;
}
 
#end {
background:url("images/end.gif") no-repeat;
width: 669px;
height: 23px;
margin-top: 25px;
margin-left: -200px;
padding-top: 3px;
}

Taigi lauksiu kritikos, pagyrimų galbūt, norėčiau sužinoti kas šiuo metu blogai. ;)

O dėl padding'ų su minusu, tai tiesiog neišėjo man kitaip padaryti, nes padding-right, arba padding-bottom nelabai norėjo veikti kaip priklauso, na bandžiau ir daugiau variantų, bet kažkaip su minusu mane išgelbėjo labiausiai.

Ir dar norėjau paklausti dėl kodo, ir ar tai klaida, jeigu esu parašes taip?

<div style="color:white; font-size: 12px">PRISIJUNKITE PRIE MŪSŲ!	</div>
<div id="junk">	</div>

O ne taip :

<div id="junk">     </div>
<div style="color:white; font-size: 12px">PRISIJUNKITE PRIE MŪSŲ!	</div>

Redagavo SonyNokia· 2014 Kov. 8 00:03:35

Parašė Pakartoti slaptažodį· 2014 Kov. 8 01:03:51

#37

visų pirma norėčiau dar pastebėti kad galima būtų sutrumpinti paddingų rašymą taip, jei jų keli, vietoj

margin-top: 10px;
margin-left: -50px;
margin-bottom: -23px;

rašyt

margin: 10px 0 -23px -50px;

manau pagavai mintį.

na o tuos divus dėk pagal eiliškumą, tau geriau matyt, jei iš pradžių eina junkas, arba jis kairėj, žodžiu jis pirmas, vadinasi ir dedam pirmą..

o šiaip

<div style="color:white; font-size: 12px">PRISIJUNKITE PRIE MŪSŲ!</div>

geriau keisk į span. creatium gerai sako šiaip, bet čia nėra blokas, čia tiesiog tekstas, tad divas ne prie ko.

Parašė SonyNokia· 2014 Kov. 8 02:03:04

#38

Na gerai supratau, ką norėjai man pasakyti. Pabandysiu pataisyti. Dėkoju, kad duodi pasiūlymų , ir šiaip pasakai kas blogai. ;)

O dėl :

margin: 10px 0 -23px -50px;

yra šitam kode kažkoks eiliškumas? Atsimenu kažkada esu bandes iš 4 , bet to neužfiksavau ir tiesiog nenaudojau. Nes kaip ir lengviau kai jie palaidi, bet reikia tobulintis ir stengtis naudotis Tavo pateiktu pasiūlymu.

Jeigu yra eiliškumas, ir jeigu Tau nebūtų sunku, tai pasidalink.

margin: 10px - kaip supratau top, 0 - nežinau, -23 - bottom , -50 left, o jeigu būtų margin-right: 50px, tai būtų taip pat

margin: 10px 0 -23px -50px;

Redagavo SonyNokia· 2014 Kov. 8 02:03:13

Parašė Pakartoti slaptažodį· 2014 Kov. 8 02:03:59

#39

0 čia būtų right.
sintaksė tokia:

margin: top right bottom left;

;)

Parašė SonyNokia· 2014 Kov. 8 12:03:41

#40

Dėkoju labai už paaiškinta sintakse. ;)

Taigi pataisiau ir sudėjau kas po ko eina tiek HTML tiek CSS kalboje, tai ką pastebėjau, kad ant kaikurių karpinių išėjo išvengti margin minusų, bet ne ant visų.

Nuotrauka:

Manau, kad jau niekuo nebenustebins, tą patį vaizdą +/- matant.

HTML kodas:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TPG-LIFE.LT</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="wrap">
<div align="center">
<div id="logo">
</div>
 
<div id="meniu">
 
<ul id="meniu_tekstas">
<li><a href="index.html">Namai</a></li>
<li><a href="index.html">Forumas</a></li>
<li><a href="index.html">Pagalba</a></li>
<li><a href="index.html">Reklama</a></li>
<li><a href="index.html">Paslaugos</a></li>
<li><a href="index.html">Kontaktai</a></li>
</ul>	</div>
 
<span style="color:white; font-size: 12px">PRISIJUNKITE PRIE MŪSŲ!	</span>
<div id="junk">	</div> 
 
 
<div id="monitorius"> 
<div style="color:white; font-size: 12px; text-indent: 15px; padding-top: 7px"> SERVERIO MONITORIUS
<div style="font-size: 12px; padding-top: 158px; color:red">ŽAIDĖJAI: 64/200
<div style="font-size: 12px; padding-top: 5px; color:red">VERSIJA: 0.3x 
<div style="font-size: 12px; padding-top: 5px; color:red">IP ADRESAS: samp.tgp-life.lt	</div>
 
<div id="jpg">
<div style="color:white; font-size: 12px; padding-top: 118px">Tik čia atskleidžia tikro gyvenimo galimybes	</div>
 
<div id="info">
<div align="center">
<div style="color:white; font-size: 12px; padding-top:4px">INFORMACIJA APIE PROJEKTA 
<div style="color:#484848; font-size: 12px; padding-left: 5px; padding-top: 15px">Sveiki, taigi atsidarė naujasis  TPG-LIFE.LT projektas, su laiku bus atnaujinimų. Šis projektas yra unikalus, kurtas nuo 0. Kūrėme penkiese. Puslapio dizainą su laiku pagerinsim. ČIA NETIKRA,ČIA TIESIOG KARPIAU.	</div>
 
<div id="end">
<p> © 2013 TPG-LIFE.LT - Visos teisės griežtai saugomos</p> 
<div align="right">
<div style="color:white; font-size: 13px; margin-top: -17px; margin-right: 20px"> dizainas: GReddy	</div>

CSS kodas:

body {
background:url("images/bg.gif");
font-family: Tahoma;
}
 
li {
display: inline;
font-size: 18px;
margin: 20px;
}
 
a {
color: #F8F8F8;
text-decoration: none;
}
 
p {
font-size: 13px;
color: #FFFFFF;
text-indent: 10px;
text-align: left;
}
 
 
a:hover {
text-decoration: none;
}
 
#wrap  {
width: 891px;
height: auto;
margin: 0 auto;
}
 
#logo {
background:url("images/logo.gif") no-repeat;
width: 1000px;
height: 170px;
margin: 10px 0 -23px -50px;
}
 
#meniu {
background:url("images/meniu.gif") no-repeat;
width: 664px;
height: 45px;
padding: 5px 0 0 0;
}
 
#meniu_tekstas {
width: 664px;
height: auto;
list-style: none; 
padding: 5px 0 0 0 ;
}
 
#junk {
background:url("images/junk.gif") no-repeat;
width: 667px;
height: 23px;
margin: -19px 0 0 0;
}
 
#monitorius {
background:url("images/monitorius.gif") no-repeat;
width: 195px;
height: 241px;
margin: 3px 472 0 0;
}
 
#jpg {

background:url("images/jpg.gif") no-repeat;
width: 465px;
height: 144px;
margin: -231px 0 0 199px;
 
}
 
#info {
background:url("images/info.gif") no-repeat;
width:469px;
height: 96px;
margin: 14px 0 0 0;
}
 
#end {
background:url("images/end.gif") no-repeat;
width: 669px;
height: 23px;
margin: 27px 0 0 -200;
padding: 3px 0 0 0;
}

Taigi margin: 0 0 0 0; labai pagelbėjo, nes pavyko tiek sutaupyti eilučių, tiek išmokti -užtvirtinti naujove, kuri labai patogi. ;) Dar ką pastebėjau tai , kad pradėjo ir right margin veikti normaliai, bet ne ant visų.
Ir visgi kilo man klausimas... O kaip pritaikyti prie visų naršyklių , kad būntų vienodas vaizdas? Nes kai derinau prie Chrome Canary, tai viskas gerai. O kai Google Chrome, Internet Explorer, Mozilla jau nebeatitinka..
Pamiršiu slaptažodį, laukiu Tavo pastebėtų mano klaidelių, ar kitų dalykų.

Redagavo SonyNokia· 2014 Kov. 8 15:03:32

Parašė Pakartoti slaptažodį· 2014 Kov. 8 17:03:31

#41

<div style="color:white; font-size: 12px; text-indent: 15px; padding-top: 7px"> SERVERIO MONITORIUS
<div style="font-size: 12px; padding-top: 158px; color:red">ŽAIDĖJAI: 64/200
<div style="font-size: 12px; padding-top: 5px; color:red">VERSIJA: 0.3x
<div style="font-size: 12px; padding-top: 5px; color:red">IP ADRESAS: samp.tgp-life.lt</div>

šitas eilutes ir kitas kur tiesiog aprašomos teksto savybės pakeisk į span'us. ir šiaip, kodėl neuždaromi tag'ai? siūlau patikrinti po visko savo kodą su w3 validatorium, rasi google, į paviršių išplauks visos klaidos ;D ir dar, jei čia visas tavo html kodas, kažkodėl jis nukirptas gaunasi. center ir wrap divai neuždaryti, nėra </body>, </html> tagų. ei, labai ir labai netobula dar viskas, tokios grubios klaidos ir kiša koją dažniausiai naršyklių suderinamumui.

Redagavo Pakartoti slaptažodį· 2014 Kov. 8 17:03:54

Parašė SonyNokia· 2014 Kov. 8 18:03:38

#42

O pačiam HTML'e naudoti <br /> yra gerai, ar geriau tiesiog su paddingais suderinti. ? Nes dabar monitoriaus tekstą iš div pakeičiau į span, tai kažkaip padding'as nenori vaikščioti.
ir dėl pvz wrap , center, logo. Tai būtų : <div id="wrap"> </div> , <div align="center"> </div> ir taip toliau ? Šiaip pabandžiau po juo kiekvienu padėti po uždaroma </div> tai labai išlakstė visa informacija, bet galima supaddinti manau. ;)

Redagavo SonyNokia· 2014 Kov. 8 22:03:52

Parašė Pakartoti slaptažodį· 2014 Kov. 8 18:03:36

#43

<br /> tik tekstui perkelt į kitą eilutę, blokams stumdyt nelabai. tačiau po spanu vieną br galima padėt, kad perkelti į kitą eilutę, žaidėjai, br, versija, br, ip adresas ir panašiai... ;)

jo, pats puikiai žinai kaip uždaryt bet nedarai. stebina jog klausi tokių dalykų kai tuo tarpu naudoti reseto css pas save, kas yra tikrai pažangu :D nu o išsilakstyt neturėtų manau, nebent kažką ne taip padarei, ne ten uždarei.

Parašė SonyNokia· 2014 Kov. 8 18:03:11

#44

Na dėkoju už pastebėjimus, einu ištaisyti klaidas. :)

Parašė SonyNokia· 2014 Kov. 8 21:03:01

#45

Visą vakarą taisau kodą, bet įdomus dalykas.. Kad span neturi tokios laisvės kaip div'as , tai sunkiau taisyti kodą, viską kaip ir pastačiau į vietą, bet tekstai nelabai nori stumdytis, bandau tiek per html , tiek per css. Galbūt kokį pasiūlyma turi? Bandau tiek padding, tiek margin, ir rezultatas nedžiuginantis.. :|

Patinka tas, kad jau ant visų naršyklių rodo taip pat. :)

Man įdomu kaip valdyti visą span, taip pat kaip div maždaug.. ?

<span style="color: white; font-size: 12px; padding-left: 140px">INFORMACIJA APIE PROJEKTA </span>

Margin-left ir padding-left veikia. Top ,right, bottom neveikia ant abiejų ...

Redagavo SonyNokia· 2014 Kov. 8 22:03:30

Parašė Pakartoti slaptažodį· 2014 Kov. 9 02:03:23

#46

kaip pastebėjau, žinok, tu labai ir labai daug viską stumdai. nejaugi nėra būtų to išvengt? :D kaip aš įsivaizduoju, koduočiau viską čia kiek kitaip, manau būtų paprasčiau, sori bet neturiu dabar laiko tam, net pačiam smalsu :D

Parašė SWIZZ· 2014 Kov. 9 03:03:10

#47

O negali tiesiog span į style.css failą įsidėti, na aprašyti span visą css faile? Tarkim:
span {
padding-top:100px;
}

Parašė SonyNokia· 2014 Kov. 9 10:03:34

#48

SWIZZ, mano supratimu tai nebūtų logiška, nes pradėtų visi tekstai slankiotis, o pas mane span yra ne vienas, tai ten vėl mišrainė gausis, į css span gal rašyti tik spalva ir kokį šriftą, o visa kita reikia derinti atskirai, bet galiu pabandyti padaryti ir taip kaip tu sakai.

Norėjau dar paklausti koks skirtumas tarp div ir span yra , ir koks nuostolis naudojant div , o ne span tekstiniuose reikaluose ?

Redagavo MaFetas· 2014 Kov. 9 14:03:52

Parašė SonyNokia· 2014 Kov. 9 14:03:20

#49

Norėjau dar paklausti koks skirtumas tarp div ir span yra , ir koks nuostolis naudojant div , o ne span tekstiniuose reikaluose ?

Parašė SWIZZ· 2014 Kov. 9 15:03:51

#50

Tai tada daryk taip.

<div class="pavadinimas">
<span class="kitas" style="font-size:blablabla;">asdasd</span>
</div>

Ir css faile apsibrėžk tokį:

.pavadinimas span .kitas {
padding-top:100px;
}

Redagavo SWIZZ· 2014 Kov. 9 15:03:19

Parašė Pakartoti slaptažodį· 2014 Kov. 9 15:03:34

#51

skirtumas tas jog div neskirtas teksto apipavidalinimui, tai išdėstymo, tų pačių blokų elementas, span skirtas darbui su tekstu.

Parašė SonyNokia· 2014 Kov. 9 15:03:53

#52

Bet , kad span'as nenori taip gerai dirbti kaip div, ir truputėlį nervuoti pradeda, kai nesiseka, o bandžiau ir per css, ir html , ir padding, ir margin, su top ir bottom ir nekruta.. :/

SWIZZ , einu išbandyti tavo varianta.

Redagavo SonyNokia· 2014 Kov. 9 16:03:34

Parašė Pakartoti slaptažodį· 2014 Kov. 9 17:03:56

#53

tai dabar klausikas ką tu konkrečiai nori daryti? nereikia tiek daug stumdyti kiek darai tu.. iš kur ten paddinge 140px? truputį nerealu

Parašė SonyNokia· 2014 Kov. 9 18:03:36

#54

Na Aš galiu pridėti failus savo, kuriuos ten bandžiau kažką daryti, tiesiog man nesislankiojo kodas, todėl gal tiek daug px parašiau..
Ir jeigu turėsi ten keleta minučių, bet nujaučiu, kad čia nekeletos minučių prireiks, kol viską susižiūrėsi tai pažiūrėk...
testas.rar - 1.1 Mb

Parašė Pakartoti slaptažodį· 2014 Kov. 9 19:03:12

#55

na pas mane vaizdas iš vis kraupus, sori :D žinok pabandysiu pagal save pasikoduoti šitą ant dienų jei netingėsiu, pažiūrėsim kaip gausis

Parašė SonyNokia· 2014 Kov. 9 20:03:13

#56

Oho, tikėjausi, kad jau visus uždarymus būsiu ištaises, bet kur tau... :D. Jie neišnyko.

Parašė Pakartoti slaptažodį· 2014 Kov. 9 20:03:18

#57

kokią ten įmantrią googlę naudoji? pas mane paprasta, naujausia, 33 versijos ir vaizdas štai toks :D pabandyk iš pradžių gal dar paprastesnius dizainus sukarpyt, vertikalaus išdėstymo, iš apačios į viršų :D ir šiaip, čia puikus resursas mokymuisi, žinoma, anglų kalba http://learn.shayhowe.com/html-css

Parašė SWIZZ· 2014 Kov. 9 21:03:15

#58

Jis viską daro su paveiksliukais. Iškarpyti paveiksliukai iš PSD, kurių net nereikia... Viską galima su css padaryti.

Parašė Pakartoti slaptažodį· 2014 Kov. 9 21:03:09

#59

tas tiesa, fonui naudoti vienaspalvį gifą 1000x700 dydžio yra absurdas. gradientus ir užapvalinimus per css3 šiais laikais padaryt galima. na nieko, pradžia ir yra pradžia

Parašė SonyNokia· 2014 Kov. 9 22:03:59

#60

Google Chrome Version 35.0.1880.0 canary, va koks chromas įmantrus. O kaip sako SWIZZ, kad įmanoma ir be paveiksliukų viską padaryt.. Hmm , kolkas žinau tik vieną būda kai ten pamiršau slaptažodį matei, kaip baisiai sukūriau.. , bet prieš kokia 1-2h , pabandžiau su HTML5&CSS3 , kurį parekomendavo SWIZZ pagal angliška video YouTube padaryti, tai gan viskas praktiškai išėjo. Tai kaip suprantu , kad praktiškai galima su CSS3 pasigaminti puslapį , nu žinoma ir HTML5 panašų į šį ar išeitų padaryti kaip nuo psd .?

Parašė SWIZZ· 2014 Kov. 9 22:03:32

#61

Viskas išeitų. Jei pasidarei tą pamoką, kurią atsiunčiau turėjai suprasti visus pagrindinius dalykus.

Parašė SonyNokia· 2014 Kov. 9 22:03:35

#62

O kuris sunkesnis CSS3 ar tas su kuriuo dirbau ir vistiek neišėjo ?

Parašė Pakartoti slaptažodį· 2014 Kov. 9 22:03:02

#63

na čia tas pats css, tik galėsi plačiau jį naudot, daugiau visokių funkcijų ir efektų

Parašė SonyNokia· 2014 Kov. 9 22:03:49

#64

Norėčiau Tavęs paklausti, ar verta pabandyti su CSS3 tą patį psd atkopijuoti? Bet vistiek turiu nuojauta , kad gali nepavykti, bet... be praktikos negalima tikėtis rezultato. :?

Parašė Pakartoti slaptažodį· 2014 Kov. 9 22:03:41

#65

aišku jog verta, o pats paprasčiausias pavyzdys būtų ko gali tikėtis, kokie pliusai, tarkim vietoj tavo panelės paveiksliuko: jį galima pakeisti grynai lankščiu kodu.

div'o foną galėsi skurti štai taip
http://colorzilla.com/gradient-e...

o jam suapvalinimą taip
http://border-radius.com ;)

Parašė SonyNokia· 2014 Kov. 9 23:03:45

#66

Wow.......... Stebini mane Pakartoti slaptažodį. Labai labai labai dėkoju Tau už tokius pasidalintus puslapius, be jų tikrai daug darbo būtų buve būtent su panele ir ne tik . O tas monitorius kur yra psd'e tai jis tiesiog tik dėl vaizdo, ant kurio galima irgi pasitreniruoti. ;)

Bandysiu Aš tą patį psd failą atkopijuoti, tai norėjau paklausti dėl background'o.gif ar kitu formatu nu nesvarbu, kur tu rašei , kad apsurdas yra 1000x700 dėti, tai ten tiesiog būtų taip :

body {
	background-image: url('img/bg.gif'); }

ir tiek ?

Redagavo SonyNokia· 2014 Kov. 9 23:03:44

Parašė SWIZZ· 2014 Kov. 9 23:03:00

#67

Taigi, kaip supratau tu video net nežiūrėjai ir net nepasidarei pagal tutorial dizaino. Ten viskas buvo parodyta, kaip fonus padaryti, kaip užapvalinti ir viską... Na, bet jei tau geriau tekstai, tai valio.

Parašė Pakartoti slaptažodį· 2014 Kov. 10 00:03:34

#68

na ne, kam to paveiksliukai ten iš vis? juk tai viena spalva...

body { background: #555; }

Parašė SonyNokia· 2014 Kov. 10 00:03:44

#69

SWIZZ, pasidariau pagal tavo video dizainą.

O klausimas kilo dėl logo darant su CCS3, tai jį jau reikia atkirti, ar irgi būtų įmanoma kitais būdais jį pasidaryti ? (Būtent mano psd , kur matosi ankstesnėse nuotraukose, kur TGP-LIFE.LT)

Redagavo SonyNokia· 2014 Kov. 10 00:03:46

Parašė Pakartoti slaptažodį· 2014 Kov. 10 01:03:59

#70

na ne, tikriausiai nieko ten, dviračio nesukursi, darykim paveiksliukiškai :D

Parašė SonyNokia· 2014 Kov. 10 01:03:07

#71

Tai jeigu gaminčiau ant CCS3 ir HTML5, tai realiai reiktų tik trijų nuotraukų ? : Logo, monitoriaus paveiksliukas ir tas žmogus ant katerio, taip?

Parašė Pakartoti slaptažodį· 2014 Kov. 10 01:03:47

#72

taip išeina; jei subegėsi, aišku :D

Parašė SonyNokia· 2014 Kov. 10 01:03:30

#73

Nujaučiu, kad įšūkis ir vėl nelengvas.. Bet tikiuosi , kad bus geriau nei praitas etapas. Šiaip dar galiu pasakyt kai iš pačių pačių pradžių žiūrėjau į tuos psd failus, dar net nekarpes buvau , tai galvoju pasimsiu šita tai bus lengvas, o čia kai pradėjau daryti, tai pasirodo nelengvas reikalas.. :D

Parašė Pakartoti slaptažodį· 2014 Kov. 10 01:03:00

#74

tai ką ir sakau, pasibandyk šitą pagal visas naujoves ir taip drūtai :D o jei nepavyks, galėsi dar lengvesnį paimt ir pasibandyt, surasim ;D

Parašė SonyNokia· 2014 Kov. 10 02:03:51

#75

Minusas tiek paddinguose, tiek maringuose yra ne į nauda? Geriau jo išvengti ? Žinau, kad klausiau to, bet paklausiu su dabartiniu tuo CSS3 .. :)

Parašė Pakartoti slaptažodį· 2014 Kov. 10 02:03:35

#76

na niekas už tai rankų nenukapos, tačiau nepanašu jog tai būtų sunkiausias pasaulio dizainas, manau gautųsi ir paprastai, sunku pasakyt ;) minusai minusais, susikoncentruok į kitas vingrybes

Parašė SonyNokia· 2014 Kov. 10 10:03:22

#77

Nes va naktį pasidariau logo.gif, ir pasigaminau su CCS3 panele, kur namai forumas ir kiti dalykai. Ir bandžiau su margin ar padding žaistis dabar neatsimenu, nes mokykloje. Ir dariau tiek px, tiek %, ir nepavyko be minuso. Bet išbandžiau padding : - 2% ir prisiglaudė prie logo. Bet tada kokiais būdais įmanoma padaryti be minuso? Bet žinoma, jeigu nekenkia minusas, tai galima taip ir palikti;)

Parašė SWIZZ· 2014 Kov. 10 13:03:53

#78

bandyk margin: 0 auto; į css failą.

Parašė Creatium· 2014 Kov. 10 13:03:30

#79

Tau patarimas, jeigu kas nors neišeina ir negali surasti klaidos arba nori pasiaiškinti kaip viskas atrodo. Sudėk absoliučiai visiems div'ams "border: 1px #ff3000 solid;" - visi blokai įgaus raudoną apvedimą, todėl matysi kur kas su kuo liečiasi, kur trukdo paslinkti, kur nesutampa ir pan. Ypač tai naudinga, jeigu dirbi su permatomais objektais (pvz. nededi spalvos panelei ar pan, kur tų blokų ribų tiesiog nesimato).

Aš taip darau, kai kas nors nesutampa ir nerandu klaidos. Iš karto pasidaro viskas aiškiau :)

Parašė SonyNokia· 2014 Kov. 10 17:03:24

#80

Sveiki dar karteli, Esu pasiemes kita dizainą, nu t.y paprašė padaryt, žinoma neskaitau aš savęs ten pro, bet vistiek jeigu nori išmokti, turi dirbti. :) .

Taigi prie reikalo aš, yra dabar tokia problema, kad pavadinimas nenori eiti į savo vietą, bandžiau visaip kaip išmaščiau.

HTML kodas:

<aside class="naujiena">
 <span class="edit">
 	Atnaujinimai svetainėje
 	</span>
 <img src="img/naujiena.gif">
   </aside>

O galbūt blogai čia ką nors pasirašęs.. :? Gal visai net ne taip class suteikiama..

CSS kodas:
pačios naujienos

.naujiena {
	width: 570px;
	height: 213px;
	position:absolute;
	text-align:left;
	margin: 0 14.5%;
	margin-top: -52%;
 
}

Na žinoma, man be minuso niekaip nesigauna.

O to <span> css:

span.edit {
	padding-top: 3%;
	color: #F6F;
	}

O vaizdas štai toks :

O norėčiau, kad gautųsi toks:

Kaip būtų įmanoma čia padaryti ?;)

Ir dar norėčiau paklausti, ką reiktų padaryt, kad jeigu būtų sumažintas chrome langas, kad neliptų vienas ant kito ? Na kaip kituose puslapiuose būna, kad jeigu ir sumažini chromo langa, ir nelaipioja, tiesiog pradingsta ekrana, ir reikia slankiot. Ar čia tik parodo, kad ir vėl kodą blogai parašiau ?

Redagavo SonyNokia· 2014 Kov. 12 13:03:30

Parašė SWIZZ· 2014 Kov. 12 13:03:46

#81

SonyNokia parašė:
<...>

Ir dar norėčiau paklausti, ką reiktų padaryt, kad jeigu būtų sumažintas chrome langas, kad neliptų vienas ant kito ? Na kaip kituose puslapiuose būna, kad jeigu ir sumažini chromo langa, ir nelaipioja, tiesiog pradingsta ekrana, ir reikia slankiot. Ar čia tik parodo, kad ir vėl kodą blogai parašiau ?

Jei nori padaryti, kad nuo lango (ekrano) dydžio priklausytų dizainas, turi daryti jį 'responsive'. Tame video, kur daviau tau, gale rodo, kaip tai padaryti. Reikia prirašyti .css faile @media ir jame sukurti atskirus parametrus, kurių nori.

O ten viršui ko klausei, tai kam tas <span> ?

Daryk taip:

<div class="naujiena">
<header class="naujienos-virsus">
Atnaujinimai svetainėje
</header>
 
<img src="sdasd.png" />
<p class="tekstas">
Balalasllaslalsl
</p>
</div>

.css failas:

.naujiena {
width: ***px;
float: left;
}
 
header .naujienos-virsus {
bacground-color:#sadasd;
width: ***px;
height: ***px;
}
 
.naujiena img {
width: ***px; (paveiksliuko plotis)
height: auto;
float: left;
}
 
p .tekstas {
float: left;
}

Čia ne viskas gali būti gerai, tačiau pasiredaguok pagal save. Aš tai nesuprantu... Juk tą kur daviau video - visi šie dalykai buvo parodyti. O šiaip ir Google ant tokių dalykų tikrai protinga.