Frage zur CSS Infobox

[Oliver]

Hallo Gemeinde!

Bei einer meiner Fragen neulich wurde mir als mögliche Lösung meines Problems die CSS-Infobox genannt. Diese hab ich auch gleich in mein Herz geschlossen - ist ne tolle Sache.

Leider hab ich jetzt damit dann doch noch Probleme.
Inhalt meiner InfoBox soll sein:

• Hintergrundbild
• Überschrift
• Mehrere Punkte in einer Aufzählung

Folgenden Code hab ich dafür geschrieben:
  <style type="text/css">
      .head  { font-weight:bold;
               text-decoration:underline;
               margin-bottom:4px; }

div.box    { position:absolute;
                   background-color:#FFFFFF; }

div.box a  { text-decoration:none;
                   display:block; }

div.box a:hover      { color:black;
                             width:350px; }

div.box a span.content       { display:none; }

div.box a:hover span.content { border:1px solid black;
                             display:block;
                             padding:5px;
                             height:220px; }

ul { padding-left:15px;
           padding-top:5px; }

</style>

<div class="box" style="left:626px;top:215px;z-index:18;">
  <a href="#">
    Infos
        <span class="content"
              style="background:url(produkt1.jpg) no-repeat center;">
                <span class="head">&Uuml;berschrift</span>
                  <ul>
                    <li>Punkt 1</li>
                    <li>Punkt 2</li>
                    <li>Punkt 3</li>
                    <li>Punkt 4</li>
                  </ul>
        </span>
  </a>
</div>

Es funktioniert auch. Es ist nur leider kein gültiges HTML :-/
Wie bekomm ich das gleiche mit gültigem HTML? Ich hab einiges ausprobieren wollen, aber scheitere immer daran das gewisse Elemente halt nicht ineinander verschachtelt werden dürfen.

Eine weitere Frage zum Thema Infobox hab ich auch noch. Ich möchte gern die Infobox vor dem Text eingeblendet bekommen - das funktioniert auch so wie es oben in dem Codebeispiel beschrieben ist. Gleichzeitig möchte ich aber die Position der Infobox nicht absolut festlegen. Momentan muss ich immer einen Top und einen Left Wert angeben, damit die Box auch da erscheint, wo sie soll. Gibt es dafür auch noch eine gute Lösung?

Danke für eure Antworten schon mal.

Gruß

Oliver

[schwarze Piste]

Tachchen!

Inhalt meiner InfoBox soll sein:

• Hintergrundbild
• Überschrift
• Mehrere Punkte in einer Aufzählung

Für eine solch fortgeschrittene Infobox brauchst du eine JavaScript-Lösung.
Mein Tipp wäre hier noch der gleiche wie damals. ;-)

Gruß

Die schwarze Piste

[Oliver]

Hallo :)

Für eine solch fortgeschrittene Infobox brauchst du eine JavaScript-Lösung.
Mein Tipp wäre hier noch der gleiche wie damals. ;-)

Nein - ich habs jetzt auch ohne JavaScript und XHTML 1.0 Strict konform hinbekommen.

Lösung:

Inhalt der InfoBox in eine separate HTML-Datei deren Aufbau man gestalten kann wie man Spass dran hat.

Einbinden dieser HTML Datei:

<div class="box" style="left:626px;top:215px;z-index:18;">
  <a href="#">
    Einsatzbereiche
    <object class="content" data="test.html" />
  </a>
</div>

Problem gelöst. Danke für eure Mithilfe.

Gruß

Oliver

[wahsaga]

hi,

Es funktioniert auch. Es ist nur leider kein gültiges HTML :-/
Wie bekomm ich das gleiche mit gültigem HTML?

In dem du es in gültigem HTML umsetzt, und entsprechend angepasstes CSS verwendest - sofern du auf den IE verzichten kannst :-)

Alternativ kann auch ich dir nur zum zusätzlichen Einsatz von Javascript für den IE raten - wobei du dann noch einen Fallback-Mechanismus brauchst, sollte dieses nicht zur Verfügung stehen.

Gleichzeitig möchte ich aber die Position der Infobox nicht absolut festlegen.

Sondern?

Momentan muss ich immer einen Top und einen Left Wert angeben, damit die Box auch da erscheint, wo sie soll. Gibt es dafür auch noch eine gute Lösung?

Kommt drauf an, was du willst.
Absolute Positionierung sollte es hier schon sein - ohne ist es kaum möglich, die Boxen einzublenden, ohne dass sich der Rest verschiebt.
Wenn du die Koordinaten abhängig von der Boxgröße dynamisch anpassen willst, nimm auch hier wieder Javascript zu Hilfe.

gruß,
wahsaga

[Oliver]

hi,

Es funktioniert auch. Es ist nur leider kein gültiges HTML :-/
Wie bekomm ich das gleiche mit gültigem HTML?

In dem du es in gültigem HTML umsetzt, und entsprechend angepasstes CSS verwendest - sofern du auf den IE verzichten kannst :-)

Lustig :)
Einziger Ansatzpunkt der mir einfallen würde: alles was nicht verschachtelt werden darf durch einzelne aufeinander abgestimmte <span>s ersetzen, die nicht ineinander verschachtelt sind.

Das ist dann aber - wenn das überhaupt klappt - doch recht umständlich gelöst.

Gleichzeitig möchte ich aber die Position der Infobox nicht absolut festlegen.
Sondern?

Ich habe eine Auflistung von einzelnen Produkten in tabellarischer Form. Am liebsten hätte ich, wenn die Position abhängig von der Zelle ist, in der die Infobox deifniert wird, sich jedoch Auffalten lässt, ohne das ganze Tabellen-Layout zu verschieben.

Momentan muss ich immer einen Top und einen Left Wert angeben, damit die Box auch da erscheint, wo sie soll. Gibt es dafür auch noch eine gute Lösung?
Kommt drauf an, was du willst.
Absolute Positionierung sollte es hier schon sein - ohne ist es kaum möglich, die Boxen einzublenden, ohne dass sich der Rest verschiebt.

Genau das ist das Problem :)

Wenn du die Koordinaten abhängig von der Boxgröße dynamisch anpassen willst, nimm auch hier wieder Javascript zu Hilfe.

Und genau darauf möcht ich verzichten.

Danke für deine Antwort.

Gruß

Oliver

[Ingo Turski]

Hi,

könnte [http://www.1ngo.de/web/infobox.html@title=das] Dein Problem lösen?

freundliche Grüße
Ingo

[Jan]

Hallo,
ich denke das hier könnte Interessant für dich sein:
http://www.walterzorn.de/tooltip/tooltip.htm
Gruß Jan

[Oliver]

Hallo,
ich denke das hier könnte Interessant für dich sein:
http://www.walterzorn.de/tooltip/tooltip.htm
Gruß Jan

Hallo Jan,

danke für deine Antwort.
Leider hab ich nicht den Link zu meiner ursprünglichen Frage mitgeposted, wo mir die CSS-Infobox empfohlen wurde.

Der Grund warum ich die Infobox einführen möchte ist eben gerade der, das ich KEIN JavaScript verwenden möchte um eine möglichst barrierefreie Internetpräsenz zu erstellen.

Und btw.: Hintergrundbild im ToolTip? Das geht?

Gruß

Oliver

[wahsaga]

hi,

Leider hab ich nicht den Link zu meiner ursprünglichen Frage mitgeposted, wo mir die CSS-Infobox empfohlen wurde.

Das ist einer der Gründe, warum Doppelpostings zu unterlassen sind.

gruß,
wahsaga

[schwarze Piste]

Tachchen!

Der Grund warum ich die Infobox einführen möchte ist eben gerade der, das ich KEIN JavaScript verwenden möchte um eine möglichst barrierefreie Internetpräsenz zu erstellen.

Und genau das ist der Grund, warum ich damals den Link gepostet habe,
denn diese Lösung funktioniert auch ohne JavaScript noch.

Gruß

Die schwarze Piste