• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Login slidetoggle..

TerraX

Mitglied
Hey :)
Versuche gerade ein Login Slide Toggle zu machen. Das jquery hat funktioniert war ja auch nicht so schwer nur mein css funktioniert noch nicht so ganz^^

Also:
Problem 1:
Wenn ich auf meine Seite gehe wird der "content" schon angezeigt obwohl display: none; ist!

Problem 2:
Der content soll nicht neber sondern direkt unter dem Login Button angezeigt werden!

Problem 3:
Das Bild vom Slider liegt über dem Slide Content der reinkommt.

HTML:
<div id="header"> <!--Habe den jetzt mal im css hier weggelassen-->
            <div id="header_in">
                <ul id="navi">

                    <li><a href="index.php">Home</a></li>
                    <li><a href="#">Iasda</a></li>
                    <li><a href="#">asda</a></li>
                    <li><a href="#">fffffff</a></li>
                    <li id="login_content">
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                            sed diam nonumy eirmod tempor invidunt ut labore et
                            dolore magna aliquyam erat, sed diam voluptua. At
                            vero eos et accusam et justo duo dolores et ea rebum.
                            Stet clita kasd gubergren, no sea takimata sanctus est
                        </p>
                    </li>
                    <li><a href="#" class="button" id="login"/>Login</a></li>

                  
                    </ul>
            </div>
        </div>
Code:
#header_in {
    width: 1000px;
    height: 50px;
    margin: 0px auto;
}
#navi {
    margin: 0px;
      padding: 18px 20px 15px;
}
#navi li {
    display: inline;
    list-style-type: none;
    margin: 0 20px 0 0;
}
#login_button {
    float: right;
}
.button {
    float: right;
    width:80px;
    background-color:#469ef5;
    color:#ffffff;
    height:26px;
    line-height:26px;
    text-decoration:none;
    text-align:center;
}
.button:hover {
    background-color:#4197ee;
    color: white;
}
#login_content {
    float: right;
    width:200px;
    background-color: #469ef5;
    display:none;
    z-index: 999px;
}
 

Cheffchen

Senior HTML'ler
Hallo,

ah so werden wir freunde auch ohne Glaskugel, die gibts nur zu weihnachten.

zu 1:
wurde ja schon gesagt wie so, weg bekommst in dem das schwerer wichtest in deiner style.css
andere mal #login_content in li#login_content damit wird das wichtiger :O)

zu 2:
das geht nicht, da dein ansatzt leider schon falsch ist.
mach den #login_content als eigenes div in das #login_content damit kannst das beim öffnen mit position absolute positionieren wenn alle li vorher relativ bekommen haben.

zu 3:
dann gib der geänderten li#login_content z-index: 5;

Cheffchen
 

TerraX

Mitglied
Ok danke schonmal Problem 1 funktioniert! :D
Nun zu Problem 2.. Ich habe das jetzt versucht/ vll auch falsch verstanden aber aufjedenfall funktioniert es nicht ;)

Jetzt wird er rechts neben dem Button "gedroppt" statt unter dem Button^^

Habe den content in eine extra div getan!
HTML:
<li id="login_content">
                        <div ><p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                            sed diam nonumy eirmod tempor invidunt ut labore et
                            dolore magna aliquyam erat, sed diam voluptua. At
                            vero eos et accusam et justo duo dolores et ea rebum.
                            Stet clita kasd gubergren, no sea takimata sanctus est
                        </p></div>
                    </li>
                    <li><a href="#" class="button" id="login"/>Login</a></li>
Code:
li#login_content {
    position: relative;
    float: right;
    width:200px;
    background-color: #469ef5;
    display:none;
    z-index: 5px;
}
Code:
#login_content {
   position: absolute;
   float: right;
   margin: 0px;
}
Code:
#navi li {
   position:relative;
   display: inline;
  list-style-type: none;
  margin: 0 20px 0 0;
}
 

Cheffchen

Senior HTML'ler
Hallo,

ja falsch verstanden
eher so
HTML:
<li><a href="#" class="button" id="login"/>Login</a>
  <div id="login_content">Lorem ipsum dolor sit amet, consetetur sadipscing.....</div>
</li>
Cheffchen
 

TerraX

Mitglied
Srry das ich jetzt erst wieder antworte aber mein PC war kaputt -.-

Habe jetzt noch 2 Probleme die ich nicht hinbekommen habe ._.

1. Problem:
Wenn der Slider ein Bild wechselt ist der Login Content kurz unter dem Bild!

2. Problem:
Im IE Safari und Chrome wird das Slider Bild mit nach unten geschoben wenn ich die Login div ausfahre :( Auch hier habe ich keine Lösung gefunden ._.

Hoffe es findet wer was^^
 

TerraX

Mitglied
Funktioniert leider nicht :( Ändert sich garnix!

thecain: Das kapiere cich irgendwie nicht^^
 
Zuletzt bearbeitet:
Werbung:

Neueste Beiträge

Oben