probleme mit grafiken in einer tabelle

Ethratian

hi@all

ich beschäftige mich zur zeit mit dem aufbau einer homepage für ein mmorpg (wow falls es jemanden interessiert). folgt ihr dem link (http://www.hakunamatata.eu.tc/leftmenu.html) so seht ihr, wie das linke menu meiner seite aussehen sollte. die rahmen sollten später wegkommen, die sind nur zur zeit sichtbar, damit man sich besser zurecht findet. nun mein problem:

die 4 kleinen grafiken (2 oben und 2 unten, die glieder einer kette darstellen sollen) sollten genau über der großen grafik sein. obwohl ich meiner meinung nach richtig gerechnet habe und alles richtig eingegeben habe, schaut es anders aus, als es sollte.

wäre nett, wenn ihr mir helfen könntet
mfg ethratian

(als einleitung stand hi @ all, aber das forum erkennt dies als emailadresse, also nicht wundern^^)

Ronald

Moin!

Du hast dich mit den ganzen Colgroupes und Tabellenzellen verhauen - ich würde es auch ganz anders lösen -> CSS

Schau es dir mal an (die restliche Ausrichtung paßt im IE noch nicht, hatte dazu aber keine Lust für 'mal eben schnell'):

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title></title>
   <meta name="author" content="Sebi">
</head>
<body text="#000000" bgcolor="#FFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" leftmargin="10" topmargin="10">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    [img]pics/mace.jpg[/img]
    </td>
  </tr>


  <tr>
    <td>
    [img]pics/bar2.jpg[/img]
    </td>
  </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="empty-cells:show">
  <tr>
    <td>
    [img]pics/bar.jpg[/img]
    </td>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td style="background-image:url(pics/chain.jpg);height:16px;"></td>
        </tr>
        <tr>
          <td style="width:80px;height:80px;background-image:url(pics/news.jpg)"></td>
          <td>
          </td>
        </tr>
        <tr>
          <td style="background-image:url(pics/chain.jpg);height:16px;"></td>
        </tr>
      </table>
    </td>


  </tr>
</table>




<script language="Javascript" type="text/javascript">
<!--


xid = Math.random();
xid *= 10000000000000;
xid = Math.ceil(xid);


var URL = unescape(location.href);


var xstart = URL.lastIndexOf("piranho")-1;
var user = URL.substring(7,xstart);


document.write('<SCRIPT LANGUAGE="Javascript" src="http://www.piranho.com/ad.php?user='+user+'&xid='+xid+'"></' + 'SCRIPT>');


-->
</script></body>
</html>

Alles anzeigen

G.a.d.M.

Ronald

Ethratian

hi ronald!

danke für die schnelle antwort. könntest du das bei zeiten ( ) etwas genauer erklären? also inwiefern ich mich verhaun hab? dein vorschlag CSS hilft mir leider nicht sehr. ich hab mich mit CSS noch nie beschäftigt und hatte es eigentlich auch nicht vor, es sei denn es is sehr einfach. auf jeden fall nochmals danke für die hilfe.

mfg ethratian

ps: was die variablen var, xid bedeuten, weiß ich auch nicht ;). kenn mich nur ein kleines bisschen mit html aus, sonst mit keiner programmiersprache!

pss: hab mir jetzt kurz angesehn was du da gemacht hast. wenn ich mich nicht täusche, hast du das bild per CSS als tabellenhintergrund eingestellt. das problem an der sache ist nur, dass jetzt das kleine bild (chain.jpg) 5x nebeneinander zu sehen ist. ich will jedoch 1 leeres feld, dann 1x das bild, in der mitte wieder ein leeres feld, dann wieder das bild und die letzte zelle wieder leer. (ganz schön anspruchsvoll^^)

Ronald

Minst du so:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title></title>
   <meta name="author" content="Sebi">
</head>
<body text="#000000" bgcolor="#FFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" leftmargin="10" topmargin="10">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    [img]pics/mace.jpg[/img]
    </td>
  </tr>


  <tr>
    <td>
    [img]pics/bar2.jpg[/img]
    </td>
  </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="empty-cells:show">
  <tr>
    <td>
    [img]pics/bar.jpg[/img]
    </td>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>

          <td style="background-image:url(pics/chain.jpg);height:16px;width:16px;"></td>
          <td style="height:16px;width:16px;"></td>
          <td style="background-image:url(pics/chain.jpg);height:16px;width:16px;"></td>
          <td style="height:16px;width:16px;"></td>
          <td style="background-image:url(pics/chain.jpg);height:16px;width:16px;"></td>
        </tr>
        <tr>

          <td colspan="5" style="width:80px;height:80px;background-image:url(pics/news.jpg)"></td>
          <td>
          </td>
        </tr>
        <tr>

          <td style="background-image:url(pics/chain.jpg);height:16px;width:16px;"></td>
          <td style="height:16px;width:16px;"></td>
          <td style="background-image:url(pics/chain.jpg);height:16px;width:16px;"></td>
          <td style="height:16px;width:16px;"></td>
          <td style="background-image:url(pics/chain.jpg);height:16px;width:16px;"></td>
        </tr>
      </table>
    </td>


  </tr>
</table>


</body>
</html>

Alles anzeigen

Kurze Erklärung:
Im Block 1 und 3 befinden sich 5 Zellen nebeneinander. davon die 1., 3. und 5. mit deiner Grafik.
Im Block 2 befindet sich 5 Zellen zusammengefaßt zu einer einzigen (colspan="5"). Die neue Zelle ist immer exact so breit, wie die kleineren Zellen darüber, hier also 5x16px = 80px. Nun paßt die größere Grafik genau zu den kleinen Zellen.

CSS ist einfacher als du denkst - du mußt nur etwas logisch denken können. Im Zweifel findest du bei http://de.selfhtml.org für nahezu alles eine Lösung.

Das Javascript hat dir piranho in die Seite gezaubert, es ist eine User-Statistik (ohne daß ich jetzt mal auf Detailerklärungen eingehen möchte)
Ich habe es für das Beispiel einfach weggelassen, da es nicht dazu gehört.

G.a.d.M.

Ronald

Ethratian

grins, jetzt hast dus genau umgekehrt gemacht, wie ich es wollte, aber jetzt hab ichs schon verstanden. 1,3,5 solln leer sein, im 2ten und 4ten soll das bild sein. aber das hab ich jetzt dank deiner hilfe verstanden.

nun gut, dann werd ich mich in zukunft genauer mit css beschäftigen. sollt ich probleme haben, weiß ich ja an wen ich mich wenden kann.

danke noch mal. hast mir sehr geholfen;)

mfg ethratian

probleme mit grafiken in einer tabelle

Tags

Benutzer online in diesem Thema