Re: panel logowania - Grupy dyskusyjne w eGospodarka.pl

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

Path: news-archive.icm.edu.pl!news.gazeta.pl!newsfeed.pionier.net.pl!news.dialog.net.
pl!not-for-mail
From: the_foe <t...@w...pl>
Newsgroups: pl.comp.www
Subject: Re: panel logowania
Date: Mon, 30 May 2011 21:00:43 +0200
Organization: Dialog Net
Lines: 106
Message-ID: <is0pgm$glc$1@news.dialog.net.pl>
References: <irq6a2$fpd$1@inews.gazeta.pl>
NNTP-Posting-Host: dynamic-78-8-45-77.ssp.dialog.net.pl
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
X-Trace: news.dialog.net.pl 1306782038 17068 78.8.45.77 (30 May 2011 19:00:38 GMT)
X-Complaints-To: a...@d...net.pl
NNTP-Posting-Date: Mon, 30 May 2011 19:00:38 +0000 (UTC)
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.16) Gecko/20101125
Thunderbird/3.0.11
In-Reply-To: <irq6a2$fpd$1@inews.gazeta.pl>
Xref: news-archive.icm.edu.pl pl.comp.www:398922
[ ukryj 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>