kostenloser Webspace werbefrei: lima-city

table weitet sich unerwünscht aus

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   sincer

   

   sincer hat kostenlosen Webspace.

   12:06, 22.5.2008

   ho ;)
   
   ich habe mal wieder eines meiner typischen probleme - liegt eindeutig an der noch zu unreichenden erfahrung XD
   
   also mir wurde schon bei dem problem geholfen, die divs in den table zu bringen :P
   (vielen dank dafür nochmal)
   
   jetzt habe ich das nächste problem...
   ich stelle meine div felder der reihe nach in meinen table, und der table breitet sich immer mehr nach unten aus...
   und ich habe ka warum... ich schätze, dass es was mit dem position:relative zu tun hat, aber mit absolute springen mir meine divs aus dem table... also ka wie ich diese tabellen überdehnung wegbekomme :/
   
   hier ist mal der source:
   

   <table width=\"400\" height=\"400\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">
     <tr>
       <td height=\"400\" bgcolor=\"#00FF00\" valign=\"top\">
   		<div style=\"padding-left: 0px; padding-top: 0px; width:10px; height: 400px; position:absolute; background-color: #FF0000; layer-background-color: #FF0000; border: 0px none #000000;\">		
   		</div>
   		<div style=\"padding-left: 0px; padding-top: 0px; width:400px; height: 10px; position:absolute; background-color: #FF0000; layer-background-color: #FF0000; border: 0px none #000000;\">		
   		</div>
   		<div style=\"padding-left: 0px; padding-top: 0px; position:relative; top:0px; left:390px; width:10px; height:400px; background-color: #FF0000; layer-background-color: #FF0000; border: 0px none #000000;\">
   		</div>
   		<div style=\"padding-left: 0px; padding-top: 0px; top: 0px; width:400px; height: 10px; position:relative; background-color: #FF0000; layer-background-color: #FF0000; border: 0px none #000000;\">
   		</div>
   		<div style=\"padding-left: 10px; padding-top: 0px; left: 30px; top: -50px; width:40px; height: 20px; position:relative; background-color: #0000FF; layer-background-color: #FF0000; border: 0px none #000000;\"><strong>Start</strong>
   		</div>
   		<div style=\"padding-left: 0px; padding-top: 0px; left: 100px; top: -180px; width:20px; height: 150px; position:relative; background-color: #FF0000; layer-background-color: #FF0000; border: 0px none #000000;\">
   		</div>
   	</td>
     </tr>
   </table>

   
   
   anschauen kann man sich das ganze unter:
   http://sincer.lima-city.de/div/div3.html
   
   kurz gesagt: der grüne rand, der außerhalb des roten vierecks liegt soll weg XD
   bin für jeden lösungsvorschlag offen ;)
   
   thx schonmal im vorraus
   Sincer

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. robin

   

   robin hat kostenlosen Webspace.

   13:43, 22.5.2008

   mache um den ganzen zelleninhalt noch ein div
   

   <tr>
   <td bgcolor=\"#00FF00\" valign=\"top\">
   <div style=\"height:400px;width:400px;overflow:hidden;\">
   <div id=\"d1\"></div>
   <div id=\"d2\"></div>
   <div id=\"d3\"></div>
   <div id=\"d4\"></div>
   <div id=\"d5\"><strong>Start</strong></div>
   <div id=\"d6\"></div>
   </div>
   </td>
   </tr>

   
   ich hab deinen divs mal ne id gegeben und den rest im styleteil aufgeschrieben
   

   <style type=\"text/css\">
   <!--
   body{
    background-color: #FFF;
   }
   #d1,#d2,#d3,#d4,#d6{
    padding-left:0px;
    padding-top: 0px;
    background-color:      #F00; 
    layer-background-color:#F00; 
    border: 0px none #000;
   }
   #d1,#d2{
    position:absolute; 
   }
   #d3,#d4,#d5,#d6{
    position:relative;
   }
   #d1{width:  10px; height:390px;}
   #d2{width: 400px; height: 10px;}
   #d3{top:     0px; left:  390px;
       width:  10px; height:390px;}
   #d4{top:    -10px;
       width: 400px; height: 10px;}
       
   #d5{padding-left:10px; padding-top: 0px;
       top:   -60px; left:   30px;
       width:  40px; height: 20px; 
       background-color:      #00F; 
       layer-background-color:#F00; 
       border: 0px none #000;}
   #d6{top:  -180px; left:  100px;
       width:  20px; height:150px;}
   -->
   </style>

   
   
   
   Beitrag geändert: 22.5.2008 13:44:24 von robin
4. Autor dieses Themas

   sincer

   

   sincer hat kostenlosen Webspace.

   14:01, 22.5.2008

   erst mal... vielen dank für deine mühe ;)
   
   ich habe aus zeit gründen (muss essen) mal eben nur deines kopiert...
   und es schaut auf jedenfall besser aus...
   
   hochgeladen:
   http://sincer.lima-city.de/div/div4.html
   
   ein kleiner rand ist allerdings nocht... ka. warum, aber ich schaus mir noch genauer an...
   oder sollte noch etwas anders gemacht werden?
   
   thx für die hilfe ;)
   Sincer

5. robin

   

   robin hat kostenlosen Webspace.

   14:52, 22.5.2008

   nö - war mein fehler - ich habs nur in der vorschau von frontpage betrachtet
   das muss noch in den style bereich:
   

   #d1,#d2,#d3,#d4,#d6{
    font-size:1px;
   }

   
   und bei #d4 darf nur stehen top:0px;
6. Autor dieses Themas

   sincer

   

   sincer hat kostenlosen Webspace.

   15:27, 22.5.2008

   Vielen dank für die hilfe!
   funktioniert super :P
   
   von CSS verstehe ich noch nicht alles, aber das was du gemacht hast leuchtet mir so halbwegs ein :P
   habe nur nicht daran gedacht, dass man das auch so \"schön\" auflösen kann :D
   
   thx
   Sincer

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?