css:infobox

wallhall · 31.01.2006, 11:39

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">

</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">

</style>
<script type="text/javascript">

</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:

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....!

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

31.01.2006, 11:39	#1
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	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 ____________________________________ lg wallhall

31.01.2006, 16:39	#2
Satan_666 Inventar Registriert seit: 03.09.2000 Beiträge: 4.010	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>` ____________________________________ Für ein friedliches Zusammenleben im Forum werde ich ab sofort keine Trolle mehr füttern, und zwar unabhängig von der Sinnhaftigkeit ihrer Wortmeldungen.

01.02.2006, 09:48	#3
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	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> ____________________________________ lg wallhall

01.02.2006, 11:38	#4
Satan_666 Inventar Registriert seit: 03.09.2000 Beiträge: 4.010	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. ____________________________________ Für ein friedliches Zusammenleben im Forum werde ich ab sofort keine Trolle mehr füttern, und zwar unabhängig von der Sinnhaftigkeit ihrer Wortmeldungen.

01.02.2006, 12:51	#5
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	@Satan_666 das wäre gans toll, vielen dank schon mal im voraus ____________________________________ lg wallhall

02.02.2006, 12:13	#8
Satan_666 Inventar Registriert seit: 03.09.2000 Beiträge: 4.010	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....! Und danke für den Link - das klingt ja ziemlich interessant! ____________________________________ Für ein friedliches Zusammenleben im Forum werde ich ab sofort keine Trolle mehr füttern, und zwar unabhängig von der Sinnhaftigkeit ihrer Wortmeldungen.

02.02.2006, 12:39	#9
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	@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 ____________________________________ lg wallhall

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln