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

Anfängerproblem - Positionierung

E

eddcapone

Neues Mitglied
Hallo,

ich versuche ganz einfach zwei Buttons nebeneinander zu platzieren, alle Elemente sollen sich mit dem scrollen mitbewegen (also fixed sein).

Ich habe es so gemacht, das wenn man auf einen Button klickt, sich ein Panel über dem Button öffnet und sich wie eine alte Schriftrolle nach unten ausrollt, soweit funktioniert das auch sehr gut, jedoch bewegt sich einer der Buttons ständig mit nach unten sobald ich die Rolle ausrolle.

ich habe zum besseren Verständnis ein Video hochgeladen:

html Code:

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style/standard_style.css"/>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="scripts/jquery.js"></script>

            <title>Chat Test</title>
        </head>

    <body>

        <div class="top">
            <div class="panel" id="panel-two">
                <br>
                <ul>
                    <li><a href="learn/global_vars/index.php" >Globale Variablen</a></li>
                    <li><a href="learn/slide_panel/index.html" >Slide Panel</a></li>
                    <li><a href="learn/input_field/index.html" >Inputfield</a></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
   
            <p>
                <div class="pull-me" id="pull-me-two">PULL HERE / CODE2</div>
            </p>
                <div class="panel" id="panel-one">
                <br>
                <ul>
                    <li><a href="learn/global_vars/index.php" >Globale Variablen</a>
                    <li><a href="learn/slide_panel/index.html" >Slide Panel</a>
                    <li><a href="learn/input_field/index.html" >Inputfield</a>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <p>
                <div class="pull-me" id="pull-me-one">PULL HERE / CODE1</div>
            </p>
        </div>

        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </body>
</html>

CSS-Datei:

Code: 
.top {
    z-index:0;
    position:fixed;

    margin-top:-10px;

    height:42px;
    width:99%;

    background-color:red;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
}

/*--------------Dynamische Elemente--------------------------------------*/

.panel {
    display:none;        /* Ist am Anfang nicht sichtbar */

        background: #ffffbd;

        font-family:garamond,times-new-roman,serif;
        text-align:left;
        line-height:27px;
}

.top div
{
    display:block-inline;
}

.pull-me {
        position:relative;

        font-family:arial,sans-serif;
        font-size:14px;

        color:#ffffff;
        background:#cc0000;
        text-decoration:none;

        -moz-border-bottom-left-radius:5px;
        -moz-border-bottom-right-radius:5px;
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
}

.pull-me p { text-align:center; }

#panel-one {
    z-index:1;
    margin-left:24px;

    height:300px;
    width:200px;
}

#panel-two {
    z-index:1;
    margin-left:600px;

    height:300px;
    width:200px;
}

#pull-me-one {
    z-index:1;
    margin-top:-18px;
        margin-left:46px;

        width:150px;
        height:20px;
}

#pull-me-two {
    z-index:1;
    margin-top:-18px;
        margin-left:624px;

        width:150px;
        height:20px;
}

Jquery Script:
Code: 
$(document).ready(function(){
        $("#pull-me-one").click(function(){
                $("#panel-one").slideToggle("slow");
            });

    $("#pull-me-two").click(function(){
                $("#panel-two").slideToggle("slow");}
        );});

Kann mich bitte jemand verbessern ?
Vielen Dank im voraus für eure Hilfe!
Gruß eddcapone
 
Zuletzt bearbeitet:
Ich versuche es nochmal genauer zu erklären. Ich möchte ganz einfach das die beiden Buttons an der roten Leiste oben befestigt bleiben, wenn der User darauf klickt soll sich die Rolle ausfahren.
Gruß eddcapone
 
Das ist von der gesamten Code-Struktur her schlecht. Navigation mit Divs statt Liste, Attribut position: relative/fixed verwendet, fehlerhafte Styles (display: block-inline), Elemente pixelgenau verschoben. Keine Lust, mich da hineinzuversetzen.

Lösch das Ganze und bau erstmal eine vernünftige Navi mit verschachtelten <ul> und einfachem Hover-Effekt in CSS. Dafür gibt es genügend Tutorials im Netz, und dabei wirst du dann wahrscheinlich auch die Lösung für dein Problem finden.
 
Lösch das Ganze und bau erstmal eine vernünftige Navi mit verschachtelten <ul>
Zum Vergrößern anklicken....
ok hab ich gemacht, hier mein aktueller Code (nur der Problem relevante Abschnitt):

index.html
HTML: 
        <div class="top">
 
            <ul>
                <li class="oben">
                    <div class="panel" id="panel-two">
                        <br>
                        <ul>
                            <li><a href="learn/global_vars/index.php" >Globale Variablen</a></li>
                            <li><a href="learn/slide_panel/index.html" >Slide Panel</a></li>
                            <li><a href="learn/input_field/index.html" >Inputfield</a></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

                    <p>
                        <div class="pull-me" id="pull-me-two">PULL HERE / CODE2</div>
                    </p>
                </li>

                <li class="oben">
                    <div class="panel" id="panel-one">
                        <br>
                        <ul>
                            <li><a href="learn/global_vars/index.php" >Globale Variablen</a>
                            <li><a href="learn/slide_panel/index.html" >Slide Panel</a>
                            <li><a href="learn/input_field/index.html" >Inputfield</a>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

                    <p>
                        <div class="pull-me" id="pull-me-one">PULL HERE / CODE1</div>
                    </p>
                </li>
            </ul>

        </div>
style.css
Code: 
.oben {
    margin-top:-20px;
    display:inline-block;
    list-style-type:none;
}

.top {
    z-index:0;
    position:fixed;

    margin-top:-10px;

    height:42px;
    width:99%;

    background-color:red;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
}

/*--------------Dynamische Elemente--------------------------------------*/

.panel {
        display:none;        /* Ist am Anfang nicht sichtbar */
        background: #ffffbd;
        background-size:90% 90%;

        font-family:garamond,times-new-roman,serif;
        text-align:left;
        line-height:27px;
}

.pull-me {

    font-family:arial,sans-serif;
        font-size:14px;

    color:#ffffff;
        background:#cc0000;
    text-decoration:none;

        -moz-border-bottom-left-radius:5px;
        -moz-border-bottom-right-radius:5px;
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
}

.pull-me p { text-align:center; }

#panel-one {
    z-index:1;

    height:300px;
    width:200px;
}

#panel-two {
    z-index:1;

    height:300px;
    width:200px;
}

#pull-me-one {
    z-index:1;

        width:150px;
        height:20px;
}

#pull-me-two {
    z-index:1;

        width:150px;
        height:20px;
}

Leider bleibt das Problem bestehen, wenn ich eine Rolle ausfahren lasse, verschiebt sich der andere Button ebenfalls nach unten, so als wäre er relativ zum anderen Button anstatt relativ zur oberen Leiste ??!

PS: Gibt es einen Weg etwas mehr raum zwischen den beiden Buttons zu machen ? Die einzige Methode die ich kenne wäre ein weiteres list item zu erstellen und ein paar unauffälligen Zeichen dazwischen zu schreiben, gibt es eine bessere Methode?

Ich hoffe jemand kann mir helfen

Gruß eddcapone

Edit: Ich habe alles mir erdenkliche versucht und glaube ich das dies in html nicht möglich ist, funktioniert das überhaupt was ich vorhabe?
 
Zuletzt bearbeitet:
Lösch das Ganze und bau erstmal eine vernünftige Navi mit verschachtelten <ul> und einfachem Hover-Effekt in CSS
Zum Vergrößern anklicken....
Das habe ich bereits und ist keine Herausforderung mehr, deswegen versuche ich mein Wissen ja jetzt zu erweitern indem ich dieses Ziel umsetzen versuche.

Kann mir jemand der bereits viel Erfahrung hat kurz sagen ob mein Vorhaben überhaupt realisierbar ist?
Im Grunde muss ich nur dafür sorgen das die Buttons relativ zum div sind, anstatt relativ zueinander, aber wo liegt mein Fehler?

Gruß eddcapone
 
eddcapone schrieb:
Das habe ich bereits und ist keine Herausforderung mehr, deswegen versuche ich mein Wissen ja jetzt zu erweitern indem ich dieses Ziel umsetzen versuche.
Zum Vergrößern anklicken....

Also wenn ich mir den Code so anschaue, ist für dich auch einfaches HTML immer noch eine Herausforderung, von der Liste mal ganz zu schweigen. Lass mal den W3C Validator über die Seite laufen.

Ich sehe da nirgendwo einen Button, und vom Video ausgehend kann ich eigentlich nur mutmaßen, dass du eine horizontale Dropdown-Navigation bauen möchtest. Das macht man mit einer verschachtelten <ul>, wo auf der ersten Ebene die Hauptmenüpunkte und auf der zweiten die Untermenüpunkte liegen. Die Menüpunkte sollten auschließlich Hyperlinks sein, Divs oder <p>-Container haben da nichts zu suchen. Wenn du die Links gerne wie Buttons stylen möchtest, gib ihnen ein display:block.

Hättest du meinen Rat vom Donnerstag befolgt, wäre das Problem längst erledigt.
 
Also wenn ich mir den Code so anschaue, ist für dich auch einfaches HTML immer noch eine Herausforderung.
Zum Vergrößern anklicken....
Da liegst du vollkommen falsch, ich habe den HTML Kurs bei Codecademy zu 100% abgeschlossen und verstanden und in der Ausbildung habe ich ebenfalls einige Basics gelernt... was genau ist an meinem Code denn so komisch? Woran störst du dich?!

Ich sehe da nirgendwo einen Button
Zum Vergrößern anklicken....
Wie würdest du das kleine rote rechteckige div dann nennen, wenn es kein Button ist???

vom Video ausgehend kann ich eigentlich nur mutmaßen, dass du eine horizontale Dropdown-Navigation bauen möchtest
Zum Vergrößern anklicken....
Um es nochmal zu erklären.. Ich möchte ganz einfach das die beiden Buttons (oder wie Buttons bei dir heißen) an der roten Leiste oben befestigt bleiben. Wenn der User darauf klickt soll sich die Rolle ausfahren, wie im Video zu sehen.
Mein Problem ist einzig und allein das jedesmal wenn ich einen der Buttons (oder wie Buttons bei dir heißen) drücke und sich die "Rolle" ausrollt, das der andere Button dann ebenfalls nach unten animiert wird (wie im Video zu sehen).

Hättest du meinen Rat vom Donnerstag befolgt, wäre das Problem längst erledigt
Zum Vergrößern anklicken....
Ich habe deinen Rat befolgt und mein Problem hat sich nicht erledigt.

PS: W3Validator? Noch nie gehört, inwiefern soll das der Lösung meines Problems dienlich sein?
 
Zuletzt bearbeitet:
Danke dir, ok ich habe den Code gecheckt und zwei Fehler gefunden.

Ich hatte im Code zwei Fehlerhafte <p> tags drin stehen.

Code: 
<p>
         <div class="pull-me" id="pull-me-two">PULL HERE / CODE2</div>
</p>

Ich habe diese <p> tags herausgelöscht, da sinnfrei.

Aber wie löse ich jetzt am besten mein Problem? Ist das überhaupt möglich?
PS: hier habe ich das mit der Rolle und dem Button gelernt:
http://www.codecademy.com/de/course...C6/2/4?curriculum_id=50a3fad8c7a770b5fd0007a1

Ich habe nochmal ein neues kurzes Video hochgeladen, mit meinem neuem Code:
 
Zuletzt bearbeitet:
Hmm, du gibst nicht auf, oder? ;)

Also schön, das Video zeigt zwei Click-Events. Beim ersten Event rollen beide Container gleichzeitig nach unten. Beim zweiten Events rollt sich der jeweils angeklickte Container nach oben auf.

Kann es sein, dass du das erste Event auf $('.panel') ausführst? Zeige doch mal bitte den jQuery Code dafür.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben