ilch Forum » Allgemein » HTML, PHP, SQL,... » Loginbox

Geschlossen
  1. #1
    User Pic
    Chris1122 Mitglied
    Registriert seit
    07.06.2009
    Beiträge
    13
    Beitragswertungen
    0 Beitragspunkte
    Hi,
    ich hab da mal n Frage:
    Also bei meiner Loginbox ist das Hintergrundbild vor dem eingabe feld (blackstarallianz.bl.funpic.de/) ich möchte aber das das Eingabefeld darüber steht

    boxen_login.htm:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr> 
        <td>
    	    &nbsp;&nbsp;Hallo&nbsp;<b>{NAME}</b>
    		<br />
    		&nbsp;&nbsp;{NACHRICHTEN}
    		<br />
    		&nbsp;&nbsp;<a class="box" href="index.php?user-8"><img src="include/images/icons/profil.gif" style="margin-top:3px" border="0" alt="Profil"></a>
    		<br />
    	    &nbsp;&nbsp;<a class="box" href="index.php?user-3"><img src="include/images/icons/logout.gif" style="margin-top:3px" border="0" alt="Logout"></a>
    		<br />
    		&nbsp;&nbsp;{ADMIN}
    
    		
    	    </td>
      </tr>
    </table>
    {EXPLODE}
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><div align="right"><a href="index.php?user-regist"><img src="include/designs/loa_01/bilder/login_r.gif" border="0" style="margin-top:0px"  alt="Registrieren" /></a></div></td>
        <td><div align="left"><a href="index.php?user-remind"><img src="include/designs/loa_01/bilder/login_lpw.gif" border="0" style="margin-left:5px"   alt="PW verloren" /></a></div></td>
      </tr>
    </table>
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr> 
        <td>        
    	<div align="center">
    	  <form method="POST">
    		  <img src="include/designs/loa_01/bilder/login_1.gif"><input type="text" name="name" size="9" value="{NAME}" onFocus="if (value == '{NAME}') {value = ''}" onBlur="if (value == '') {value = '{NAME}'}" maxlength="50" class="login_1" style="margin-top:3px; " img src="include/designs/loa_01/bilder/login_1.gif"/>
    		  <br />
    		  <img src="include/designs/loa_01/bilder/login_2.gif"><input type="password" size="9" value="{PASS}" onfocus="if (value == '{PASS}') {value = ''}" onblur="if (value == '') {value = '{PASS}'}" maxlength="20" name="pass" class="login_2" style="margin-top:3px; " img src="include/designs/loa_01/bilder/login_2.gif"/>
    		  <br />
              <input type="hidden" name="wdlink" value="{wdlink}" />
    		  <input type="submit" name="user_login_sub" value="Login" class="login_s" style=" margin-top:3px; margin-bottom:5px; " />
    		  
    		  
    		</form>
    	</div>
    	</td>
      </tr>
    </table>

    Danke im Vorraus^^

    MFG Chris1122

    betroffene Homepage: blackstarallianz.bl.funpic.de/
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Vips Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    238
    Beitragswertungen
    0 Beitragspunkte
    versuch es mal damit
       <input type="text" name="name" size="9" value="{NAME}" onFocus="if (value == '{NAME}') {value = ''}" onBlur="if (value == '') {value = '{NAME}'}" maxlength="50" class="login_1" style="margin-top:3px; " img src="include/designs/loa_01/bilder/login_1.gif"/><br>
    <img src="include/designs/loa_01/bilder/login_1.gif">
              <br />
    <input type="password" size="9" value="{PASS}" onfocus="if (value == '{PASS}') {value = ''}" onblur="if (value == '') {value = '{PASS}'}" maxlength="20" name="pass" class="login_2" style="margin-top:3px; " img src="include/designs/loa_01/bilder/login_2.gif"/>
              <br />          
    <img src="include/designs/loa_01/bilder/login_2.gif"><br>
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Chris1122 Mitglied
    Registriert seit
    07.06.2009
    Beiträge
    13
    Beitragswertungen
    0 Beitragspunkte
    Danke, aber sind die Eingabefelder über den Bildern traurig
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Vips Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    238
    Beitragswertungen
    0 Beitragspunkte
    wie meinst du es denn dann?
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Chris1122 Mitglied
    Registriert seit
    07.06.2009
    Beiträge
    13
    Beitragswertungen
    0 Beitragspunkte
    das das eingabe feld dadrüber is^^
    also als hintergrund des eingabefelds ^^
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    versuchs mit

    style="background-color:#ffffff; bzw style="background:url(bild.jpg);



    Zuletzt modifiziert von Siggi am 16.06.2009 - 21:42:57
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Chris1122 Mitglied
    Registriert seit
    07.06.2009
    Beiträge
    13
    Beitragswertungen
    0 Beitragspunkte
    ich versuchs thx^^
    auch wenn ich nich wirklich ahnung hab wo das hin muss aber ich versuchs^^
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Soldat53b gelöschter User
    Ich hab da auch mal ne frage zur Loginbox, daher gesell ich die mal einfach dazu, hoffe das es recht ist.

    Kann man den Submit Button
    <input type="submit" name="user_login_sub" value="Login" style="margin-top:3px;">
    auch so umändern das er ein Bild mit rollover effect ist?
    Wenn ja wie?
    hab schon einiges ausprobiert mit <a> und anderen sachen aber ich komm nicht drauf.

    MfG Soldat53b
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    musste denke mit bild machen und wie es damit geht steht ihrgendwo hier im board sufu
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    uD Psaicon Mitglied
    Registriert seit
    22.09.2006
    Beiträge
    85
    Beitragswertungen
    16 Beitragspunkte
    mach es doch mit css.. so hab ich das auch gemacht..

    hab ich als class übergeben.. beispiel

    .logbutton /*für loginbutton*/
    {
    width: 48px;
    height: 46px;
    border-width: 0px;
    font-weight: normal;
    text-decoration: none;
    background-image: url(../Bilder/logbutton.png);
    background-repeat: no-repeat;
    padding-bottom: -2px;
    background-color: transparent;
    }
    .logbutton:hover /*für loginbutton-hover*/
    {
    width: 48px;
    height: 46px;
    border-width: 0px;
    font-weight: normal;
    text-decoration: none;
    background-image: url(../Bilder/logbutton-over.png);
    background-repeat: no-repeat;
    padding-bottom: -2px;
    background-color: transparent;
    visibility: hidden;
    }


    musst natürlich anpassen und dann noch das template boxen_login.htm mit der klasse (class) deklarieren class="loginbutton" .. hoffe ich erzähl kein mist jetzt grad..

    schau hier, so schauts bei mir aus im login :

    externer Link


    Zuletzt modifiziert von uD Psaicon am 18.06.2009 - 12:20:23
    VISIT:[ externer Link ] [ Xbox360 E-Sports Clan ]---[ Microsoft Xbox Clan des Monats Oktober 07 ]
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Soldat53b gelöschter User
    funst bei mir nicht

    boxen_login.htm
    <table width="100%" border="0" cellspacing="0" cellpadding="10">
       <tr>
          <td width="3"></td>
        <td>
                    <br />
         Hallo &nbsp;<b>{NAME}</b>
                    <br />
                    <br />
              <a class="box" href="index.php?user-8">{_lang_profil} </a>--
               {NACHRICHTEN}
              <a href="index.php?gallery" target="_self" class="box">Gallery</a> -- <a href="index.php?user-usergallery" target="_self" class="box">Usergallery</a><br />
                          <br/>
              <a class="box" href="index.php?user-3">{_lang_logout}</a> &nbsp;<b>{ADMIN}</b>
                    </td>
      </tr>
    </table>
    {EXPLODE}
    <table width="100%" border="0" cellspacing="0" cellpadding="10">
             <tr>
                     <td></td>
                     <td>
                             <form method="POST">
                                     <input type="text" name="name" size="20" value="{NAME}" onFocus="if (value == '{NAME}') {value = ''}" onBlur="if (value == '') {value = '{NAME}'}" maxlength="15" style="margin-top:15px; background-color: #414852; color: #ffffff; " /><br />
                                     <input type="password" size="20" value="{PASS}" onFocus="if (value == '{PASS}') {value = ''}" onBlur="if (value == '') {value = '{PASS}'}" maxlength="20" name="pass" style="margin-top:2px; background-color: #414852; color: #ffffff; " /><br />
                                     <input type="hidden" name="wdlink" value="{wdlink}" />
                                     <input type="submit" name="user_login_sub" value="Login"  class="loginbutton" style="margin-top:3px;">
                     </td>
             </tr>
    </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
             <tr>
                     <td align="center" >
                             <a href="index.php?user-regist" onmouseout="MM_swapImgRestore()" target="_self" onmouseover="MM_swapImage('regist','','include/designs/rock_design/Bilder/boxes/regist_over.gif',1)"><img src="include/designs/rock_design/Bilder/boxes/regist.gif" name="regist" width="74" height="21" border="0" id="regist"></a><a href="index.php?user-remind" onmouseout="MM_swapImgRestore()" target="_self" onmouseover="MM_swapImage('Pwv','','include/designs/rock_design/Bilder/boxes/Pwv_over.gif',1)"><img src="include/designs/rock_design/Bilder/boxes/Pwv.gif" name="Pwv" width="74" height="21" border="0" id="Pwv"></a>
                     </td>
             </tr>
    </table>

    style.css
    .loginbutton /*für loginbutton*/
    {
    width: 142px;
    height: 21px;
    border-width: 0px;
    font-weight: normal;
    text-decoration: none;
    background-image: url(Bilder/boxes/Login.gif);
    background-repeat: no-repeat;
    padding-bottom: -2px;
    background-color: transparent;
    }
    .loginbutton:hover /*für loginbutton-hover*/
    {
    width: 142px;
    height: 21px;
    border-width: 0px;
    font-weight: normal;
    text-decoration: none;
    background-image: url(Bilder/boxes/Login_over.gif);
    background-repeat: no-repeat;
    padding-bottom: -2px;
    background-color: transparent;
    visibility: hidden;
    }
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    uD Psaicon Mitglied
    Registriert seit
    22.09.2006
    Beiträge
    85
    Beitragswertungen
    16 Beitragspunkte
    hier die htm.. aber musst dir noch zu recht bauen, eventuel anpassen

    <style type="text/css">
    <!--
    .Stil2 {
    	color: #999999;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-style: normal;
    	font-weight: bold;
    }
    .abstand {
    	height: 5px;
    }
    -->
    </style>
    <table width="100%" border="0" cellspacing="0" cellpadding="10">
       <tr> 
        <td><p><span class="Stil2">Hallo &nbsp;<b>{NAME}</b></span><br />
    	  {NACHRICHTEN}</p>
    	    <p><a href="index.php?kalender" target="_self" class="box">Kalender</a> | <a href="index.php?search" target="_self" class="box">Suche</a> | <a href="index.php?map" target="_self" class="box">Membermap</a><br />
                    <a class="box" href="index.php?user-3">{_lang_logout}</a> | <a class="box" href="index.php?user-8">{_lang_profil}</a>
                <br />
                    <a href="index.php?gallery" target="_self" class="box">Gallery</a> | <a href="index.php?user-usergallery" target="_self" class="box">Usergallery</a><br />
         {ADMIN} </p></td>
      </tr>
    </table>
    {EXPLODE}
    <table width="100%" border="0" align="left" cellpadding="5" cellspacing="0">
      <tr> 
        <td>        
    	  <form method="POST">
    	  <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center" valign="top"><input name="name" type="text" class="log1" style="margin-top:5px; " onfocus="if (value == '{NAME}') {value = ''}" onblur="if (value == '') {value = '{NAME}'}" value="{NAME}" size="13" maxlength="50" />
    
                <input name="pass" type="password" class="log2" style="margin-top:6px; margin-buttom:4px; " onfocus="if (value == '{PASS}') {value = ''}" onblur="if (value == '') {value = '{PASS}'}" value="{PASS}" size="13" maxlength="20" />
                </a>            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td height="8" colspan="3" align="center" valign="bottom" class="abstand"><img src="../Bilder/pixelabstandlogin.png" width="160" height="5" /></td>
                    </tr>
                  <tr>
                    <td align="right" valign="bottom"><a href="index.php?user-regist"><img src="include/designs/underdogs_v3/Bilder/register.png" border="0" align="absbottom" /></a></td>
                    <td width="48" align="left" valign="bottom"><input type="hidden" name="wdlink" value="{wdlink}" />
                      <input name="user_login_sub" type="submit"  class="logbutton" style="margin-top:0px;margin-left:0px; " value="" width="58" height="20" /></td>
                    <td align="left" valign="bottom"><a href="index.php?user-remind"><img src="include/designs/underdogs_v3/Bilder/lostpw.png" border="0" align="absbottom" /></a></td>
                  </tr>
                  </table></td>
            </tr>
          </table>
    	  </form>    </td>
      </tr>
    </table>



    dazu noch die css (baust du am besten in die style.css vom design hin

    .log1 /*für nickname hg*/
    {
    	color: #FFFFFF;
    	width: 170px;
    	height: 17px;
    	font-weight: normal;
    	text-decoration: none;
    	text-align: center;
    	vertical-align: baseline;
    	padding-top: 0px;
    	font-family: Tahoma;
    	font-size: 10px;
    	background-color: transparent;
    	background-image: url(../Bilder/log1.png);
    	background-repeat: no-repeat;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    	border-top-color: transparent;
    	border-right-color: transparent;
    	border-bottom-color: transparent;
    	border-left-color: transparent;
    	background-position: center top;
    }
    .log2 /*für pw hg*/
    {
    	color: #FFFFFF;
    	width: 170px;
    	height: 17px;
    	font-weight: normal;
    	text-decoration: none;
    	text-align: center;
    	padding-top: 0px;
    	font-family: Tahoma;
    	font-size: 10px;
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    	border-top-color: transparent;
    	border-right-color: transparent;
    	border-bottom-color: transparent;
    	border-left-color: transparent;
    	vertical-align: bottom;
    	background-position: center top;
    	background-color: transparent;
    	background-image: url(../Bilder/log2.png);
    	background-repeat: no-repeat;
    }
    .logbutton /*für loginbutton*/
    {
    	width: 48px;
    	height: 46px;
    	border-width: 0px;
    	font-weight: normal;
    	text-decoration: none;
    	background-image: url(../Bilder/logbutton.png);
    	background-repeat: no-repeat;
    	padding-bottom: -2px;
    	background-color: transparent;
    }
    .logbutton:hover /*für loginbutton-hover Effekt*/
    {
    	width: 48px;
    	height: 46px;
    	border-width: 0px;
    	font-weight: normal;
    	text-decoration: none;
    	background-image: url(../Bilder/logbutton-over.png);
    	background-repeat: no-repeat;
    	padding-bottom: -2px;
    	background-color: transparent;
    	visibility: hidden;
    }



    musst natürlich alles anpassen.


    Zuletzt modifiziert von uD Psaicon am 19.06.2009 - 10:54:54
    VISIT:[ externer Link ] [ Xbox360 E-Sports Clan ]---[ Microsoft Xbox Clan des Monats Oktober 07 ]
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Soldat53b gelöschter User
    Leider will es nicht so ganz, ich hab da nur nen ministroch als bild... guck selbst: www.therockclan.de
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    Domme_09 Mitglied
    Registriert seit
    08.07.2008
    Beiträge
    267
    Beitragswertungen
    0 Beitragspunkte
    dem login-Button fehlt auf jeden Fall noch ne Klasse! Sonst kann das auch nicht klappen zwinker
    www.bvbsupporters-ms.de
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    annemarie gelöschter User
    hahaha


    ich bastel mal was
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    annemarie gelöschter User
    also, meine lösung basiert (wiedereinmal) auf jquery.

    Download: code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js

    die datei "jquery-1.3.2.min.js" muss via addheader() dem header hinzugefügt werden

    include\templates\user\boxen_login.htm

    hier musst du lediglich die labels vor die inputs setzen

    ich habe bereits alles so benannt wie es bei dir auch ist!

    am ende der login.htm setzt du dann das auszuführende jQuery script

    	
    	<script type="text/javascript">
    		$().ready(function() {
    			// wenn schon login gespeichert / vorausgefüllt vorliegt
    			if($("#password").val() != "" || $("#username").val() != "") {
    				//do nothing
    			} else {
    				// Sichtbar machen der labels wenn JS aktiv ist
    				$("#password_label").toggle(0);
    				$("#username_label").toggle(0);
    				// bei fokus			
    				$("#password").focus(function(){ 
    					// wenn std
    					if($("#password").val() == "") {
    						$("#password_label").fadeOut("slow");
    						//bei verlassen
    						$("#password").blur(function(){
    							//wenn leer
    							if($("#password").val() == "") {
    								//std setzen
    								$("#password_label").fadeIn("slow");
    							}
    						});
    					}
    				});
    				
    				// bei fokus			
    				$("#username").focus(function(){ 
    					// wenn std
    					if($("#username").val() == "") {
    						$("#username_label").fadeOut("slow");
    						//bei verlassen
    						$("#username").blur(function(){
    							//wenn leer
    							if($("#username").val() == "") {
    								//std setzen
    								$("#username_label").fadeIn("slow");
    							}
    						});
    					}
    				});
    
    			}		
    		})
    	</script>


    Hier kannste dir das alles mal anschauen zwinker

    flux.bplaced.net/fade_login.php
    0 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    Devil Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    Ja noch komplizierter für ihn.

    Du kannst das einfach eben per CSS machen. Die Klasse die du in der style.css angibst musst du auch bei deiner Loginbox angeben sonst weiss der nicht was er benutzen soll :p

    1x für Username
    1x für Passwort
    1x für Register
    1x für Lost Pw.

    PS:
    Cool, ein RIP Design.


    Zuletzt modifiziert von Devil am 21.06.2009 - 21:19:03
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    annemarie gelöschter User
    das wär viel zu simpel! verrückt
    0 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    annemarie gelöschter User
    narf, k

    in "inlude/templates/user/boxen_login.htm"

    dort username und passwort input ne id geben


    <input type ... id="username" ... >


    dann in das css deines designs und da

    
    #username, #password { width:103px; border:0px solid #000;}
    #username { background:url(bilder/login_1.gif); }
    #password { background:url(bilder/login_2.gif); }
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    Devil Mitglied
    Registriert seit
    02.02.2006
    Beiträge
    2.094
    Beitragswertungen
    21 Beitragspunkte
    Geht doch xD

    ;o)
    Wer zuletzt lacht, hat den schlechtesten Ping.
    0 Mitglieder finden den Beitrag gut.
  21. #21
    User Pic
    Soldat53b gelöschter User
    so jetzt funkst der button irgentwie nur sein hover nicht...

    ok und noch mehr nicht, aber ich probier da noch was aus


    Zuletzt modifiziert von Soldat53b am 23.06.2009 - 15:46:40
    0 Mitglieder finden den Beitrag gut.
  22. #22
    User Pic
    Soldat53b gelöschter User
    So jetzt funkst alles bis auf das Nickname Feld...

    naja bei Komatiblilitätsmodus des I-net Explorers gehts, sosnt bei dem und beim Firefox bleibt der kasten weiß... weiß jemand warum?
    0 Mitglieder finden den Beitrag gut.
  23. #23
    User Pic
    annemarie gelöschter User
    www.ilch.de/forum-showposts-37198.html#260005

    bis jetzt sehe ich nicht das sich auf deiner HP was getan hätte.

    mach mal die genannten änderungen
    0 Mitglieder finden den Beitrag gut.
  24. #24
    User Pic
    Soldat53b gelöschter User
    hab ich gemacht, und bis auf das genannte ist funkst auch alles....
    0 Mitglieder finden den Beitrag gut.
  25. #25
    User Pic
    annemarie gelöschter User
    gehe ich eigentlich noch auf die richtige page?

    wie war nochmal deine URL? @ soldat
    0 Mitglieder finden den Beitrag gut.
  26. #26
    User Pic
    Soldat53b gelöschter User
    www.therockclan.de, also ich weiß nicht ob du richtig guckst aber rechts oben ist die loginbox,

    und nicht vergessen das erste da ist nur ne enterpage ^^
    hab schon einige erlebt die nicht wussten das das dort ne ani ist und die einfach auf weiter klicken mussten ^^
    0 Mitglieder finden den Beitrag gut.
  27. #27
    User Pic
    annemarie gelöschter User
    du solltest nicht nur dem nickname input die klasse log2 geben, dann gehts auch zwinker
    0 Mitglieder finden den Beitrag gut.
  28. #28
    User Pic
    Soldat53b gelöschter User
    eh nickname hat log1... und was sollte das denn noch haben?

    bei mir ist das so wie bei uD Psaicon wenn ich mich nicht versehe


    Zuletzt modifiziert von Soldat53b am 23.06.2009 - 22:41:23
    0 Mitglieder finden den Beitrag gut.
  29. #29
    User Pic
    annemarie gelöschter User
    du solltest dem nickname input die klasse log2 geben, dann gehts auch Zwinker


    Zuletzt modifiziert von annemarie am 23.06.2009 - 22:42:43
    0 Mitglieder finden den Beitrag gut.
  30. #30
    User Pic
    Soldat53b gelöschter User
    dein wunsch war mir befehl...
    ^^

    Vielen dank an alle hier ^^
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten