Variabel großes Fenster öffnen beim Anklicken eines links

[Klaus]

Hallo,
ich habe kurze Informationsblöcke auf einer Seite.
In jedem dieser Blöcke möchte ich über einen Link weiterführende Information
anzeigen. Dies soll in einem Fenster stehen, das neben dem angeklickten Link
aufgeht.
Das Fenster soll variable Größe haben, je nach Inhalt.
Meine Fragen:
Wie macht man dies am besten?
Habt Ihr ein Beispiel?
Wie schließt man am einfachsten ein derartiges Fenster?
Mit Dank
Klaus

[ChrisB]

Hi,

Wie macht man dies am besten?

Suchstichworte: CSS Popup, CSS Infobox

MfG ChrisB

[Klaus]

Hi,

Suchstichworte: CSS Popup, CSS Infobox

Schade, dass ich damit in Selfhtml nichts finde.
Über Go.... allerdings recht viel.

In dem über popup geöffneten Fenster kann ein weiterer link stehen.
Wie erreiche ich, dass das Fenster schließt, wenn der link darin angeklickt wird?

Gruß
Klaus

[Beat]

In dem über popup geöffneten Fenster kann ein weiterer link stehen.
Wie erreiche ich, dass das Fenster schließt, wenn der link darin angeklickt wird?

Indem du die Tatsache ausnutzt, dass nur ein Element fokusiert und damit Gegenstand für die :target Pseudo-Eigenschaft sein kann

mfg Beat

[apsel]

Om nah hoo pez nyeetz, Klaus !

interessant dürfte dieser Thread für dich sein.

Matthias

[Klaus]

Hallo Matthias,

Om nah hoo pez nyeetz, Klaus !

Was heißt dies?

danke für den link. Leider handelt es sich dabei um Javascript-Lösungen.
Dies möchte ich vermeiden.
Gruß
Klaus

[EKKi]

Mahlzeit Klaus,

danke für den link. Leider handelt es sich dabei um Javascript-Lösungen.
Dies möchte ich vermeiden.

Alles andere wird aber nicht funktionieren - insbesonders, wenn Du tatsächlich ein wirkliches Fenster haben willst. Den Server hat in keinster Weise zu interessieren, wie der Client irgendetwas darstellt ... und in bezug auf Fenster hat er auch keinen Zugriff darauf - und das ist auch gut so.

MfG,
EKKi

[Klaus]

Leider handelt es sich dabei um Javascript-Lösungen.
Dies möchte ich vermeiden.

Alles andere wird aber nicht funktionieren - insbesonders, wenn Du tatsächlich ein wirkliches Fenster haben willst.

Laut ChrisB doch:  Suchstichworte: CSS Popup, CSS Infobox

[EKKi]

Mahlzeit Klaus,

Leider handelt es sich dabei um Javascript-Lösungen.
Dies möchte ich vermeiden.

Alles andere wird aber nicht funktionieren - insbesonders, wenn Du tatsächlich ein wirkliches Fenster haben willst.

Laut ChrisB doch:  Suchstichworte: CSS Popup, CSS Infobox

Ich schrieb "wirkliches Fenster" - falls Dir der Unterschied zwischen diesem und den von Dir erwähnten Lösungsvorschlägen von ChrisB nicht klar ist, solltest Du Dich dringend darüber informieren.

MfG,
EKKi

[Klaus]

Mahlzeit Ekki,

Leider handelt es sich dabei um Javascript-Lösungen.
Dies möchte ich vermeiden.

Alles andere wird aber nicht funktionieren - insbesonders, wenn Du tatsächlich ein wirkliches Fenster haben willst.

Laut ChrisB doch:  Suchstichworte: CSS Popup, CSS Infobox

Ich schrieb "wirkliches Fenster" - falls Dir der Unterschied zwischen diesem und den von Dir erwähnten Lösungsvorschlägen von ChrisB nicht klar ist, solltest Du Dich dringend darüber informieren.

Bevor du so einen besserwisserischen Ton anschlägst, solltest du besser lesen, was Du geschrieben hast oder vor dem Schreiben nachdenken.

Der Satz

Alles andere wird aber nicht funktionieren - insbesonders, wenn Du tatsächlich ein wirkliches Fenster haben willst.

bedeutet "alles andere wird nicht funktionieren"!
Der Nachsatz ist nur eine Betonung für den Sonderfall "wirkliches Fenster".

Schönen Abend!

[apsel]

Om nah hoo pez nyeetz, Klaus!

um dem Streit ein wenig die Schärfe zu nehmen: Ein Browserfenster bekommt man unter Verwendung von CSS *nicht* gemanagt.

In dem von mir verwiesenen Thread sind *keine* JS-Lösungen drin, sowohl mein Artikel, als auch die Lösung auf der bde-Seite(dort "Details" bei Browsersupport anklicken) funktionieren mit CSS und *ohne* andere Dinge, insbesondere ohne JS.

Wenn du auf Barrierefreiheit Wert legst, solltest du die Hinweise aus dem noch unvollständigen WIKI-Artikel beachten.

Matthias

[Klaus]

Hallo Matthias,
danke für die Hilfe.

Ein Browserfenster bekommt man unter Verwendung von CSS *nicht* gemanagt.

Nach Möglichkeit möchte ich kein JS verwenden.
Damit ich aber nicht in die falsche Richtung renne, die Frage:
Wenn ich über CSS die Infobox öffne, kann ich in dieser auch einen Link angeben, so dass von diesem auf eine neue URL verzweigt wird.
Hintergrund: Zu jedem Thema wird in der jeweiligen Infobox eine Grundinformation angezeigt. Bei einigen aber besteht die Möglichkeit zusätzliche Informationen auf anderen Homepages zu erhalten.
Gruß
Klaus

[apsel]

Om nah hoo pez nyeetz, Klaus!

Wenn ich über CSS die Infobox öffne, kann ich in dieser auch einen Link angeben, so dass von diesem auf eine neue URL verzweigt wird.

selbstverständlich.

Matthias

[Klaus]

Hallo,
ich habe mir mal die Beispiele zu Gemüte geführt.
Jetzt habe ich noch eine Frage.
Der Text der in die Infobox soll (s. untenstehendes Beispiel), steht ja nun mitten im laufenden HTML-Text. Wenn man mehrere solche Infoboxen hat ist es nach meiner Ansicht etwas unübersichtlich.
Kann man die Texte der einzelnen Infoboxen irgend wie isolieren, d.h. z.B. alle ans Ende der HTML-Datei stellen oder gar in eigene Dateien?
Gruß
Klaus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title></title>  
<style type="text/css">  
.infobox {position: relative; border: 1px solid red;}  
.infobox span {position: absolute; left:-999em; top: 1em; border: 1px solid green; background-color: #dddddd; min-width: 100px;}  
.infobox:hover span, .infobox:focus span {left:1em; cursor:text;}  
</style>  
</head>  
<body>  
  <div id="var1">  
  <h1>Infobox</h1>  
  <p>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    <br>  
    <a class="infobox" tabindex="0">INFOBOX  
       <span>Infobox<br>  
             Beschreibung <br>................ <br>................  
                          <br>................ <br>................  
       </span>  
	</a>  
  </p>  
bla bla bla bla<br>bla bla bla bla<br>bla bla bla bla<br>  
bla bla bla bla<br>bla bla bla bla<br>bla bla bla bla<br>  
bla bla bla bla<br>bla bla bla bla<br>bla bla bla bla<br>  
  </div>  
</body>  
</html>

[Beat]

Kann man die Texte der einzelnen Infoboxen irgend wie isolieren, d.h. z.B. alle ans Ende der HTML-Datei stellen oder gar in eigene Dateien?

Du suchst also nach Fussnoten.
Auch bei Fussnoten halte ich es so, dass ich sie im CMS gerne so definiere:

Das ist Text[footnote:Dazu der Fussnotentext], gefolgt von weiterem Text

Das CMS sammelt die Fussnoten, erzeugt automatisch Anker, Ids und Verlinkung und gibt alle Fussnoten an einer definierten Stelle aus.

Das hat dann allerdings mit einer Info- oder Hover-Box nichts mehr zu tun.

Ich habe an anderer Stelle schon gesagt, dass es die Wollmildeierhoverbox nicht gibt. Jedes Design ist optimiert für bestimmte Inhalte.

In deinem Beispiel darf der Inhalt deiner Hoverbox keinerlei Blockelemente enthalten.

mfg Beat

[Klaus]

Hallo Beat,

Du suchst also nach Fussnoten.

Nein, ich möchte schon Infoboxen.
Aber ich hätte mir gewünscht, dass ich an der Stelle wo jetzt der Text der Infobox steht, z.B. eine copy-/include-Anweisung angeben könnte, die den Text einfügt
Gruß
Klaus

[Beat]

Du suchst also nach Fussnoten.
Nein, ich möchte schon Infoboxen.
Aber ich hätte mir gewünscht, dass ich an der Stelle wo jetzt der Text der Infobox steht, z.B. eine copy-/include-Anweisung angeben könnte, die den Text einfügt.

Ich habe mir sagen lassen, das die Ästhetik von Frauen leidet, wenn man sie im Quelltext erforscht. Die Natur hat uns deshalb auch eine Art CSS verschafft.

mfg Beat

[Klaus]

Ich habe mir sagen lassen, das die Ästhetik von Frauen leidet, wenn man sie im Quelltext erforscht. Die Natur hat uns deshalb auch eine Art CSS verschafft.

Da kommt doch bestimmt der Einwand:
Inhalte in HTML-Datei
Formatierung in CSS.

Gruß
Klaus

[Klaus]

Ergänzung:
Zitat, gerade gelesen:
du bindest den Text an einen Tag oder eine Klasse und (viel schlimmer) der Internet Explorer ignoriert dieses Pseudoelement. Von daher würde ich den Text auch aus der CSS-Datei lassen..

[Klaus]

Hallo,
ich habe mir jetzt zwei Beispiele "zusammengebastelt", die in Firefox einwandfrei laufen.
Im IE6 laufen aber beide nicht, im IE7 funktioniert zwar das Hoover-Beispiel aber das Link-Beispiel ebenfalls nicht.
Gibt es da eine Korrekturmöglichkeit?
Mit Dank
Klaus
Hier die Beispiele:
1. Hoover:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title></title>  
<style type="text/css">  
.infobox_hoover {position: relative; border: 1px solid red;}  
.infobox_hoover span {position: absolute; left:-999em; top: 1em; border: 1px solid green; background-color: #dddddd; min-width: 100px;}  
.infobox_hoover:hover span, .infobox_hoover:focus span {left:1em; cursor:text;}  
</style>  
</head>  
<body>  
  <h1>Infobox - Aufruf über Hoover</h1>  
  <p>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    <br>  
    <a class="infobox_hoover" href="#">infobox_hoover  
	  <span>Infobox - Aufruf über Hoover<br>  
             Beschreibung <br>................ <br>................  
                          <br>................ <br>................  
       </span>  
	</a>  
  </p>  
  <p>  
    bla bla bla bla<br>bla bla bla bla<br>bla bla bla bla<br>  
    bla bla bla bla<br>bla bla bla bla<br>bla bla bla bla<br>  
    bla bla bla bla<br>bla bla bla bla<br>bla bla bla bla<br>  
  </p>  
</body>  
</html>

2. Link:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title></title>  
<style type="text/css">  
.infobox_link {position: relative; text-decoration: none;}  
.infobox_link span {position: absolute; left:-999em; top: 1em; border: 1px solid green; background-color: #dddddd; width: 40em;}  
.infobox_link:focus span {left:1em; width:20em; cursor:text;}  
</style>  
</head>  
<body>  
  <h1>Infobox - Aufruf über Link</h1>  
  <p>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    Text .............................<br>  
    <br>  
    <a class="infobox_link" href="#">infobox_link  
	  <span>Infobox - Aufruf über Link<br>  
             Beschreibung <br>................ <br>................  
             <br>................ <br>................ <br>  
             Fenster schliessen ......  
       </span>  
	</a>  
  </p>  
  <p>  
    bla bla bla bla<br>bla bla bla bla<br>bla bla bla bla<br>  
    bla bla bla bla<br>bla bla bla bla<br>bla bla bla bla<br>  
    bla bla bla bla<br>bla bla bla bla<br>bla bla bla bla<br>  
  </p>  
</body>  
</html>

[apsel]

Om nah hoo pez nyeetz, Klaus!

Im IE6 laufen aber beide nicht, im IE7 funktioniert zwar das Hoover-Beispiel aber das Link-Beispiel ebenfalls nicht.

Ich würde in die Unterstützung veralteter Browser nur noch dann Zeit investieren, wenn die Benutzbarkeit der Seite nicht gegeben ist.

Gibt es da eine Korrekturmöglichkeit?

Gibt es die Beispiele online?

1. Hoover:

es heißt hover (wegen englisch: schweben, der Mauszeiger schwebt drüber).

Warum :focus nicht wie gewünscht funktioniert kannst du in diesem Thread lesen.

Matthias

[Klaus]

Hallo Matthias,

Ich würde in die Unterstützung veralteter Browser nur noch dann Zeit investieren, wenn die Benutzbarkeit der Seite nicht gegeben ist.

Der IE 7 ist doch sicherlich noch weit verbreitet.

Gibt es die Beispiele online?

Habe es unter
Link-Beispiel (Schliessen noch nicht realisiert)
Hover-Beispiel
bereitgestellt

1. Hoover:

Klaus