Link soll im div in der Mitte stehen

[andyNail]

Hallo zusammen

auf meiner Seite sollen Links in einer Voransicht angezeigt werden und das bitte in diesem div zentriert. Denn das div soll sich dann mit einem weißen Hintergrund über Teile des Inhalts des Formulars setzen um den Llink anzuzeigen und dann wäre mir das zentriert schon am liebsten:

#TestLink { font-family: 'Times New Roman'; font-size:14pt; color:#000; text-decoration: none; text-align:center; padding-left:10px; padding-right:10px; display:block; white-space:nowrap; line-height:40px; outline:none; }  
#TestLink:hover { background-image:url('Pictures/Linkauswahl.jpg'); background-repeat:repeat-x; background-color:#66fbfb }  

<div id="TestArea" style="position:absolute; width:385px; height:345px; left:205px; top:5px; z-Index:2; vertical-align:middle; display:table-cell; visibility:hidden; background-color:#000">  
<div style="position:absolute; right:20px; top:20px"><a href="#" onclick="javascript:document.getElementById('TestArea').style.visibility ='hidden'">Schließen</a></div>  
<a id="TestLink"></a>  
</div>  

Doch irgendwie will das nicht funktionieren. Denn der Link sitzt weiterhin noch am oberen Rand. Also was ist dann bitte zu tun?

Über alle Bemühungen zur Hilfe würde ich mich sehr freuen und auch schon jetzt meinen Dank aussprechen. Denn es wäre schon eine geniale Sache das so gestalten zu können.

Also vielen Dank mit Gruß Andreas

[Quincunx]

Hallo Andreas

auf meiner Seite sollen Links in einer Voransicht angezeigt werden und das bitte in diesem div zentriert. Denn das div soll sich dann mit einem weißen Hintergrund über Teile des Inhalts des Formulars setzen um den Llink anzuzeigen und dann wäre mir das zentriert schon am liebsten:

wenn hier das umschließende <div id="TestArea"> visibility: hidden hat… ist nichts zu sehen!

So wird der Inhalt des divs zumindest vertical und horizontal zentiert.

#TestArea {  
  display: table-cell;  
  width: 385px;  
  height: 345px;  
  vertical-align: middle;  
  visibility: visible;  
  background-color: Black;  
  text-align: center;  
}

Das html reduziert ohne onclick und (unnötige) inline style Elemente.

<div id="TestArea">  
  <a href="#TestLink">Schließen</a>  
  <a id="TestLink"></a>  
</div>

Wenn ich das absolute positionieren müsste, würde ich es in ein anderes div packen:

#group {  
  position: absolute;  
  left: 205px;  
  top: 50px;  
}  
#TestArea {  
  display: table-cell;  
  width: 385px;  
  height: 345px;  
  vertical-align: middle;  
  visibility: visible;  
  background-color: Black;  
  text-align: center;  
}

<div id="group">  
  <div id="TestArea">  
    <a href="#TestLink">Schließen</a>  
    <a id="TestLink"></a>  
  </div>  
</div>

gruesse qx

[andyNail]

Hallo

und alles klar man muss es in 2 divs trennen. Das wusste ich ja nicht und sieht für mich auch merkwürdig aus das man zum richtigen positionieren und anzeigen des Bereichs zwei divs braucht. Und der Bereich muss ja auch erst einmal ausgeblendet sein, da er ja dann über den Eingabefeldern stehen wird.

Aber jetzt funktioniert ja alles einwandfrei und ich kann mich nur sehr dafür bedanken.

Also vielen Dank für die Bemühungen mit Gruß Andreas