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

Loginbox "ein- und ausfahren"

T

the_zoker_09

Mitglied
Hallo zusammen,
Ich möchte auf meiner Seite eine Login Box einbauen.
Nun sollte diese Login Box aber nicht zu auffällig sein, also z.B. eine Art 20*20 Box mit einem Pfeil drauf und wenn man darauf klickt, soll sich eine Login Box öffnen.
Also wie ein Dropdownmenü oder so etwas.

Ich habe hier mal mit Photoshop die zwei Zustände zusammengebastelt:
  • Loginbox "eingefahren"
loginbox1.jpg



  • Loginbox "ausgefahren"
loginbox2.jpg


Kennt da jemand eine fertige Login Box, die so ist, wie oben beschrieben uns sich so "verstecken" lässt?

Vielen Dank
the_zoker_09

PS: ich wusste nicht wie das Thema sonst hätte nennen sollen :D
 
Wie ein Dropdown - Du sagst es doch selbst schon wonach Du suchen musst. Du brauchst ein JavaScript, welches per onclick ein HTML-Element einblendet. Dafür braucht es nichts fertiges, das sind einige Zeilen JavaScript und etwas Anpassung im HTML- und CSS-Code die schnell gemacht sind. Beispiele für onlick-Eventhandler gibt es viele.
 
Aber verschwindet das Teil dann nicht immer, wenn die Maus weg ist? Ist vielleicht ein wenig unpraktisch. Ich würe es auch über Javascript lösen, schau dir mal den Accordion-Effekt von jquery an.
 
Kommt auf die Umsetzung an, kann auch stehen bleiben. Mit CSS 3 sind sogar Effekte wie schwebend ausziehbar, drehend und so weiter möglich, aber auch jetzt schon sind, wenn man IE ab Version 7 mit berücksichtigt, schon einige sehr gute Effekte mit Html und CSS umsetzbar.
Es muss nicht immer die ganze Jquery-Sammlung mit runtergeladen werden, nur weil man einen kleinen Effekt wie das aufklappen umsetzen will.
 
Man braucht dafür nicht mal jQuery sondern kann auch die nötigen Zeilen selbst in JavaScript schreiben. Ist nicht viel.
 
Also ich würde mir wünschen, ganz oben auf der Seite eine Leiste anzubringen, die immer mit scrollt, wenn man selbst scrollt.
Wenn man aber ganz oben auf der Seite ist, sollte der ganz oberste Bereich der Hauptseite (die ja darunter liegt) nicht überdeckt sein, sonder um die Höhe der Leiste nach unten verschoben sein.

Also wenn man ganz oben ist, sollte die Hauptseite, um die Höhe der Leiste herabgesetzt sein. (sonst würde die Leiste ja oben einen Bereich abdecken)

Ich hoffe das ist irgendwie verständlich.

Und auf dieser Leiste soll ganz rechts ein Button zu sehen sein (wie auf dem Bild im ersten Post), und wenn man auf diesen klickt, sollte sich das Login Menü öffnen und wenn man noch einmal drauf klickt, wieder schließen.

Eigentlich habe ich diese Funktion schon:
Code: 
$(document).ready(function(){
        $('#login-trigger').click(function(){
                $(this).next('#login-content').slideToggle();
                $(this).toggleClass('active');                                  

                if ($(this).hasClass('active')) $(this).find('span').html('▲')
                        else $(this).find('span').html('▼')
                })
});

Aber wie mache ich das mit der Leiste?

Kann mir jemand den CSS Code für diese Leiste geben?

Das wäre toll :D

Vielen Dank
the_zoker_09
 
Und wie mach ich das mit dem oberen Abstand?
Gibts da ne Methode, die sich auf jede x-Beliebige Seite hinzufügen lässt?
Ich habe nämlich auf meiner Homepage, ein phpBB Forum und auch ein Wordpress Blog laufen und da die einzelne Sache umzuschreiben.
Also quasi ein CSS oder so etwas, das die ganze Seite verschiebt.

Vielen Dank
the_zoker_09
 
Der Inhalt einer Seite fängt immer mit dem Body-Tag an. Wenn Du also etwas an oberster Stelle haben willst würde ich dort ansetzen.
Beispiel:
HTML: 
<body>
    <div id="topbar" style="position:fixed; top:0; left:0; height:1,3em; width:100%; border:1px solid red; z-index:10000; background-color:darkgreen; color:white;">
    Top Inhalt
    </div>

Obere Leiste mit rotem Rahmen, grünem Hintergrund und Schriftfarbe weiss und CSS-Angaben als Inlinestyle.

EDIT: Den Abstand des nächsten Elements erzeugst du in dem du dem nächst folgendem Element ein margin-top:1.3em mitgibst, da die Höhe des Div Topbar mit 1.3em angegeben wurde.
 
Ok vielen Dank.

Aber eine Frage hab ich noch.

Ich möchte diese Leiste einbauen:
Simple and effective dropdown login box - demo

Und ganz links möchte ich solche Buttons einfügen:
Cool CSS3 navigation menu - demo

Nur das die Buttons nicht rund, sondern eckig sein sollen.

Und ich möchte ganz links noch ein "hide" Button einbinden, mit dem man die Leiste auch "einfahren kann".

Hier ein Bild mit allen Sachen mit Photoshop zusammen gebastelt:
topbar4.jpg

Wie kann ich diese drei Sachen am besten verbinden?

Und wie baue ich diese Leiste so wie oben beschreiben ein?

Vielen Dank
the_zoker_09
 
Zuletzt bearbeitet:
Aber eine Frage hab ich noch.
Zum Vergrößern anklicken....
OK.
Ich möchte diese Leiste einbauen:
Simple and effective dropdown login box - demo
Zum Vergrößern anklicken....
Im Browser deiner Wahl den Sourcecode aufrufen und den entspechenden Abschnitt markieren und kopieren. Anschliessend in deiner Seite an entsprechnder Stelle einfügen. Das ist aber Javascript, ohne Javascript funktioniert das nicht.

Und ganz links möchte ich solche Buttons einfügen:
Cool CSS3 navigation menu - demo
Zum Vergrößern anklicken....
Das ist schon Frage 2.
Wie zuvor CSS und HTML aus der Seite rauskopieren und in deiner Seite einfügen.

Nur das die Buttons nicht rund, sondern eckig sein sollen.
Zum Vergrößern anklicken....
Das sind schon 3 Wünsche auf einmal.
Aus dem CSS die das Element UL raussuchen und dort die Attribute border-radius rausnehmen.

Und ich möchte ganz links noch ein "hide" Button einbinden, mit dem man die Leiste auch "einfahren kann".
Zum Vergrößern anklicken....
Kein Problem, wenn Du die anderen Sachen beherrscht.

Wo ist jetzt genau dein Problem?
Nur mal so am Rande gefragt: Was soll denn später das Login machen, weil da kommt ja dann noch ´ne Menge PHP dazu?
 
Vielen Dank schon mal Wustersoss,

Also ich weiss ja nicht, wie ich
1. die Leiste so wie oben beschrieben einfügen soll
2. Die Menü Buttons in die leiste bekomme

Und ich habe das Problem, dass ul und li bei beiden verwendet wird. Also zweimal definiert wird.

Und das mit dem Login System ist auch so eine Sache.
Eigentlich möchte ich irgendwann ein System programmieren, das dafür sorgt, wenn man sich registriert, mal auf alles Unterseiten (phpBB Forum, Wordpress etc.) gleichzeitig registriert ist. Und mit dem anmelden das gleiche.

Das wir noch viel Arbeit, aber vorerst möchte ich erst die Leiste einfügen.

Das andere kommt dann wenn ich mehr Zeit habe....

Ok kannst du mir sagen, wie ich das alles lösen kann?

Vielen Dank
the_zoker_09
 
Elemente positionierst du per Float nebeneinander. Wenn dir das alles noch Schwierigkeiten bereitet – ist ja keine Schande, ging uns allen nicht anders –, lies dich vielleicht erst mal weiter in die Materie ein.

- Quellensammlung

Das Problem für Helfer ist, dass eine „Wie geht das?“-Frage sehr unkonkret ist. Solche Formulierungen lassen sich oftmals nur mit einem halben Tutorial beantworten, was schlicht und ergreifend ein ziemlicher Aufwand ist und im Zweifel auch Dinge beinhaltet, die du schon kannst oder die anderswo erklärt werden. (Nicht sehr effizient.)

Besser ist es in der Regel, die genaue Stelle zu benennen, an der du gerade hängst. Das kann einfach dein Versuch (der Code) sein, die Elemente nach Wunsch zusammenzufügen. Dann haben wir was, mit dem wir arbeiten können. (Aber nutze das bitte nicht als Ausweg, dich nicht in die Sache einzufuchsen. ;))
 
Ich kann mich Mermshaus Äusserungen nur anschliessen, Es hilft Dir nichts, wenn du alles fertig präsentierst bekommst, weil du dann ja auch gleich jemanden beauftragen kannst deine Anforderungen, die gewiss nicht trivial sind, umzusetzen.

Du musst dich unbedingt mit den Elementen in HTML 4 beschäftigen und welche Funktion die haben. Du hast bei dem Beispiel welches von dir genannt wurde Elemente aus HtmL5 drin, die aufgrund das sie neu sind, nun mal nicht in allen Browsern funktionieren. Die muss man dann halt passend machen, was, wenn man die Grundlagen drauf hat keine grosse Sache ist.

Darüber hinaus benötigst du Wissen über die Stilangaben und deren Attribute, sprich CSS 2.1.

Es gibt hierzu unzählige Seiten im Internet, die dir dieses Wissen kostenlos vermitteln, sogar mit guten Beispielen.

Fang einfach an.
 
Vielen Dank euch beiden...

Ich bin gestern schon ins grübeln gekommen, dass ich mehr selber machen muss.

Leider bin ich noch Schüler und habe deshalb nicht so viel Zeit.

Aber mein innerer Schweinehund verlangt, dass ich die Sachen schnell fertig habe.

Und das ist schlichtweg die falsche Einstellung.

Ich versuche in Zukunft (wenn ich Zeit habe, sonst muss ich mich halt gedulden, bis ich wieder mehr davon habe) mehr selber zu machen und nur noch zu Fragen, wenn ich wirkliche Probleme habe.

Mein Hauptproblem ist zurzeit, dass bei den beiden Sachen die ich zusammenfügen will, beides mal ein ul und li vorkommt.

Ich möchte es aber gerne bei beiden ersetzen, da ich es noch anders wo auf der Seite nutzen möchte.

Also wie kann ich beide ul und li (jeweils unterschiedlich) abändern, so dass ich sie auf meiner Seite noch einmal verwenden kann?

Vielen Vielen Dank noch einmal euch beiden
Und noch einen schönen Abend
the_zoker_09
 
Die Frage ergibt in der Form einfach keinen Sinn. ul und li sind Elemente aus dem Dokumentkörper (body-Element). Die kannst du so oft verwenden, wie du willst.

Wahrscheinlich beziehst du dich auf CSS-Regeln für ul oder li? Da müsstest du dann eine Unterscheidung über beispielsweise Klassen treffen.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

            ul.demo1  {
                background: red;
            }

            ul.demo2  {
                background: blue;
            }

        </style>
    </head>

    <body>
        <ul class="demo1">
            <li>Demo1</li>
        </ul>

        <ul class="demo2">
            <li>Demo2</li>
        </ul>
    </body>

</html>

- SELFHTML: Stylesheets / CSS-Formate definieren / Zentrale Formate definieren

Ich weiß jetzt nicht, ob das Beispiel passt, aber das ist auch ziemlich genau das, was ich im letzten Post meinte. Es ist schwierig auf solche „Grundlagenfragen“ zu antworten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben