Ben: DIV relativ positionieren aber keinen Platzhalter

Hi allerseits,

folgendes Problem tut sich mir auf:
Ich habe eine Website mit Variablen Inhalt. Klickt man auf einen Link "suchen" so öffnet sich ein DIV welches bis dahin auf "hidden" gestellt war.
Soweit so gut.

Das DIV soll allerdings immer in der Nähe des Suchen-Links auftauchen. Da der Inhalt variabel ist muss ich das DIV also "position:relative;" setzen. In diesem Falle verhält es sich aber so, dass ein Platzhalter für das versteckte DIV angezeigt wird.
Es entsteht also eine riesen Lücke.

Wenn ich die Funktion "display" richtig verstehe ist sie dafür da um genau diesen Platzhalter entfallen zu lassen.
Das klappt aber nicht so richtig. Auf meiner Website verschieben sich Elemente und es bleiben immernoch kleine Lücken.

Wie kann ich das Problem lösen?

Danke und Gruß,
Benjamin

  1. Hi Benjamin,

    du hast aber nicht etwa display: hidden geschrieben, oder? Nehmen wir mal nicht an ;-)

    Eine wirklich passende Lösung können wir dir ohne genauere Beschreibung/ Quelltext kaum vorschlagen, aber vielleicht hilft dir das hier weiter:

    http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P50/

    Gruß
    Antipitch

    1. Hi, danke schonmal für deine Antwort.

      Ich hab natürlich nicht display:hidden geschrieben sondern visibility:hidden, wie es sich gehört ;-)

      Dank deinem Link konnte ich meine Seite etwas modifizieren.
      Es ist jetzt fast perfekt, ich bekomme es hin, dass das DIV an der richtigen Stelle hängt.
      Dies hab ich gemacht indem ich das DIV in den Link gesetzt habe, auf folgende Weise:
      <a>Linktext<div position:absolute;visibility:hidden>Suchfenster</div></a>

      Dies bewirkt denke ich, dass der Link nun das Elternelement des DIVs ist.

      Nur ändert sich nun folgendes:
      -Wenn ich in das Input Feld, welches im DIV ist klicke schließt sich das DIV wieder, wieso auch immer

      • Die Elemente im DIV sind total durcheinander und gehorchen nicht mehr auf span Anweisungen.

      Dies MUSS am Input Feld liegen, da der Fehler auch auftritt, wenn ich alle Scripts rausnehme, selbst wenn ich CSS rausnehme, und auch, wenn ich ein 2. Input Feld in das DIV setze.
      Was kann das sein?

      Hier der Script dazu:

      <span style="position:relative;top:-19px;">
      <a href="#" onclick="show('firmensuche')">suchen

      <div id="firmensuche" class="firmensuche" style="visibility:hidden;position:absolute;top:0px;left:60px;text-align:center;">
      <input type="text" id="suchwort" onkeyup="search('suchwort','ergebnis','1')" class="form">
      <span style="position:absolute;right:3px;bottom:0px;"><a href="#" onclick="hidd('firmensuche')">schließen</a></span>
      <div id="ergebnis"></div>
      <a href="#" onClick="fill('firmen_id','ergebnisse')">übernehmen</a>
      </div>
      </a></span><br>

      1. Problem soweit behoben. Sobald ich das DIV aus dem Link rausnehme und dafür in den Span setze klappt alles soweit.

        Nur noch ein kleiner Nervfaktor: Wieso springt der Browser beim ändern der visibility eines DIVs immer an den oberen Rand der Website?

        Ist das normal oder lässt sich auch das unterbinden?

        1. Problem soweit behoben. Sobald ich das DIV aus dem Link rausnehme und dafür in den Span setze klappt alles soweit.

          Warum machst du das nicht mit display?

          Nur noch ein kleiner Nervfaktor: Wieso springt der Browser beim ändern der visibility eines DIVs immer an den oberen Rand der Website?

          Nein das ist das Verhalten wenn du einen Link mit href="#" anklickst. Da du keinen Links willst kannst du auch ein x-beliebiges anderes Element verwenden.

          Struppi.