WCM Forum

WCM Forum (http://www.wcm.at/forum/index.php)
-   Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)
-   -   css:infobox (http://www.wcm.at/forum/showthread.php?t=184377)

wallhall 31.01.2006 11:39
css:infobox
 
hallo leute,
irgendwie gelingt mir die fixe positionierung der infobox nicht.
ich habe über eine ganze seite verschiedene tabellen alsolute positioniert. und zu jeder dieser tabellen (quadratisch, ca. 100x100px) möchte ich diese infobox einblenden. das gelingt aber nicht.
erstens ist die infobox unter der tabelle, zweitens wenn ich die infobox irgendwo absolut positionieren will, orientiert sich die box nach dem elternelement (- ich hoffe dass stimmt mit elternelement)

bin jetzt schon ein wenig verwzeifelt, weil ich den grund nicht erkennen kann. ich tippe aber auf die fixe positionierung der tabellen, die ebenfalls in einem div-bereich stehen.

ich hoffe es hat jemamd einen tipp für mich

lg wallhall

Satan_666 31.01.2006 16:39
Keine Ahnung, ob ich das jetzt korrekt verstanden habe - aber bei absolut positionierten div-Elementen ist es wichtig, in welcher Reihenfolge diese im HTML-Dokument definiert werden - und in welchen anderen Elementen sie eingebettet sind. Sprich: je später definiert, umso weiter oben ist das div-Element. Wenn Du immer vom oberen Rand der Anzeige weg positionieren willst, dann sollte das div-Element ebenenmäßig direkt unterhalb des body-Tags stehen. Beispiel:


PHP-Code:
<body>
  <div id="tab1" style="position:absolute;top:125px;....">
    <table border="0">
      :
    </table>
  </div>
  <div id="info1" style="position:absolute;top:200px;....">
    :
  </div>

  <div id="tab2" style="position:absolute;top:325px;....">
    <table border="0">
      :
    </table>
  </div>
  <div id="info2" style="position:absolute;top:400px;....">
    :
  </div>
</body> 

wallhall 01.02.2006 09:48
hallo Satan_666

so mein ich es:

<!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 a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}

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

#box a span {display:none;}

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

<div style="position:absolute; left:200px; top:100px; width:100; height:80px; z-index:1;">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="80" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">oben</div>
</td>
</tr>
<tr bgcolor="#AB8B97">
<td height="50">
<div id="box">irgendein text<span>hier kommt dann etwas mehr text</span></div>
</td>
</tr>
</table>
</div>

<div style="position:absolute; left:200px; top:200px; width:100; height:100px; z-index:1;">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="100" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">oben</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td height="50">
<div id="box">irgendein text<span>hier kommt dann etwas mehr text</span></div>
</td>
</tr>
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">unten</div>
</td>
</tr>
</table>
</div>

<div style="position:absolute; left:400px; top:150px; width:100; height:100px; z-index:1;">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="100" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">oben</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td height="50">
<div id="box">irgendein text<span>hier kommt dann etwas mehr text</span></div>
</td>
</tr>
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">unten</div>
</td>
</tr>
</table>
</div>

</body>
</html>

Satan_666 01.02.2006 11:38
Ich verstehe jetzt Dein Problem - nur wirst Du das Problem wohl nicht ohne JavaScript lösen können.

Das Problem ist, wie Du vermutest, das Einbetten der Info in die Zelle der Tabelle, weswegen sich die Tabelle vergrößert.

Ich hatte mal in einem Web-Projekt eine Lösung erarbeitet, die vermutlich auch für Dich verwendbar wäre; kann ich aber erst morgen hier posten.

wallhall 01.02.2006 12:51
@Satan_666 das wäre gans toll, vielen dank schon mal im voraus

Satan_666 02.02.2006 09:43
So, jetzt habe ich eine fertige Version, so wie ich es mir vorstelle, wie es laufen könnte bzw. aussehen sollte. Wenn ich Deinen Geschmack nicht ganz getroffen haben sollte, dann hast Du damit wenigstens eine Vorstellung, wie der Code aussehen soll - so schwierig ist es eh nicht, zu verstehen:

Zitat:
<!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 a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}

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

#box a span {display:none;}

#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
<script type="text/javascript">
<!--
function info(p1,p2)
{document.getElementById(p1).style.visibility=p2;}
//-->
</script>
</head>
<body>

<div style="position:absolute;left:200px;top:100px;widt h:100;height:100px">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="100" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">oben1</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td height="50" onMouseover="javascript:info('box1','visible')" onMouseout="javascript:info('box1','hidden')">text 1</td>
</tr>
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">unten1</div>
</td>
</tr>
</table>
</div>

<div style="position:absolute;left:200px;top:200px;widt h:100;height:100px">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="100" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">oben2</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td height="50" onMouseover="javascript:info('box2','visible')" onMouseout="javascript:info('box2','hidden')">text 2</td>
</tr>
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">unten2</div>
</td>
</tr>
</table>
</div>

<div style="position:absolute;left:400px;top:150px;widt h:100;height:100px">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="100" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">oben3</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td height="50" onMouseover="javascript:info('box3','visible')" onMouseout="javascript:info('box3','hidden')">text 3</td>
</tr>
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">unten3</div>
</td>
</tr>
</table>
</div>

<div id="box1" style="visibility:hidden;position:absolute;left:20 0px;top:200px">
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000ff">
<tr bgcolor="#ffff00"><td>hier kommt dann etwas mehr text1 hin</td></tr></table></div>

<div id="box2" style="visibility:hidden;position:absolute;left:20 0px;top:300px">
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000ff">
<tr bgcolor="#ffff00"><td>hier kommt dann etwas mehr text2 hin</td></tr></table></div>

<div id="box3" style="visibility:hidden;position:absolute;left:40 0px;top:250px">
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000ff">
<tr bgcolor="#ffff00"><td>hier kommt dann etwas mehr text3 hin</td></tr></table></div>

</body>
</html>
Der Einfachheit halber habe ich hinter den Texten eine Nummerierung angefügt, damit man sieht, welche Texte tatsächlich so stehen.

Zur Erklärung: im Header habe ich die javascript-Funktion definiert, die Du einfach von <script ...> bis </script> in Dein HTML-Dokument übernimmst.

Die einzelnen kleinen Tabellen sind so reduziert, dass nur diejenigen Elemente drin sind, die ohne Aktionen des Users zu sehen sein sollen. Die beiden Anweisungen onMouseover und onMouseout steuern jetzt die Info-Boxen, indem die oben definierte javascript-Funkton "info" mit den Parametern [id der Infobox] und visible (für sichtbar) bzw hidden (für unsichtbar) aufgerufen wird. Fährt man also mit der Mouse über die mittlere Zeile der Tabelle, erscheint die zugehörige Infobox, verlässt man sie wieder, verschwindet auch die Infobox.

Ganz zum Schluss werden dann die div's für die Infoboxen definiert. Zum Schluss deshalb, damit sie an oberster Stelle stehen. Die Infoboxen kannst Du positionieren, wo du willst.

Passt das so?

ChristianEb 02.02.2006 11:34
Zitat:
<tr bgcolor="#008B97">
<td height="50" onMouseover="java script:info('box1','visible')" onMouseout="java script:info('box1','hidden')">text1</td>
</tr>
Es sollte javascript und nicht java script stehen.
Es müsste aber auch eine Möglichkeit mit hover bestehen, dann müsste es auch ohne Javascript gehen.
Vielleicht hilft das hier ein bisschen weiter http://www.css-technik.de/

lg Christian

Satan_666 02.02.2006 12:13
Keine Ahnung, warum sich da plötzlich zwischen java und script ein Leerzeichen reingeschwindelt hat. Ich habe lediglich den Inhalt der HTML-Datei über die Zwischenablage kopiert - und das Beispiel hat immerhin funktioniert....!
:confused:

Und danke für den Link - das klingt ja ziemlich interessant!

wallhall 02.02.2006 12:39
@satan_666, funktiniert (nachdem ich das leerzeichen entfernt habe) bestens, genau so hab ich es mir vorgestellt. vielen dank

@ChristianEb, danke auch für deine hilfe, den link werde ich mir auch ansehen, vielleicht gibt es ja eine möglichkeit nur mit hover

:engel:


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:00 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
© 2009 FSL Verlag