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...

Pozdr.

PS. patrzyłem na inne strony, ale trafiam na panele poszatkowane wzdłuż
i w poprzek divami (pewnie z zupełnie innych powodów) i ciężko mi się w
tym połapać.

do góry

On Sat, 28 May 2011 08:59:33 +0200, mokpl wrote:
> - 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...?

glupie pytanie czy sie uda :) jak sie postarasz, to sie uda. ale ja bym
to zrobil tak, jak piszesz w post scriptum: kazdy element to oddzielny
div, tak jest logiczniej

>
> - 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)

poczytaj o html5 placeholder, tym bardziej ze pewnie chcesz by tekst
znikal jak sie tam kursor pojawi. ale zadziala tylko w nowych wersjach
przegladarek (dla starszych poczytaj o js placeholder)





--
pozdrawiam, Konrad Karpieszuk

do góry

W dniu 2011-05-28 12:18, |<onrad pisze:

> poczytaj o html5 placeholder, tym bardziej ze pewnie chcesz by tekst
> znikal jak sie tam kursor pojawi. ale zadziala tylko w nowych wersjach
> przegladarek (dla starszych poczytaj o js placeholder)

Chodzi o tekst nad editboxem a nie w środku. W określonej odległości od
niego. A pod tekstem obrazek. I editbox o określonej szerokości i wysokości.

do góry

W dniu 2011-05-28 12:18, |<onrad pisze:

> glupie pytanie czy sie uda :) jak sie postarasz, to sie uda. ale ja bym
> to zrobil tak, jak piszesz w post scriptum: kazdy element to oddzielny
> div, tak jest logiczniej

Każdy tekst i każdy przycisk to osobny div?
I pod ~ 10 różnych divów jedno tło?
Mhm...

do góry

On Sat, 28 May 2011 12:37:35 +0200, mokpl wrote:

> W dniu 2011-05-28 12:18, |<onrad pisze:
>
>> poczytaj o html5 placeholder, tym bardziej ze pewnie chcesz by tekst
>> znikal jak sie tam kursor pojawi. ale zadziala tylko w nowych wersjach
>> przegladarek (dla starszych poczytaj o js placeholder)
>
> Chodzi o tekst nad editboxem a nie w środku. W określonej odległości od
> niego. A pod tekstem obrazek. I editbox o określonej szerokości i
> wysokości.

co ty w ogole nazywasz editboksem? i co za tekst? "Software Droid"? To
ten tekst na pewno musisz obrazkiem, bo nikt nie ma takiej czcionki u
siebie





--
pozdrawiam, Konrad Karpieszuk

do góry

On Sat, 28 May 2011 12:43:25 +0200, mokpl wrote:

> W dniu 2011-05-28 12:18, |<onrad pisze:
>
>> glupie pytanie czy sie uda :) jak sie postarasz, to sie uda. ale ja bym
>> to zrobil tak, jak piszesz w post scriptum: kazdy element to oddzielny
>> div, tak jest logiczniej
>
> Każdy tekst i każdy przycisk to osobny div? I pod ~ 10 różnych divów
> jedno tło? Mhm...

rozne tla. i przyciski to nie divy a inputy





--
pozdrawiam, Konrad Karpieszuk

do góry

On Sat, 28 May 2011 11:06:41 +0000 (UTC), |<onrad wrote:

[...]

>> Chodzi o tekst nad editboxem a nie w środku. W określonej odległości od
>> niego. A pod tekstem obrazek. I editbox o określonej szerokości i
>> wysokości.
>
> co ty w ogole nazywasz editboksem? i co za tekst? "Software Droid"? To
> ten tekst na pewno musisz obrazkiem, bo nikt nie ma takiej czcionki u
> siebie

Można przecież osadzić.


--
M.G.

do góry

On Sat, 28 May 2011 13:15:32 +0200, M.G. wrote:

> On Sat, 28 May 2011 11:06:41 +0000 (UTC), |<onrad wrote:
>
> [...]
>
>>> Chodzi o tekst nad editboxem a nie w środku. W określonej odległości
>>> od niego. A pod tekstem obrazek. I editbox o określonej szerokości i
>>> wysokości.
>>
>> co ty w ogole nazywasz editboksem? i co za tekst? "Software Droid"? To
>> ten tekst na pewno musisz obrazkiem, bo nikt nie ma takiej czcionki u
>> siebie
>
> Można przecież osadzić.

mozna. ale ja bym nie osadzal. nie chce mi sie punktowac powodow :)



--
pozdrawiam, Konrad Karpieszuk

do góry

W dniu 2011-05-28 13:06, |<onrad pisze:

> co ty w ogole nazywasz editboksem?

Oj zwał jak zwał - pole na wpisywanie tekstu.

> i co za tekst? "Software Droid"?
> ten tekst na pewno musisz obrazkiem, bo nikt nie ma takiej czcionki u
> siebie

Oj jaki "software droid"? Przecież to jakiś przykład był. Pisałem też

"czy DA się wtedy nad nimi równo wpasować tekst "login", "password" itd...?"

do góry

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>

do góry