Table ist zu lang

Francis

Hallo!

Ich bin mit meinem sehr bescheidenen (HTML- und CSS-) Latein am Ende:

Kann mir jemand sagen, wie ich es schaffe, hier die Tabelle/n in der Höhe (mit weiterer Verwendung der position:relative; - Styles für den Inhalt) dem Inhalt (siehe linke Spalte) anzugleichen bzw. wie ich es schaffe, die viel zu lange Tabelle (grauer Hintergrund) zu verkürzen??

Hoffe, das ist so richtig hier eingetragen - bin neu im Forum

So sieht's derzeit aus:
Seite

HTML

<HTML>
<HEAD>
    <TITLE>Radio Metropolis - Banner und Teaser</TITLE>




<META http-equiv=content-type content="text/html; charset=ISO-8859-1">
<META http-equiv=expires content=0>
<meta name="description" content="Webradio Metropolis: Pop, Rock, Electro, 80s und mehr...">
<meta name="keywords" content="gothic, industrial, banner, elektro, electro, techno, dance, pop, rock, futurepop, 80s, achtziger, oldies, ndw, webradio web radio, internetradio, internet radio, aachen, mittelalter">














 












<script language="JavaScript"><!--


browserName = navigator.appName;


browserVer = parseInt ( navigator.appVersion );






version = "n2";


if ( browserName == "Netscape" && browserVer >= 3 ) version = "n3";


if ( browserName == "Microsoft Internet Explorer" && browserVer >=4 ) version = "e4";






if ( version == "n3" || version == "e4" )


{






              banner_on = new Image (  );


           banner_on.src = "images/banner_on.gif";

        news_on = new Image (  );


           news_on.src = "images/news_on.gif";


        downloads_on = new Image (  );


           downloads_on.src = "images/downloads_on.gif";

           blog_on = new Image (  );


           blog_on.src = "images/blog_on.gif";

           contact_on = new Image (  );


           contact_on.src = "images/contact_on.gif";


           homepage_on = new Image (  );


           homepage_on.src = "images/homepage_on.gif";















           banner_off = new Image (  );


           banner_off.src = "images/banner_off.gif";

        news_off = new Image (  );


           news_off.src = "images/news_off.gif";


        downloads_off = new Image (  );


           downloads_off.src = "images/downloads_off.gif";

           blog_off = new Image (  );


           blog_off.src = "images/blog_off.gif";

           contact_off = new Image (  );


           contact_off.src = "images/contact_off.gif";


           homepage_off = new Image (  );


           homepage_off.src = "images/homepage_off.gif";
















}






function button_on ( imgName )


{


        if ( version == "n3" || version == "e4" )


        {


                butOn = eval ( imgName + "_on.src" );


                document [imgName].src = butOn;


        }


}






function button_off ( imgName )


{


        if ( version == "n3" || version == "e4" )


        {


                butOff = eval ( imgName + "_off.src" );


                document [imgName].src = butOff;


        }


}


// --></script>










<link rel="stylesheet" type="text/css" href="style.css">




</HEAD>




<BODY BGCOLOR="#000000" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">




<!-- MAIN HOLDING TABLE -->
<table border="0" cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr><td align="center" valign="middle" bgcolor="000000">




<table border="0" cellpadding=0 cellspacing=0 width="750" height="100%" bgcolor="ffffff">






<TR>


<td valign="top" background="images/shadow_banner.gif">




    <!-- CONTENT TABLE -->
    <table border="0" cellpadding=0 cellspacing=-0 width="390">
    <tr><td>
    <img src="images/banner.gif"></td>

    <td background="images/shadow.gif"><img src="images/space.gif" width="10" height="1"></td>

    <td valign="top" bgcolor="#ffffff"> &nbsp;&nbsp; <a href="index.html"><img src="images/logo_klein.gif" border="0"></a>
    </td></tr>




    <tr bgcolor="000000">
    <td valign="top">
 


    


         <!-- MENU -->
        <table border="0" cellpadding="0" cellspacing="0">
        <tr>
        <td>
        <img src="images/space.gif" width="10" height="1"></td>
        <td>
        <a href="index.html"
        onmouseout="button_off('homepage'); return true" 
        onmouseover="button_on('homepage'); return true">
        <img src="images/homepage_off.gif"  border="0" name="homepage"></a><img src="images/leer2.gif"></td></td>



                <td>
        <a href="contact.html"
        onmouseout="button_off('contact'); return true" 
        onmouseover="button_on('contact'); return true">
        <img src="images/contact_off.gif"  border="0" name="contact"></a><img src="images/leer2.gif"></td>


                <td>
        <a href="downloads.html"
        onmouseout="button_off('downloads'); return true" 
        onmouseover="button_on('downloads'); return true">
        <img src="images/downloads_off.gif"  border="0" name="downloads"></a><img src="images/leer2.gif"></td>


            <td>
        <a href="banner.html"
        onmouseout="button_off('banner'); return true" 
        onmouseover="button_on('banner'); return true">
        <img src="images/banner_off.gif" border="0" name="banner"></a><img src="images/leer1.gif"></td>



                <td>
        <a href="blog.html"
        onmouseout="button_off('blog'); return true" 
        onmouseover="button_on('blog'); return true">
        <img src="images/blog_off.gif"  border="0" name="blog"></a><img src="images/leer1.gif"></td>




        </tr></table>




    </td>
    <td><img src="images/space.gif" width="10" height="1"></td>
    <td><img src="images/space.gif" width="10" height="1"></td>
    </tr>








    <TR>
    <td valign="top" background="images/bg_banner.gif"  width="390">






        <!-- PAGE COPY 1 -->
        <table border="0" cellpadding="0" cellspacing="0" align="left" width=320">
        <tr>

        <td>
        <img src="images/space.gif" width="37"></td>

        <td>


        <P><BR>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
         <img src="images/verschiedenes.gif" alt="Verschiedenes" title="verschiedenste Teaser">

 

<a href="images/metropolis_angel_teaser.jpg" target="_blank" style="position:relative; top:10px; left:55px; z-index:1;"><img src="images/metropolis_angel_teaser_klein.jpg" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-121px; left:46px; z-index:0; height:145px; width:218px;">
<div style="position:relative; top:-110px; left:-10px;">
<textarea cols="40">
<a href="http://www.metropolis-radio.de/"" target="_blank"><img src="images/metropolis_angel_teaser.jpg" title="Radio Metropolis - das postmoderne Webradio" border="0"></a> 
</textarea></div> 




<a href="images/metropolis_popoklatsche_teaser.jpg" target="_blank"><img src="images/metropolis_popoklatsche_teaser_klein.jpg" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-65px; left:55px; z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-201px; left:46px; z-index:0; height:150px; width:218px;">
<div style="position:relative; top:-185px; left:-10px;">
<textarea cols="40">
<a href="http://www.metropolis-radio.de/"" target="_blank"><img src="images/metropolis_popoklatsche_teaser.jpg" title="Radio Metropolis - das postmoderne Webradio" border="0"></a>
</textarea></div>




<a href="images/metropolis_banner_fetish.jpg" target="_blank"><img src="images/metropolis_banner_fetish_klein.jpg" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-131px; left:52px; z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-446px; left:43px; z-index:0; height:345px; width:218px;">
<div style="position:relative; top:-446px; left:-17px;">
<textarea cols="40">
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_banner_fetish.jpg" title="Radio Metropolis - das postmoderne Webradio" border="0"></a>
</textarea></div>
 


<a href="images/transformers_metropolis_banner.gif" target="_blank"><img src="images/transformers_metropolis_banner_klein.gif" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-398px; left:60px; z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-536px; left:51px; z-index:0; height:153px; width:197px;">
<div style="position:relative; top:-520px; left:-15px;">
<textarea cols="40">
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/transformers_metropolis_banner.gif" title="Radio Metropolis - das postmoderne Webradio" border="0"></a>
</textarea></div>    




<a href="images/radio_metropolis_teaser_new.jpg" target="_blank"><img src="images/radio_metropolis_teaser_new_klein.jpg" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-475px; left:55px;z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-723px; left:46px; z-index:0; height:273px; width:197px;">
<div style="position:relative; top:-720px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/radio_metropolis_teaser_new.jpg" title="Radio Metropolis - das postmoderne Webradio" border="0"></a>
</textarea></div>






<a href="images/metropolis_breaking_bad_teaser.jpg" target="_blank"><img src="images/metropolis_breaking_bad_teaser_klein.jpg" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-675px; left:20px;z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-815px; left:10px; z-index:0; height:155px; width:268px;">
<div style="position:relative; top:-800px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_breaking_bad_teaser.jpg" title="Radio Metropolis - Moderatoren gesucht!" border="0"></a>
</textarea></div>



<a href="images/metropolis_stern_teaser.jpg" target="_blank"><img src="images/metropolis_stern_teaser_klein.jpg" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-755px; left:-2px;z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-895px; left:-11px; z-index:0; height:155px; width:318px;">
<div style="position:relative; top:-878px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_stern_teaser.jpg" title="Radio Metropolis - H&ouml;rer weltweit gestehen" border="0"></a>
</textarea></div>



<a href="images/metropolis_spun_teaser.jpg" target="_blank"><img src="images/metropolis_spun_teaser_klein.jpg" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-828px; left:22px;z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-1015px; left:14px; z-index:0; height:206px; width:267px;">
<div style="position:relative; top:-1002px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_spun_teaser.jpg" title="Radio Metropolis - täglich live drupp..." border="0"></a>
</textarea></div>




<a href="images/metropolis_sau_1.gif" target="_blank"><img src="images/metropolis_sau_1_klein.gif" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-950px; left:52px; z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-1293px; left:44px; z-index:0; height:380px; width:216px;">
<div style="position:relative; top:-1300px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_sau_1.gif" title="Metropolis - schalt mich ein, du Sau!" border="0"></a>
</textarea></div>


<div style="position:relative; top:-1275px; left:-15px;"><em><strong>klein (200 x 342):</strong></em>
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_sau_1_klein.gif" title="Metropolis - schalt mich ein, du Sau!" border="0"></a>
</textarea></div>




<a href="images/metropolis_devil_1.jpg" target="_blank"><img src="images/metropolis_devil_1_klein.jpg" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-1225px; left:52px; z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-1503px; left:44px; z-index:0; height:305px; width:216px;">
<div style="position:relative; top:-1500px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_devil_1.jpg" title="Metropolis - eintreten und sich wohlf&uuml;hlen!" border="0"></a>
</textarea></div>




<a href="images/metropolis_macht_suechtig2.gif" target="_blank"><img src="images/metropolis_macht_suechtig2.gif" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-1450px; left:52px; z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-1700px; left:44px; z-index:0; height:274px; width:212px;">
<div style="position:relative; top:-1695px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_macht_suechtig2.gif" title="Metropolis - das Webradio, das s&uuml;chtig macht!" border="0"></a>
</textarea></div>




<a href="images/metropolis_comedy_street.gif" target="_blank"><img src="images/metropolis_comedy_street.gif" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-1672px; left:72px; z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-1646px; left:-100px; z-index:0; height:250px; width:175px;">
<div style="position:relative; top:-1645px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_comedy_street.gif" title="Metropolis - das Webradio, das s&uuml;chtig macht!" border="0"></a>
</textarea></div>




<a href="images/metropolis_teaser_popoclub.gif" target="_blank"><img src="images/metropolis_teaser_popoclub.gif" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-1595px; left:60px; z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-1822px; left:51px; z-index:0; height:250px; width:209px;">
<div style="position:relative; top:-1815px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_teaser_popoclub.gif" title="Radio Metropolis featuring POPO CLUB: Wir feiern 25 Jahre Arschficken!" border="0"></a>
</textarea></div>




<a href="images/metropolis_flyer_2009.gif" target="_blank"><img src="images/metropolis_flyer_2009_klein.gif" title="tats&auml;chliche Gr&ouml;&szlig;e (&ouml;ffnet im neuen Fenster)" style="position:relative; top:-1765px; left:60px; z-index:1;" border="0"></a>
<img src="images/shadow_banner.gif" style="position:relative; top:-2009px; left:51px; z-index:0; height:270px; width:218px;">
<div style="position:relative; top:-2000px; left:-15px;">
<textarea cols="40"
<a href="http://www.metropolis-radio.de/" target="_blank"><img src="images/metropolis_flyer_2009.gif" title="Metropolis - das postmoderne Webradio" border="0"></a>
</textarea></div> 
     <!-- COPYRIGHT -->
<div style="position:relative; top:-1950px; left:18px;">
         Metropolis Radio &copy; 2010 -  <font color="ffffff">Powered by  <a href="http://www.radiostream.de/partner/metropolis" target="_blank">Radiostream.de</a></font>


 
        <img src="images/space.gif" width="283" height="1"> 




 


 




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




    


    

    </td>
    <td background="images/shadow_modified.gif"><img src="images/shadow_modified.gif" width="10" height="1"></td>
    <td background="images/bg_banner_2.gif" height="291" valign="top">

        <!-- PAGE COPY RIGHT -->
        <table border="0" cellpadding="0" cellspacing="0" width="320" align="left">
        <tr>

        <td>
        <img src="images/space.gif" width="37" height="1"></td>

        <td>
            <div align="left"><img src="images/under_construction.PNG" height="232" width="300"></div>
                <br><font size="4"><font color="#000000"><em>...wird fortgesetzt</em></font></font>


        





        <P><BR>

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


    </td>
    </tr>






    <TR>
    <td valign="top" background="images/bg_banner_2.gif" width="390">




         




    


    

    </td>

    <td background="images/shadow.gif"><img src="images/space.gif" width="10" height="1"></td>
    <td valign="top" bgcolor="ffffff">
    <img src="images/pic_right2.jpg" width="350" height="319"></td>

    </tr>



    <TR>

    <TD valign="top" colspan="3" bgcolor="000000" width="750" height="100%">


        <!-- BOTTOM TABLE -->
        <table border="0" cellpadding=0 cellspacing=0 width="750" height="100%">
        <TR><TD width="390">

        &nbsp;
        </td>

        <td background="images/shadow.gif" width="10"><img src="images/space.gif" width="10" height="1"></td>

        <td valign="top" bgcolor="ffffff" width="350">
        &nbsp;</td>

        </tr></table>


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


</td>






</tr></table>
</td></tr></table>
</BODY>
</HTML>

Alles anzeigen

Wäre echt super, wenn mir einer helfen könnte.

Grevas

Style es anders. Ohne margin-top / top -x bei relativer positionierung, der Platz wird nämlich trotzdem reserviert.
Für irgendwelche overlays, solltest du stattdessen z.B. position: absolute; verwenden. da kannst du auch dein margin -x benutzen.

Francis

Ja, danke für die prompte Antwort.

Ich werde mal die margin - Attribute rausnhemen
- und dann schauen, ob es daran gelegen hat.

Grevas

Es liegt daran, kannst sie ja mal auskommentieren (so hast du wenigstens noch die Werte ). Und wie gesagt, die overlays mit position: absolute; placen. Die werden dann von den anderen Elementen ignoriert (wegen Höhe und co.)

Tags