kostenloser Webspace werbefrei: lima-city


JQuery slide - Problem

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    HI
    Ich habe ein JQuery slide auf meiner Seite:
    <div  class="eintrag" style="width:950px;margin-left:300px;">
    <div style="background-image:url(DLT.png);padding-left:10px;"><b><u>Eintrag ins Gästebuch machen:</u></b></div>
    
    <div class="eintrag" style="style="background-image:url(DLM.png);color:black;padding-left:10px;margin-top:10px;width:950px;text-align:left;overflow:auto;margin-left:2px;">
    <center>
    <form name="gbookpost" activate="" method="Post">
    <Textarea style="background-color:F07800;color:000000;" cols="80" rows="7" name="text"></textarea>
    <br>
    <input type="submit" value="abschicken">
    <input type="reset" value = "Textfeld Leeren">
    </div>
    
    <input type="Button" class="toggle" value="neuen Eintrag machen"/>
    </center>
    </form>
    
    <hr style="color:orange;"></br>
    </div>
    </div>


    Jquery ist nat. eingebunden und der JQuery tag/code">Code im Head siht so aus:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
    $("input.toggle").click(function(){
    $(this).prev("div.eintrag").slideToggle("slow")
    });
    });
    </script>


    So das ganze klappt recht gut (einfahren und ausfahren) doch wenn ich folgendes ändere um den neuen Eintrag button nicht mehr zentriert zu haben gehts nichtmehr.
    div  class="eintrag" style="width:950px;margin-left:300px;">
    <div style="background-image:url(DLT.png);padding-left:10px;"><b><u>Eintrag ins Gästebuch machen:</u></b></div>
    
    <div class="eintrag" style="style="background-image:url(DLM.png);color:black;padding-left:10px;margin-top:10px;width:950px;text-align:left;overflow:auto;margin-left:2px;">
    <center>
    <form name="gbookpost" activate="" method="Post">
    <Textarea style="background-color:F07800;color:000000;" cols="80" rows="7" name="text"></textarea>
    <br>
    <input type="submit" value="abschicken">
    <input type="reset" value = "Textfeld Leeren">
    </div>
    </center> <!-- hier ist das center jetzt doch dann klappts nichtmehr -->
    <input type="Button" class="toggle" value="neuen Eintrag machen"/>
    <!-- hier war das center und da hats geklappt-->
    </form>
    
    <hr style="color:orange;"></br>
    </div>
    </div>


    Ich möchte diesen button nähmlich nicht minimiert sondern linksbündig haben.

    Hoffe ihr wisst was ich da machen kann!

    MFG
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Ich kann mir es nicht anders erklären:
    Falsche HTML-Struktur.
    Schau, dass deine div-Elemente so gebaut sind, das sind richtig ineinander und mit anderen HTML-Elementen verschachtelt sind.
    Kannst du einen Link posten, auf welcher Seite du rumexperimentierst?
    Habe gerade keine Vorstellung, nur die Idee ein zusätzliches div-Elemente zu nehmen und die Positionierung über text-align zu machen.
    Gruß,
    dex (qap2-Team)
  4. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    mmm ich experimentiere mom lokal... (geht schneller)

    Aber ich habs dir mal hochgeladen:
    (allerdings nur html also ohne die gästebuch.php funktion aber das ist egal)
    -->http://programtools.lima-city.de/jquery_experiment/index.html

    Hoffe das hilft dir weiter mir zu helfen xD
    MVG
  5. Ersetz doch mal diese Zeile
    $(this).prev("div.eintrag").slideToggle("slow")
    dann mit dieser:
    $(this).prev("center").prev("div.eintrag").slideToggle("slow")
  6. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    Danke aber da tut sich leider garnix.
    Bin grad n bissel ratlos...
    MFG
  7. Hi,

    wie schon geschrieben solltest du die Reihenfolge der Tags mal überdenken. Das Tag, welches zuletzt geöffnet wurde sollte dann als erstes geschlossen werde.
    Ich habe die Sache mal mit float:left umgebaut. Der folgende Code funktioniert bei mir im FF und IE8:
    <DIV style="WIDTH: 950px; MARGIN-LEFT: 300px" class=eintrag>
    <DIV style="BACKGROUND-IMAGE: url(DLT.png); PADDING-LEFT: 10px"><B><U>Eintrag 
    ins Gästebuch machen:</U></B></DIV>
    <CENTER>
    <FORM method=post name=gbookpost activate="">
    <DIV style="style: " class=eintrag 
    background-image:url(DLM.png);color:black;padding-left:10px;margin-top:10px;width:950px;text-align:left;overflow:auto;margin-left:2px;?>
    <TEXTAREA style="BACKGROUND-COLOR: #f07800; COLOR: #000000" rows=7 cols=80 name=text></TEXTAREA> 
    <BR>
    <INPUT value=abschicken type=submit> 
    <INPUT value="Textfeld Leeren" type=reset> 
    </DIV>
    <INPUT class=toggle style="float:left;" value="neuen Eintrag machen" type=button> 
    </FORM>
    </CENTER>
    <br>
    <HR style="COLOR: orange">
    <BR></DIV>
    Ob es optisch nun ganz genau so ist, wie du willst, weiß ich natürlich nicht.

    Gruß
    Manni
  8. Idee: der Firefox hat manchmal Proleme mit inline-CSS in Verbindung mit Class-Definitionen. Style="XXX" in eine Classdefinition zu ändern könnte helfen.

    FF
  9. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    ok vielen dank
    kann den code aber leider nicht testen, da man im Textfeld / codefeld nicht den gesammten inhalt kopieren kann. da iss wohl irgendein Fehler ;)
    werd bis morgen warten und dann sagen obs klappt! MVG
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!