Autorius Tema: Švari prisijungimo panelė su css'u ir html  (Skaityta 9498 kartus)

Neprisijungęs Lukas

  • Administratorius
  • Herojus
  • ******
  • Įrašai: 7431
  • Karma: +232/-15
    • Žiūrėti profilį
Švari prisijungimo panelė su css'u ir html
« Įrašytas: 2009-12-02 01:33:32 am »
taigi, vos ne kiekvienam puslapyje buna prisijungimo paneles, vienur grazesnes, kitur baisesnes, cia pora vairiantu svarios paneles. Manau nebloga praktika tiems, kurie stengiasi ismokti html/css dalyku :)


html kodas (viduje itrauktas ir css'as):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registravimosi formos</title>
<style type="text/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- forma ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- pirma----------- */
#basic{
border:solid 2px #DEDEDE;
}
#basic h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#basic p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #dedede;
padding-bottom:10px;
}
#basic label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#basic .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#basic input{
float:left;
width:200px;
margin:2px 0 30px 10px;
}
#basic button{
clear:both;
margin-left:150px;
background:#888888;
color:#FFFFFF;
border:solid 1px #666666;
font-size:11px;
font-weight:bold;
padding:4px 6px;
cursor:pointer;
}

#basic button:hover {
background-color:#0C0;
  }


/* ----------- antra----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
cursor:pointer;
font-weight:bold;
}
#stylized button:hover {
color:#CCC;
}
</style>
</head>

<body>
<div id="basic" class="myform">
  <form id="form1" name="form1" method="post" action="">
    <h1>Registracijos forma</h1>

    <p>Gerai atrodanti paprasta prisijungimo forma nenaudojant lentelių</p>
    <label>Vardas
        <span class="small">Įveskite savo vardą</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
   
    <label>El. Pašto adresas
    <span class="small">Įveskite galiojantį el. pašto adresą</span>
    </label>

    <input type="text" name="textfield" id="textfield" />
   
    <label>Slaptažodis
        <span class="small">6 simboliai ir daugiau</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
    <button  type="submit">Registruotis</button>
    <div class="spacer"></div>


  </form>
</div>

<br/><br/><br/>

<div id="stylized" class="myform">
  <form id="form1" name="form1" method="post" action="">
    <h1>Prisijungimo forma</h1>
    <p>Gerai atrodanti paprasta prisijungimo forma nenaudojant lentelių</p>
    <label>Vardas
        <span class="small">Įveskite savo vardą</span>

    </label>
    <input type="text" name="textfield" id="textfield" />
   
    <label>El. Pašto adresas
        <span class="small">Įveskite tinkamą el. pašto adresą</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
   
    <label>Slaptažodis
        <span class="small">Bent 6 simboliai</span>
    </label>

    <input type="text" name="textfield" id="textfield" />
    <button  type="submit">Registruotis</button>
    <div class="spacer"></div>

  </form>
</div>

</body>
</html>


vienintelis reikalingas paveikslelis yra pridetas prie posto esanciame archyve

taip pat pridedu visa source'a kad butu vienoje vietoje :)

archyvo slaptazodis: manualai.lt

http://jsfiddle.net/K3pJv/


« Paskutinį kartą keitė: 2014-06-05 11:17:17 am sukūrė Lukas Liesis »
Jūsų draugas, kolega ir puslapio administratorius,

Lukas.

Gerda Photography
Serveriai.lt 50% nuolaida!
Free Hosting
Free Templates

Neprisijungęs Deividas Keturakis

  • Dalyvis
  • **
  • Įrašai: 1007
  • Karma: +23/-1
    • Žiūrėti profilį
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #1 Įrašytas: 2009-12-02 14:48:58 pm »
man patiko, šaunu :)
Slapyvardis : Ice

Neprisijungęs Vygantas Pauliukonis

  • Dalyvis
  • **
  • Įrašai: 1136
  • Karma: +12/-2
  • Itkokteilis.lt
    • Žiūrėti profilį
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #2 Įrašytas: 2009-12-02 17:04:14 pm »
Not bad bandysiu koki syk ;)

Neprisijungęs evolution

  • Naujokas
  • *
  • Įrašai: 101
  • Karma: +3/-0
    • Žiūrėti profilį
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #3 Įrašytas: 2010-01-19 18:33:02 pm »
o kaip padaryti kad tuos registracijos duomenys issaugotu kokiam fale ir po to butu galima naudoti prisijungimui?

Manualai.lt Forumas

Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #3 Įrašytas: 2010-01-19 18:33:02 pm »

Neprisijungęs Macaque

  • Dalyvis
  • **
  • Įrašai: 861
  • Karma: +26/-0
  • makakuje.
    • Žiūrėti profilį
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #4 Įrašytas: 2010-01-19 21:39:52 pm »
o kaip padaryti kad tuos registracijos duomenys issaugotu kokiam fale ir po to butu galima naudoti prisijungimui?

Atrodo kažkur forume yra padarytas toks dalykas su PHP ;] paieškok turėtai rasti :]
„Tik vienas dalykas gali svajonę padaryti neįgyvendinamą: tai baimė, kad nepasiseks. “ - Paulo Coelho

Rekomenduoju pirkti domenus iš - IV.lt

Neprisijungęs Rokas Bakūnas

  • Dalyvis
  • **
  • Įrašai: 531
  • Karma: +29/-0
    • Žiūrėti profilį
    • NoL2
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #5 Įrašytas: 2010-01-19 22:34:24 pm »
Tikrai grazu :)
tik vienas uzkliuvo dalykelis del pass laukeliu :) rodo ka rasai, na zinoma  pateiti:

type="text"  i  --> type="password

P.S. cia kas nezino ar pn.
Fata

Slaptazodis: manualai.lt
Jai failas ar mano postas tau praverte + karma ;)

Neprisijungęs Simas

  • Administratorius
  • Dalyvis
  • ******
  • Įrašai: 998
  • Karma: +21/-1
    • Žiūrėti profilį
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #6 Įrašytas: 2010-01-20 14:51:27 pm »
Graži panelė, tik mygtuko hoveris nlb patiko ;]

Draugas

  • Svečias
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #7 Įrašytas: 2010-02-16 21:48:00 pm »
niekaip nesuprantu kaip jis tau per viduri laikos :-\

Neprisijungęs Macaque

  • Dalyvis
  • **
  • Įrašai: 861
  • Karma: +26/-0
  • makakuje.
    • Žiūrėti profilį
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #8 Įrašytas: 2010-02-16 22:15:37 pm »
niekaip nesuprantu kaip jis tau per viduri laikos :-\

Nežiūrėjau viso kodo, bet iškarto matau, kad prie formos tag'o aprašytas toks atributas

Kodas: (css) [Pasirinkti]
.myform{
margin:0 auto;
}

kuris pasako, kad bus lygiuojame centre ;]
„Tik vienas dalykas gali svajonę padaryti neįgyvendinamą: tai baimė, kad nepasiseks. “ - Paulo Coelho

Rekomenduoju pirkti domenus iš - IV.lt

Draugas

  • Svečias
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #9 Įrašytas: 2010-02-17 00:27:03 am »
Citata
Nežiūrėjau viso kodo, bet iškarto matau, kad prie formos tag'o aprašytas toks atributas

Kodas: (css) [Pasirinkti]
.myform{
margin:0 auto;
}

kuris pasako, kad bus lygiuojame centre ;]
dekui :) db zinosiu

Neprisijungęs Edmundas Ciucko

  • Dalyvis
  • **
  • Įrašai: 506
  • Karma: +27/-4
    • Žiūrėti profilį
    • Fejsbūkas.
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #10 Įrašytas: 2010-07-08 13:21:58 pm »
Labai gražu, tas prisijungimo mygtukas net nereikalingas, reikėjo palikt kaip ir registracijoj :)
“It looks good” is the worst feedback you can get -
                                                                           Whitney Hess

filmai.in

Addiction

  • Svečias
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #11 Įrašytas: 2011-01-27 14:17:23 pm »
Išties gražu ir paprasta :)
Reikės kur nors panaudoti

Neprisijungęs Pijokazz

  • Naujokas
  • *
  • Įrašai: 7
  • Karma: +0/-0
    • Žiūrėti profilį
Re: Švari prisijungimo panelė su css'u ir html
« Atsakymas #12 Įrašytas: 2011-07-22 20:15:40 pm »
Labai gražu

Neprisijungęs ello

  • Naujokas
  • *
  • Įrašai: 42
  • Karma: +1/-0
    • Žiūrėti profilį
    • ello
Ats: Švari prisijungimo panelė su css'u ir html
« Atsakymas #13 Įrašytas: 2012-06-09 17:24:12 pm »
gaila, kad nera screenshot'o  :'(
Klysti - žmogiška...

Neprisijungęs Lukas

  • Administratorius
  • Herojus
  • ******
  • Įrašai: 7431
  • Karma: +232/-15
    • Žiūrėti profilį
Ats: Švari prisijungimo panelė su css'u ir html
« Atsakymas #14 Įrašytas: 2014-06-05 11:16:41 am »
gaila, kad nera screenshot'o  :'(


štai ir screenshotas: http://jsfiddle.net/K3pJv/
Jūsų draugas, kolega ir puslapio administratorius,

Lukas.

Gerda Photography
Serveriai.lt 50% nuolaida!
Free Hosting
Free Templates

Manualai.lt Forumas

Ats: Švari prisijungimo panelė su css'u ir html
« Atsakymas #14 Įrašytas: 2014-06-05 11:16:41 am »