nicht angemeldet
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">Ü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