Nachtgebet für Infobox mit Links

[Tom]

Hello,

jetzt wollte ich schon seit zwei Stunden schlafen, aber die Projektideen für die nächsten Wochen geistern noch durch den Kopf und halten mich davon ab.

Wer kann mir meinen Schlaf ermöglichen und mir sagen, ob es eine Möglichkeit gibt, in einer Infobox (anstelle eines Tooltipps) ohne Javascript Links zu ermöglichen?

Im Beispiel http://aktuell.de.selfhtml.org/artikel/css/infobox/index.htm# ist das ja nicht möglich, oder ich habe es falsch angefangen...

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Beat]

Im Beispiel http://aktuell.de.selfhtml.org/artikel/css/infobox/index.htm# ist das ja nicht möglich, oder ich habe es falsch angefangen...

Mein aktuelles Popup in BdE-Online, etwas vereinfacht gestylt.

<a class="popup" id="x42" href="#x42">PopupTitel</a>  
<div id="x42">  
   <a href="#x113">schliessen</a>  
   <h4 class="ct">Ein Titel</h4>  
   Text + any inline or block Markup  
</div>

a.popup { position:relative; }  
a.popup::before { content: '\25a3  '; }  
.popup + div { display:none; position:absolute; width:100%; ... }  
.popup + div:target { display:block; }  
.popup + div > a:first-child { display:block; ... }  
.popup + div h4 { ... }  
.popup + div img { display:inline; }  

.popup + div befindet sich in einem relativ positionierten Element.
Es werden jedoch keine top Werte verwendet.
Nachteilig ist das :target Attribut. Dieses müsste für MSIE mittels JS nachgebildet werden, was ich unterlassen habe.

mfg Beat

[Detlef G.]

Hallo Tom

Wer kann mir meinen Schlaf ermöglichen und mir sagen, ob es eine Möglichkeit gibt, in einer Infobox (anstelle eines Tooltipps) ohne Javascript Links zu ermöglichen?

Wenn du keine SteinzeItbrowsEr unterstützen musst, dürfte das kein Problem sein.
Du kannst zum Einblenden bei :hover Elemente verwenden, die auch Links enthalten dürfen.

Im Beispiel http://aktuell.de.selfhtml.org/artikel/css/infobox/index.htm# ist das ja nicht möglich, oder ich habe es falsch angefangen...

bei dem Beispiel z.B.:

#box p {  
…  
}  
  
#box p:hover {  
…  
}  
  
#box p * {display:none;}  
  
#box p:hover * {  
…  
}

<div id="box"><p>INFOBOX<span>Lorem ipsum dolor sit amet</span> <a href="#">Ein Link</a></p></div>  

Auf Wiederlesen
Detlef

[Tom]

Hello Detlef,

Wer kann mir meinen Schlaf ermöglichen und mir sagen, ob es eine Möglichkeit gibt, in einer Infobox (anstelle eines Tooltipps) ohne Javascript Links zu ermöglichen?

Wenn du keine SteinzeItbrowsEr unterstützen musst, dürfte das kein Problem sein.
Du kannst zum Einblenden bei :hover Elemente verwenden, die auch Links enthalten dürfen.

Im Beispiel http://aktuell.de.selfhtml.org/artikel/css/infobox/index.htm# ist das ja nicht möglich, oder ich habe es falsch angefangen...

bei dem Beispiel z.B.:

#box p {

…
}

#box p:hover {
…
}

#box p * {display:none;}

#box p:hover * {
…
}

>   
> ~~~html

<div id="box"><p>INFOBOX<span>Lorem ipsum dolor sit amet</span> <a href="#">Ein Link</a></p></div>  

> 

So weit war aich aber auch schon. Ich möchte den Link (sogar Mehrere) aber im Text der Box haben, und das geht wohl nicht, weil dann Link im Link stehen würde. Also muss ich irgendeine andere Lösung suchen...

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Detlef G.]

Hallo Tom

<div id="box"><p>INFOBOX<span>Lorem ipsum dolor sit amet</span> <a href="#">Ein Link</a></p></div>

So weit war aich aber auch schon. Ich möchte den Link (sogar Mehrere) aber im Text der Box haben, und das geht wohl nicht, weil dann Link im Link stehen würde. Also muss ich irgendeine andere Lösung suchen...

Wieso Link im Link?

<div id="box"><p>INFOBOX<span>Lorem ipsum dolor sit amet</span> <a href="#">Ein Link</a></p></div>

Wo ist hier ein Link im Link?
Wie auch Martin schrieb, kannst du :hover auf beliebige Elemente anwenden, wenn du keine SteinzeItbrowsEr unterstützen musst.

Dabei unterscheidet sich die Technik der InfoBox überhaupt nicht von der, die bei diversen CSS-Aufklapp-Menüs verwendet wird. Für Browser funktioniert alles nur mit CSS, und IE6 bekommt es dann immer auf- oder immer zugeklappt oder für ihn muss mit Javascript nachgeholfen werden.

Auf Wiederlesen
Detlef

[Der Martin]

Hi,

jetzt wollte ich schon seit zwei Stunden schlafen

wie, am späten Nachmittag schon? :-)

Wer kann mir meinen Schlaf ermöglichen und mir sagen, ob es eine Möglichkeit gibt, in einer Infobox (anstelle eines Tooltipps) ohne Javascript Links zu ermöglichen?

Solange du :hover auf beliebige Elemente anwenden darfst, also nicht auf IE6 Rücksicht nehmen musst, sollte das doch kein Problem sein.

So long,
 Martin

[Tom]

Hello,

Wer kann mir meinen Schlaf ermöglichen und mir sagen, ob es eine Möglichkeit gibt, in einer Infobox (anstelle eines Tooltipps) ohne Javascript Links zu ermöglichen?

Solange du :hover auf beliebige Elemente anwenden darfst, also nicht auf IE6 Rücksicht nehmen musst, sollte das doch kein Problem sein.

Jetzt habe ich endlich mal eine halbe Stunde Ruhe gehabt, um zu verstehen, wie Du das meintest...

Dann kommt jetzt also diese einfache Lösung dabei heraus.
Wie Du schon schreibst, funktioniert sie leider nicht im IE6.
Welche Browser sind noch davon betroffen?
Ich müsste dann nur für den IE6 und seine Mängelbrüder einen normalen Tooltipp und einen Link auf die betroffene Passage legen, die z.B. per JavaScript ein Popup öffnet oder ohne JavaScript eine eigene Seite für die Auswahl öffnet. Das ist lästig. JS ginge noch, obwohl das auch eine erhebliche Codedopplung geben würde, oder?

Was glaubst Du, wieviele User dann noch betroffen wären, also wieviel Prozent noch IE6 (oder Vergleichbares) _ohne_ JavaScript verwenden. Kann man das Risiko eingehen?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
position:absolute; top:50px; left:50px;
z-index:3;}

#box div {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}

#box div:hover {
color:black;
background:#ddd8b7;
width:400px;}

#box div span {display:none;}

#box div:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
</head>
<body>

<div id="box"><div>INFOBOX<span><a href="http://selfhtml.org">Selfhtml</a> ist das beliebte Forum, in dem
                   sich <a href="http://tom-vom-berg.de">Tom vom Berg</a> immer herumtreibt</span></div></div>

</body>
</html>

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Detlef G.]

Hallo Tom

Solange du :hover auf beliebige Elemente anwenden darfst, also nicht auf IE6 Rücksicht nehmen musst, sollte das doch kein Problem sein.

Jetzt habe ich endlich mal eine halbe Stunde Ruhe gehabt, um zu verstehen, wie Du das meintest...

Auch ich schrieb dir das bereits in meinem ersten Post.
Hättest du dir mal die Mühe gemacht, das Beispiel von http://aktuell.de.selfhtml.org/artikel/css/infobox/index.htm# entsprechend meinen Codeauszügen anzupassen, wäre dir das auch gleich aufgefallen.

Dann kommt jetzt also diese einfache Lösung dabei heraus.
Wie Du schon schreibst, funktioniert sie leider nicht im IE6.
Welche Browser sind noch davon betroffen?

Soweit ich weiß, alles was älter/gleich alt ist, wie IE6 und NS4.

Ich müsste dann nur für den IE6 und seine Mängelbrüder einen normalen Tooltipp und einen Link auf die betroffene Passage legen, die z.B. per JavaScript ein Popup öffnet oder ohne JavaScript eine eigene Seite für die Auswahl öffnet.

Nein, du brauchst kein extra Popup für diese Browser, du kannst den Tooltipp genauso anzeigen, musst das :hover lediglich per onmouseover/onmouseout nachbilden. Ein Beispiel dazu (zwar für ein Ausklappmenü) findest du bei Dynamische CSS-Navigation für moderne Browser - Javascript

<div id="box"><div>INFOBOX<span><a href="http://selfhtml.org">Selfhtml</a> ist das beliebte Forum, in dem
                   sich <a href="http://tom-vom-berg.de">Tom vom Berg</a> immer herumtreibt</span></div></div>

Das extra <span> drumherum brauchst du nicht unbedingt s. meine erste Antwort.

Auf Wiederlesen
Detlef

[Tom]

Hello,

das Menu in die Tabelle einzubinden, ahbe ich geschafft.
Vermutlich lässt es sich noch vereinfachen?
http://selfhtml.bitworks.de/hover-menu/

Jetzt möchte ich gerne wissen, wie ich eine Browserweiche für den IE6 und ähnliche für die JavaXript-Events onMouseOver und onMouseOut realisieren könnte, sodass diese Lösung wirklich NUR für die betroffenen Browser gilt.

Darf ich die conditional Comments mitten in einer Elementdefinition einsetzen?

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg