Ergebnis 1 bis 3 von 3

Thema: Mit :target Login form öffnen

  1. #1
    Fortgeschrittene/r
    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard Mit :target Login form öffnen

    Morgen zusammen,

    ich habe ein problem. Ich möchte wenn man auf ein verlinktes Bild klickt, dass sich ein Loginbereich öffnet und wenn man dann auf das kreuz klickt dieses wieder schließt.

    Ich habe schon einiges ausprobiert aber ich weiß nicht warum das nicht funktioniert..

    Anbei meine Dateien:

    HTML-Code:
     <a class="login-open" href="#loginauf" title ="Log-In"><img src="login.jpg"></a>
                <div id="loginbereich" class="login">
                    <form method="post" >
                    <img src="profile.jpg"><br>
                    <label for="benutzer">Benutzername:</label>
                    <input type="text" name="loginname" id="benutzer">
                    <br><br>
                    <label for="password">Passwort:</label>
                    <input type="password" name="loginpassword" id="password">
                    <br><br><input type="submit" name="logindatensenden" value="Log In!">
                    <a class="login-close" id="loginzu" href="#loginzu" title="schließen">X</a>
                </form>
            </div>
            
    Code:
    /*Login-Bereich*/
    
    /*Loginpic*/
    a.login-open{
    position: absolute;
    right: 540px;
    top: 0px;
    }
    
    a.login-open img
    {
        height: 42px;
        border: 2px solid cyan;
        border-top:none;
        transition: all 1s ease-in;
    }
    
    a.login-open img:hover
    {
        opacity: 0.7;
        
    }
    div.login
    {
        position: absolute;
        top: 100px;
        left: 500px;
        background-color: white;
        height: 500px;
        width: 800px;
        padding: 10px 10px 10px 10px;
        border: 3px solid cyan;
    }
    
    div.login img
    {
        height: 300px;
        padding-left: 250px;
        
    }
    
    .login label
    {
        position: relative;
        top: 50px;
        left: 230px;
    }
    .login input[type="text"]
    {
        
        height: 30px;
        border: 2px solid black;
        text-indent: 5px;
        position: relative;
        top: 50px;
        left: 230px;
    }
    
    .login input[type="password"]
    {
        
        height: 30px;
        border: 2px solid black;
        text-indent: 5px;
        position: relative;
        top: 50px;
        left: 267px;
    }
    .login input[type="submit"]
    {
        padding: 10px 10px 10px 10px;
        background-color: aqua;
        border: 2px solid black;
        position: relative;
        top: 60px;
        left: 400px;
    }
    
    a.login-close
    {
        position: absolute;
        right: 40px;
        top: 70px;
        font-size: 25pt;
        background-color:red;
        padding: 5px;
        border: 3px solid orange;
        text-decoration: none;
        color: white;
    }
    
    #loginbereich input[type="submit"]:hover{
     box-shadow: 1px 3px 1px 1px gray;
    cursor: pointer;
    
    }
    
    #loginauf:target #loginbereich
    {
        display: block;
    }
    #loginzu:target #loginbereich
    {
        display:none;
    }
    Freue mich auf eure Hilfe!

    Stef
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Stef (17.07.2016 um 10:46 Uhr)

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Mit :target Login form öffnen

    CSS GEÄNDERT
    Code:
    #loginauf:target 
    {
        display: block;
    }
    #loginauf
    {
        display:none;
    }
    HTML GEÄNDERT
    Code:
    <div id="loginauf" class="login">
    Du solltest besser input mit :checked nutzen.

  3. #3
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard AW: Mit :target Login form öffnen

    Hey,

    vielen Dank, funktioniert alles.

    input mit checked ?

    Eine Frage:
    Mit dem css teil sagt man ja, wenn das verlinkt bild geklickt ist dann soll sich die loginform öffnen. Und das der #loginauf teil (die loginform) erst dargestellt wird wenn man das verlinkte Bild klickt.

    Nun aber, was ist denn mit dem Kreuz zum abbrechen. Wenn man dieses jetzt klickt dann wird die loginform nicht mehr dargestellt.

    Ich tuh dieses Kreuz zum abbrechen aber garnicht ansprechen.. warum schließt sich dann trotzdem die loginform ?

    Stef

Ähnliche Themen

  1. htacess login form
    Von guuls im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 25.05.2011, 11:51
  2. Links,Dateien in neuem Browser öffnen (Alt target="blan
    Von Plone_N00b im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 15.10.2007, 11:32
  3. form action"seite.php" in iframe öffnen
    Von jojo87 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.08.2007, 16:28
  4. form in iframe öffnen
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 14.01.2005, 16:19

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •