✔ Tabelle wird nicht angezeigt

kellykatz · 8. April 2010

Hallo!

Ich sitze grad verzweifelt vor einer eigentlich simplen Aufgabe: Ich will einfach nur, dass eine Tabelle angezeigt wird.
Ich hab noch zwei andere Tabellen erstellt, die im style auf display:none gestellt sind, also müsste die eine Tabelle, bei der ich extra noch display:block angegeben hab, doch dargestellt werden. Selsbt wenn ich kein css benuntzt hätte. Jetzt weiß ich nicht, ob es am css liegt, oder einfach an einem HTML Syntaxfehler. Ich kann jedenfalls nichts erkennen, weshalb die Tabelle nicht dargestellt weren könnte...

Hier der gesamte Code, die tabelle mit der id=tabelle4 wird nicht angezeigt (es steht noch als Kommentar Fanarts Charis darüber)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::: nonsens-online.de - Galerie :::</title>

<style type="text/css">

.schrift{
margin:auto;
margin-top:63px;
background-image:url(navi/schrift/schrift_5.png);
bottom:0;
width:237px;
height:52px;
z-index:26;
background-position:center;
background-repeat:no-repeat;
}

</style>

<script type="text/javascript">

<!--

function schrift(nummer){
document.getElementById("fenster").style.background="url(navi/schrift/schrift_"+nummer+".png)";
document.getElementById("fenster").style.backgroundRepeat="no-repeat";
document.getElementById("fenster").style.backgroundPosition="center";
document.getElementById("fenster").style.paddingTop="2px";}

function tabelle_an(id){
for (var i = 1; i <= 12; i++)
	document.getElementById("tabelle"+i).style.display="none";
document.getElementById("tabelle"+id).style.display="block";
}

 -->

</script>

</head>

<body>

<div class="haupt">

<!-- hoverelemente -->

<div class="vogel" id="1"></div>

<div class="impressum" id="2"> </div>

<div class="lampe" id="3"></div>

<div class="fisch" id="4"></div>

<div class="schrank_1" id="5"></div>

<div class="schrank_2" id="6"></div>

<div class="pilze" id="7"></div>

<div class="geschenke" id="8"></div>

<div class="spiegel" id="9"></div>

<div class="schachis" id="10"></div>

<div class="pferdi" id="11"></div>

<div class="kuchen" id="12"></div>

<div class="uhr" id="13"></div>

<div class="alice" id="14"></div>

<div class="streif" id="15"></div>

<!-- platzhalter -->
<div class="platzhalter_banner">

<img src="navi/platzhalter/platzhalter_banner.png" width="769" height="132" border="0" usemap="#map_banner" />
<map name="map_banner" id="map_banner">
  <area onmouseover="sichtbarbanner(14)" onmouseout="unsichtbar(14);schrift(5)" shape="poly" coords="183,5,198,20,203,41,212,65,201,78,233,99,225,116,210,125,194,128,157,123,133,114,113,101,97,90,117,82,132,82,132,60,124,40,127,22,139,9,157,1" href="#" alt="Yukis Bereich" />
<area onmouseover="sichtbarbanner(15)" onmouseout="unsichtbar(15);schrift(5)" shape="poly" coords="658,124,689,103,703,85,703,64,680,49,662,62,664,32,660,20,652,24,649,3,624,3,614,21,596,30,571,19,571,32,584,48,583,66,588,80,591,83,589,96,581,107,580,124,624,126" href="#" />
</map>
<map name="map_banner">
</map>
</div>

<div class="platzhalter_birdy">
<img src="navi/platzhalter/platzhalter_birdy.png" width="231" height="163" border="0" usemap="#map_vogel" />
<map name="map_vogel" id="map_vogel">
  <area title="About" shape="poly" coords="98,110,84,89,98,65,108,53,102,45,88,48,81,78,76,70,58,32,49,51,53,83,40,111,-3,116,50,129,80,146,83,128,128,130,105,135,109,147,143,142,136,154,145,162,159,157,157,145,177,131,187,135,201,131,225,98,187,112,188,83,166,93,159,114,147,73,136,97,143,111,118,94" href="about.html" alt="über uns" onmouseover="sichtbar(1)" onmouseout="unsichtbar(1);schrift(5)" />
<area title="Impressum" onmouseover="sichtbar(2)" onmouseout="unsichtbar(2);schrift(5)" shape="poly" coords="123,2,145,72,164,76,165,61,228,42,230,2" href="impressum.html" alt="impressum" />
</map>
</div>

<div class="platzhalter_geschenke">
<img src="navi/platzhalter/platzhalter_geschenke.png" width="289" height="134" border="0" usemap="#map_geschenke" />
<map name="map_geschenke" id="map_geschenke">
  <area title="Danksagung" shape="poly" coords="38,29,84,6,105,9,114,51,128,46,124,31,136,29,150,45,165,29,178,29,175,48,197,49,198,18,200,10,247,8,252,25,241,74,252,75,264,90,252,99,275,100,285,111,277,131,11,135,13,110,2,99,6,75" href="danksagung.html" alt="danksagung" onmouseover="sichtbar(8)" onmouseout="unsichtbar(8);schrift(5)" />
</map></div>

<div class="platzhalter_pferdi">
<img src="navi/platzhalter/platzhalter_pferdi.png" name="map_pferdi" width="474" height="191" border="0" usemap="#map_pferdi" id="map_pferdi" />
<map name="map_pferdi" id="map_pferdi2">
  <area title="Zum Dank" shape="poly" coords="446,24,436,33,407,29,393,27,364,29,341,36,319,42,312,49,287,53,297,72,292,91,288,103,275,109,277,137,284,159,278,165,288,188,347,187,446,170,454,177,469,156,469,137,457,41" href="zumdank.html" alt="zum dank" onmouseover="sichtbar(9)" onmouseout="unsichtbar(9);schrift(5)" />
<area title="Links" shape="poly" coords="269,60,288,72,286,94,275,107,266,109,259,126,266,137,259,147,252,165,259,186,129,187,141,162,126,167,128,147,127,133,136,113,135,105,119,100,107,83,114,58,136,53,153,63,167,44,191,34,222,42,235,61,242,73,252,62" href="links.html" alt="links" onmouseover="sichtbar(10)" onmouseout="unsichtbar(10);schrift(5)" />
<area title="Sketchblog" shape="poly" coords="0,190,1,64,12,50,32,47,37,60,47,61,47,51,42,29,52,19,56,17,64,5,94,8,104,29,100,57,98,68,93,87,90,103,88,119,88,141,111,189" href="http://nonsens-online.blogspot.com/" alt="sketchblog" onmouseover="sichtbar(11)" onmouseout="unsichtbar(11);schrift(5)" />
</map></div>

<div class="platzhalter_schrank">
<img src="navi/platzhalter/platzhalter_schrank.png" width="189" height="617" border="0" usemap="#map_schrank" />
<map name="map_schrank" id="map_schrank">
  <area title="Shop" onmouseover="sichtbar(4)" onmouseout="unsichtbar(4);schrift(5)" shape="poly" coords="35,189,86,180,126,161,121,154,129,113,101,74,89,71,9,94,2,146,18,170" href="shop.html" alt="shop" />
<area title="Home" shape="poly" coords="128,4,154,4,175,16,185,36,183,92,152,91,148,97,162,120,160,151,171,149,184,154,156,162,140,175,127,168,129,161,150,154,155,124,140,102,144,89,120,82,77,59,81,41,102,22" href="home.html" alt="home" onmouseover="sichtbar(3)" onmouseout="unsichtbar(3);schrift(5)" />
<area title="Galerie" shape="poly" coords="28,189,7,210,12,225,34,222,51,254,44,265,31,266,25,270,40,314,52,313,184,325,185,164,124,184,39,193" href="galerie.html" alt="" onmouseover="sichtbar(5)" onmouseout="unsichtbar(5);schrift(5)" />
<area title="comic" shape="poly" coords="55,319,184,331,185,447,156,446,129,404,108,394,88,416,78,430,45,416,43,405,19,401,14,351,36,353" href="comic.html" alt="comic" onmouseover="sichtbar(6)" onmouseout="unsichtbar(6);schrift(5)" />
<area title="Gästebuch" shape="poly" coords="154,612,132,583,108,583,87,565,72,541,61,523,81,497,81,476,90,458,79,441,97,415,112,401,128,409,133,423,145,441,156,461,170,478,185,478,187,612" href="gaestebuch.html" alt="gästebuch" onmouseover="sichtbar(7)" onmouseout="unsichtbar(7);schrift(5)" />
</map></div>

<div class="platzhalter_uhr">
<img src="navi/platzhalter/platzhalter_uhr.png" width="187" height="600" border="0" usemap="#map_uhr" />
<map name="map_uhr" id="map_uhr">
  <area title="Projekte" shape="poly" coords="25,596,73,546,68,528,91,549,104,542,127,480,128,443,151,387,144,303,98,282,76,303,59,297,36,314,3,336,0,597" href="projekte.html" alt="projekte" onmouseover="sichtbar(12)" onmouseout="unsichtbar(12);schrift(5)" />
<area shape="poly" coords="44,6,75,19" href="#" />
<area title="News" onmouseover="sichtbar(13)" onmouseout="unsichtbar(13);schrift(5)" shape="poly" coords="2,73,29,51,11,39,12,23,39,11,41,3,77,18,121,-2,138,19,153,5,163,16,176,14,179,29,146,40,176,65,181,97,168,137,143,188,133,179,108,280,96,275,81,295,58,290,3,329" href="news.html" />
</map>
</div>
<!-- bereiche -->

<img src="navi/bereich/bereich_uhr.png" class="bereich_uhr" width="187" height="600" />
<img src="navi/bereich/bereich_pferdi.png" class="bereich_pferdi" width="474" height="191" />
<img src="navi/bereich/bereich_geschenke.png" class="bereich_geschenke" width="289" height="134" />
<img src="navi/bereich/bereich_schrank.png" class="bereich_schrank" width="189" height="617" />
<img src="navi/bereich/bereich_birdy.png" class="bereich_birdy" alt="#" width="231" height="163" />

<!-- schwarzer HG -->

<img src="navi/schwarz_hg/links.png" class="hg_links" width="180" height="641" />
<img src="navi/schwarz_hg/links_oben.png" class="hg_linksoben" width="255" height="159" />
<img src="navi/schwarz_hg/rechts.png" class="hg_rechts" width="200" height="584" />
<img src="navi/schwarz_hg/rechts_oben.png" class="hg_rechtsoben" width="256" height="216" />
<img src="navi/schwarz_hg/oben.png" class="hg_oben" width="769" height="132" />
<img src="navi/schwarz_hg/unten_links.png" class="hg_untenlinks" width="460" height="185" />
<img src="navi/schwarz_hg/unten_rechts.png" class="hg_untenrechts" width="440" height="168" />

<!-- schreibi -->


<div class="schreibi">

<div class="schrift" id="fenster"></div>

</div>
<!-- inhalt -->

<div class="HG_galerie">

	<table border="0" cellpadding="0" cellspacing="0" class="rahmen_charis">
    <tr>
    <td>
     <p class="text_rahmen">
		<a href="#">Traditionell</a><br />
        <a href="#" onclick="tabelle_an(2)">Digital</a><br />
        <a href="#">Outlines</a><br />
        <a href="#" onclick="tabelle_an(4)">Fanart</a><br />
        <a href="#">Sonstiges</a><br />
     </p>
     </td>
     </tr>
	</table>

	<table border="0" cellspacing="0" cellpadding="0" class="rahmen_issy">
    <tr>
    <td>
    <p class="text_rahmen">
    	<a href="#">Traditionell<br /></a>
        <a href="#">Digital<br /></a>
        <a href="#">Vektor<br /></a>
        <a href="#">Outlines<br /></a>
        <a href="#" onclick="tabelle_an(10)">Fanart<br /></a>
        <a href="#">Basteleien<br /></a>
        <a href="#">Sonstiges<br /></a>
     </p>
     </td>
     </tr>
	</table>
    
    <div class="galerie">
    
<!-- ----------------------------------------Fanart Issy-------------------------------------------- -->

     <table class="gallery" cellpadding="0" cellspacing="3px" id="tabelle10" style="display:none" >
      <tr>
       <td>
        <a href="inhalte/galerie/bilder/issy/fanart/bilder/Glaciola_1 Kopie.jpg" target="_blank"><img src="inhalte/galerie/bilder/issy/fanart/thumbs/grau/thumb_grau_1.jpg" name="bild_1" onmouseover="this.src='inhalte/galerie/bilder/issy/fanart/thumbs/farbig/thumb_1.jpg'" onmouseout="this.src='inhalte/galerie/bilder/issy/fanart/thumbs/grau/thumb_grau_1.jpg'"/></a>
       </td>
       
       <td>
        <a href="inhalte/galerie/bilder/issy/fanart/bilder/nachtara.jpeg" target="_blank"><img src="inhalte/galerie/bilder/issy/fanart/thumbs/grau/thumb_grau_2.jpg" onmouseover="this.src='inhalte/galerie/bilder/issy/fanart/thumbs/farbig/thumb_2.jpg'" onmouseout="this.src='inhalte/galerie/bilder/issy/fanart/thumbs/grau/thumb_grau_2.jpg'" /></a>
       </td>
       
       <td>   
        <a href="inhalte/galerie/bilder/issy/fanart/bilder/absol.jpeg" target="_blank"><img src="inhalte/galerie/bilder/issy/fanart/thumbs/grau/thumb_grau_3.jpg" onmouseover="this.src='inhalte/galerie/bilder/issy/fanart/thumbs/farbig/thumb_3.jpg'" onmouseout="this.src='inhalte/galerie/bilder/issy/fanart/thumbs/grau/thumb_grau_3.jpg'" /></a>
       </td>
      </tr>
       
     </table> 
     
<!-- ----------------------------------- Fanarts Charis--------------------------------------------- -->
     
     <table class="gallery" cellpadding="0" cellspacing="3px" id="tabelle4" style="display:block" >
      <tr> 
       <td>
       <a href="inhalte/galerie/bilder/charis/Fanart/bilder/1.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_1.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_1.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_1.jpg'" /></a>
       </td>
       
       <td>
       <a href="inhalte/galerie/bilder/charis/Fanart/bilder/2.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_2.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_2.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_2.jpg'" /></a>
       </td>
       
       <td> 
       <a href="inhalte/galerie/bilder/charis/Fanart/bilder/3.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_3.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_3.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_3.jpg'" /></a>  
       </td>
       
      </tr>
       
       <tr>
       <td>
       <a href="inhalte/galerie/bilder/charis/Fanart/bilder/4.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_4.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_4.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_4.jpg'" /></a>
       </td>
       
       <td>
       <a href="inhalte/galerie/bilder/charis/Fanart/bilder/5.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_5.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_5.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Fanart/thumbs/thumb_grau_5.jpg'" /></a>
       </td>
       
       <td> 
       </td>
       
       </tr>
       
     </table>
     
<!-- --------------------------------------------------------digital charis--------------------------------------------------- -->

 <table class="gallery" cellpadding="0" cellspacing="3px" border="1px" id="tabelle2" style="display:none;">
      <tr>
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/1.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_1.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_1.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_1.jpg'" /></a>

       </td>
       
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/2.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_2.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_2.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_2.jpg'" /></a>
       </td>
       
       <td>   
        <a href="inhalte/galerie/bilder/charis/Digital/bilder/3.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_3.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_3.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_3.jpg'" /></a>
       </td>
      </tr>
       
        <tr>
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/4.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_4.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_4.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_4.jpg'" /></a>
       </td>
       
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/5.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_5.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_5.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_5.jpg'" /></a>
       </td>
       
       <td> 
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/5.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_6.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_6.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_6.jpg'"/>  
       </td>
       </tr>
       
       <tr>
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/7.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_7.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_7.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_7.jpg'"/></a>
       </td>
       
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/8.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_8.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_8.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_8.jpg'" />
       </td>
       
       <td> 
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/9.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_9.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_9.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_9.jpg'" /></a>
       </td>
       </tr>
       
       <tr>
       <td>
       <a href="inhalte/galerie/bilder/charis/Digital/bilder/10.jpg" target="_blank"><img src="inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_10.jpg" onmouseover="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_10.jpg'" onmouseout="this.src='inhalte/galerie/bilder/charis/Digital/thumbs/thumb_grau_10.jpg'" /></a>
       </td>
       
       <td>
       </td>
       
       <td> 

       </td>
       </tr>
       
     </table>
    
    </div>
  
</div>

</div>


</body>
</html>

Vielen Dank im Voraus

Kelly

ComFreek · 8. April 2010

Also ich würde erstmal die anderen Fehler beheben.
(Geh mal hier zum W3C-Validator und kopier deinen Code bei Direct-Input rein)

Maik · 8. April 2010

Hi,

die Ursache findet sich in deinen zusätzlich verwendeten Bindestrichen (Minuszeichen) innerhalb der HTML-Kommentare "" vor den einzelnen Tabellen.

Beachten Sie:

Bereits die Zeichenfolge -- startet und beendet den Kommentar. Wenn Sie zur deutlichen Hervorhebung eines Kommentars Sonderzeichen als Trennlinie einsetzen wollen, dann verwenden Sie am besten nicht das Minuszeichen -, sondern irgendein anderes Zeichen, beispielsweise das Gleichheitszeichen = oder das Sternchen *.

Zitat-Quelle: http://de.selfhtml.org/html/allgemein/kommentare.htm

Übrigens darf ein ID-Bezeichner nicht mit einer Ziffer beginnen, wie z.B. hier:

HTML:

<div class="vogel" id="1"></div>

mfg Maik

kellykatz · 8. April 2010

Ahhh! Ok, es lag an meinen Kommentaren. Wusste gar nich, dass die so einen großen einfluss haben können.

Mit den Id's klappt es zurzeit wunderbar, aber möglicherweise hat dann ein anderer browser Probleme, ich werde in nächste Zeit mich auch darum kümmern, auch danke dafür.

Kelly

Maik · 8. April 2010

kellykatz hat gesagt.:
Mit den Id's klappt es zurzeit wunderbar, aber möglicherweise hat dann ein anderer browser Probleme

Alle Browser werden mit diesen "numerischen" ID-Bezeichnern ein Problem haben, sobald CSS mit einem ID-Selektor namens #1 {} und/oder Javascript beispielsweise mit der getElementById()-Methode ins Spiel kommen - siehe hierzu auch ID, IDREF oder Name der HTML-Attribut-Referenz.

mfg Maik

kellykatz · 9. April 2010

Naja gut, aber ich benutze die id nur in JS, also dürfte es ja keinen Konflikt geben oder? Zumnindest hat in FF und IE alles geklappt...
Ich werds aber trotzdem ändern.

✔ Tabelle wird nicht angezeigt

kellykatz

Grünschnabel

ComFreek

Mod | @comfreek

Maik

kellykatz

Grünschnabel

Maik

kellykatz

Grünschnabel

Neue Beiträge