Re: panel logowania - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › panel logowania › Re: panel logowania

Data: 2011-05-30 19:00:43
Temat: Re: panel logowania
Od: the_foe <t...@w...pl> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
W dniu 2011-05-28 08:59, mokpl pisze:
> Witam.
> Jestem lamerem, ale chciałbym sobie zrobić taki oto panel logowania (a
> nuż się uda :). O taki jak tutaj np. :
>
> http://www.softwaredroid.com/themes/green_element/im
ages/screenshots/admin_panel_login.gif
>
>
> Chodzi mi tylko o stronę wizualną - jak się do tego zabrać.
>
> - czy uda się to zrobić przy pomocy DIV-a, który będzie ramką dla tego
> obrazka i tam wstawić editboxy o odpowiedniej wysokości i długości oraz
> ustawić atrybuty takie jak padding, margin itd...?
>
> - czy DA się wtedy nad nimi równo wpasować tekst "login", "password"
> itd...? Czy lepiej te teksty narysować na tym tle? (gorzej jak będzie
> trzeba później np. zmienić język)
>
> - czy może trzeba by to jakoś pozycjonować "absolutnie" co do px na
> ekranie?
>
> Generalnie proszę o podpowiedź jakimi sposobami nanieść opisy, pola na
> podanie loginu/hasła oraz przyciski na tego typu obrazek, żeby się nie
> rozjeżdżało i dało jako całość (później) wpasować w resztę strony -
> zanim zacznę samodzielnie rzeźbić w g...
>

masz tu kod, nie dziala dobrze na IE bo nie chcialo mnie sie ohackowac kodu:
<html>
<head>
<style type="text/css">
body{
background-color:#EBF0F1;
}
#login{
margin:auto;
position:relative;
top:170px;
width:408px;
height:311px;

background-image:url('http://img716.imageshack.us/im
g716/2306/droid.png');
background-repeat:no-repeat;

}
#username{
position:absolute;
top:90px;
left:33px;
}
#password{
position:absolute;
top:155px;
left:33px;
}
#submit{
position:absolute;
top:222px;
left:113px;
height:28px;
width:185px;
border:none;
background-color:transparent;
font-family:Verdana;
font-size:15px;

}
#foot{
position:absolute;
top:270px;
width:100%;
text-align:center;
font-size:9px;
font-family:Verdana;

}
.inputtext{
width:340px;
height:42px;
border:none;
background-color:transparent;
color:#B3B6B5;
font-weight:bold;
font-size:18px;
font-family:Verdana;
}

</style>
</head>
<body>
<div id='login'>
<form method='get' action='#'>
<input type='text' id='username' class='inputtext' value="Username"
onfocus="if (this.value == 'Username') {this.value = '';}" onblur="if
(this.value == '') {this.value = 'Username';}">
<input type='text' id='password' class='inputtext' value="Password"
onfocus="if (this.value == 'Password') {this.value = '';}" onblur="if
(this.value == '') {this.value = 'Password';}">
<input type='submit' id='submit' value='Login'>
</form>
<p id='foot'>powered by <b>Software droid</b></p>
</div>
</body>
</html>