Pseudo-Fenster mit CSS darstellen?

Status
Nicht offen für weitere Antworten.
th23

th23

Mitglied
Hallo,

ich habe mich schon durch eine ganze Menge Code und Beispiele gelesen, habe aber das richtig noch nicht gefunden... vielleicht auch weil ich einfach nicht genau weiss wonach ich suchen soll :(

Also ich möchte folgende Darstellung: Zunächst soll nur ein Text in einem Rechteck dargestellt werden
Code: 
<div style="border:solid 1px;">Test</div>

Dieser Text ist als Link ausgestaltet und soll beim anklicken ein Pseudo-Fenster öffnen, das sich über den Text selbst legt. Dabei soll es je nach Größe auch das verdecken, was unterhalt des "Test" Kästchens liegt, halt wie ein Fenster ;)

Absolute Angaben machen es bei mir leider nicht, da der Text an unterschiedlichen Stellen im Browser auftauchen kann und das Fenster halt immer über dem "Test" Text liegen soll...

Vielleicht kann mir jemand weiterhelfen! Bin auch schon für jeden Link / Tip für Stichworte einer Suche dankbar...

th23
 
Hier ein schnelles Beispiel für den Firefox:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
<title>Test: Popup</title>
<style type="text/css" media="screen">
    .popup div div {
        display:none;
    }
    .popup a:active + div > div, .popup a:focus + div > div {
        display:block;
    }
    .popup > div {
        display:block;
        position:relative;
        overflow:visible;
    }
    .popup div div {
        position:absolute;
        top:0;
        left:0;
        overflow:visible;
        border:1px #000 solid;
        background:#eee;
        padding:5px;
    }
</style>
</head>
<body>
<div class="popup">
<a href="#">Popup</a>
<div>
<div>Lorem ipsum ... eu leo.
    Donec non elit.
    Nullam tortor.</div>
</div>
</div>
<p>Morbi fringilla ... mi urna sed ipsum.
    Mauris laoreet auctor dolor.</p>
<div class="popup">
<a href="#">Popup</a>
<div>
<div>Lorem ipsum ... eu leo.
    Donec non elit.
    Nullam tortor.</div>
</div>
</div>
<p>Morbi fringilla ... mi urna sed ipsum.
    Mauris laoreet auctor dolor.</p>
</body>
</html>
Bei dem IE wirst Du um mieses Markup (langen Text im Link verstecken) oder JavaScript vermutlich nicht herum kommen.

Gruß hpvw
 
Hi,

Danke für das Beispiel...genauso stelle ich es mir vor (also konnte man wenigstens meine Beschreibung verstehen) ;)

Ohne das es im IE funktioniert kann ich es leider nicht verwenden, dazu werde es zu viele Leute brauchen die nur den IE zur Verfügung haben...

Gibt es evtl. noch einen anderen Ansatz?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück