• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Design Problem

kuscho

Mitglied
Ich hab auf der linken Seite eine Tabelle und möchte auch auf der rechten Seite eine Tabelle erstellen aber ich weiß nicht wie

HTML:
<!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" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>Magdi Fausi</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<!--[if lte IE 8]><style type="text/css">@import url("styles/ie.css");</style><![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="scripts/jquery.defaultvalue.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function ($) {
    $("#name, #email, #message").defaultvalue("Name", "Email", "Message");
});
</script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="wrapper col1">
  <div id="header" class="clear">
    <div class="fl_left">
      <h1>copts.org
    </h1></div><div class="fl_right">
      <ul>
        <li></li>
        <li class="active"></li>
        <li></li>
        <li><a href="index.html"><span>home</span></a></li>
        <li class="last"><a href="styling.html"><span>logout</span></a></li>
      </ul>
    </div>
  </div>
</div>
<div class="wrapper col2">
  <div id="topbar">
    <div id="crumb">
      <h2>Magdi Fausi</h2>
    </div>
  </div>
</div>
<div class="wrapper col3">
  <ul id="MenuBar1" class="MenuBarVertical">
    <li>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Alhan</a>
      <ul>
        <li><a href="#" class="MenuBarItemSubmenu">nach Interpret</a>
          <ul>
            <li><a href="#">Samir</a></li>
            <li><a href="#">Magdi</a></li>
            <li><a href="#">Shalfoun</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Hymmnen</a>
      <ul>
        <li><a href="#" class="MenuBarItemSubmenu">nach Interpret</a>
          <ul>
            <li><a href="#">Verena Saad</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Heiligen-Filme</a>
      <ul>
        <li><a href="#">auf Deutsch</a>        </li>
        <li><a href="#">auf Arabisch</a></li>
      </ul>
    </li>
    <li><a href="#">Bilder</a></li>
  </ul>
<div id="container">
    <!-- ## Start Content Area ## -->
    <div id="content">
      <h1>Auswahl</h1>
      <table border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="600">
        <tr>
          <td colspan='8'><span id="folder-player">
            <script type='text/javascript' src='/media/flashplayer/swfobject.js'></script>
            </span>
            <div id='mediaspace'></div>
            <span id="folder-player">
              <script type='text/javascript'>
  var so = new SWFObject('/media/flashplayer/player.swf','ply','600','24','9','#ffffff');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','');
  so.addVariable('streamer','rtmp://tasbeha.org/vod');
  so.addVariable('playerready','playerReadyCallback');
  so.addVariable('autostart', 'true');
  so.addVariable('client','9.0.60.184');
  so.write('mediaspace');
            </script>
            </span>
            </div></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
 
Zuletzt bearbeitet:
2. Teil

HTML:
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
 
3. Teil

HTML:
<tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Introduction" /></td>
          <td width="296"><span class="title">Scherevesleim</span></td>
          <td width="44" class="smallh" align="right">2:03</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="http://www.free.pages.at/kuscho/hymmn/scherevesleim.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
        <tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
          <td width="26"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/a.gif" border="0" width="26" height="16" alt="Conclusion to the Homily (Maren-er)" /></td>
          <td width="296"><span class="title">Conclusion to the Homily (Maren-er)</span></td>
          <td width="44" class="smallh" align="right">3:49</td>
          <td class="smallh" align="right" width="64">128 kbps</td>
          <td width="50"><a href="/media/index.php?st=Hymns%2FHoly_Week%2FIbrahim_Ayad%2FPart_1%2F15-Conclusion_to_the_Homily_%28Maren-er%29.1595.mp3"><img src="playt.gif" border="0" width="60" height="16" alt="Play + Read Lyrics" /></a></td>
          <td width="75"><img src="file:///C|/Users/TheGodfather/Desktop/Website copts/vorschlag/eher/nodownload.gif" border="0" width="75" height="16" alt="Please login" onclick="javascript:alert('Please login or register first.');window.scroll(0,1500)" /></a></td>
        </tr>
      </table>
      <p>&nbsp;</p>
</div>
    <!-- / ### --><!-- / ### -->
  <div class="clear"></div>
</div>
</div>
<div class="wrapper col4">
  <div id="socialbar" class="clear">
    <div class="fl_left">
      <p>Besuchen Sie unsere Seite auch auf den folgenen Sozialen Netzwerken.<a href="#">About 10 hours ago. from Web</a></p>
    </div>
    <div class="fl_right">
      <ul>
        <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>
        <li class="linkedin"><a href="#" title="Linked In">Linked In</a></li>
        <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>
        <li class="flickr last"><a href="#" title="Flickr">Flickr</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="wrapper col5">
  <div id="footer" class="clear"></div>
</div>
<div class="wrapper col6">
  <div id="copyright" class="clear">
    <p class="fl_left">Copyright &copy; 2011 -copts.org, All Rights Reserved</p>
    <p class="fl_right">edited by: <a href="http://www.design-coder.com/" target="_blank">kuscho</a></p>
  </div>
</div>
<!-- END PAGE SOURCE -->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
 
Das ist doch schon eine riesengroße Tabelle? Zeig mal einen Link zur Seite damit man sich vorstellen kann was Du mit links und rechts meinst.
 
Da hast da übrigens nen ganzen Haufen unnötiges Javascript und veraltete HTML-Attribute.

Das hier
<tr bgcolor="#FFFFFF" onmouseover="this.bgColor='#EFEFEF';" onmouseout="this.bgColor='#FFFFFF';">
kommt zig mal vor.
Java-Script ist an dieser stelle unnötig und das Attribut bgcolor="" ist veraltet!

Den gleichen Effekt erreichst du mit CSS so:
HTML:
.beispiel_spalte{
    background-color: #FFFFFF;
}

.beispiel_spalte:hover{
    background-color: #EFEFEF;
}

<tr class="beispiel_spalte">
Der CSS-Code muss nur ein einziges mal angebracht werden, statt in jeder betreffenden Zeile erneut (Stichwort: Traffic)!
Außerdem ist Javascript browserseitig abschaltbar, was dein Styling zerstören würde
 
Zurück
Oben