div container problem

Status
Nicht offen für weitere Antworten.
O

ocinrezle

Gesperrt
hallo ich hab ein design erstellt un will für den content einen div container erstellen
jedoch habe ich das problem, dass sobald ich den container größer mache als 510px das ganze design sich verzieht sehr ihr irgendwo einen fehler?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
     <title>Tabellen</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
     <style type="text/css">
       .navi_bg {
         background-image: url(images/bg_navi.gif);
         background-color:blue;}

       .header {
         background-image: url(images/leiste_header.gif);
         background-color:white;}

       .header2 {
         background-image: url(images/header.gif);
         background-color:black;
         width: 1000px; height: 151px;}

       .header_schwarz {
         background-image: url(images/leiste_header_schwarz2.gif);
         background-color:black;}
        
       .box {
         background-image: url(images/bg_rechts.gif);}

       .bild{
         width: 200px; height: 100px; }

       .bild2{
          width: 77px; height: 100px; }

       .bild3{
          width: 77px; height: 21px; }
       
       .bild4{
          width: 77px; height: 14px; }

       .content{
         background-image: url(images/bg_inhalt.gif);}

       
       .home { width: 36px; }
       .news { width: 35px; }
       .about { width: 61px; }
       .talents { width: 45px; }
       .tracks { width: 42px; }
       .producer { width: 57px; }
       .beats { width: 32px; }
       .forum { width: 40px; }
       .gaestebuch { width: 67px; }
       .partner { width: 46px; }
       .topliste { width: 47px; }
       .kontakt { width: 47px; }
       .info { width: 23px; }
       .impressum { width: 68px; }
       .schrift { color: #ffffff; }
       #content { background-color: #f00; width: 510px; height: 490px; margin-left: 10px; margin-top: 0px;}
     </style>

   </head>
   
   <body bgcolor="#494949">
      <table border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
          <td  class="header"><img src="images/leiste_header_links.gif"></td>
          <td  class="header"colspan="4"><img src="images/button_upload.gif" align="right"></td>
          <td  class="header"><img src="images/button_profil.gif" align="right"></td>
          <td  class="header"colspan="2"><img src="images/leiste_header_rechts.gif" align="right"></td>
          <td  class="header_schwarz" colspan="6"><form action="auserten.php"><input name="username" type="text" size="15" maxlength="30" value="Username"> <input name="passwort" type="password" size="15" maxlength="30"><input type="submit" value="login"><input type="reset"></form>
  
</td>
        </tr>
        <tr>
          <td colspan="14"><img class="header2" src="images/header.gif"</td>
        </tr>
        <tr class="navi_bg">
          <td class="home"><a href="home.php"><img src="images/button_home2.gif"  border="0"></a></td>
          <td class="about"><img src="images/button_about.gif"></td>
          <td class="news"><img src="images/button_news.gif"></td>
          <td class="talents"><img src="images/button_talents.gif"></td>
          <td class="tracks"><img src="images/button_tracks.gif"></td>
          <td class="producer"><img src="images/button_producer.gif"></td>
          <td class="beats"><img src="images/button_beats.gif"></td>
          <td class="forum"><img src="images/button_forum.gif"></td>
          <td class="gaestebuch"><img src="images/button_gaestebuch.gif"></td>
          <td class="partner"><img src="images/button_partner.gif"></td>
          <td class="topliste"><img src="images/button_topliste.gif"></td>
          <td class="kontakt"><img src="images/button_kontakt.gif"></td>
          <td class="info"><img src="images/button_info.gif"></td>
          <td class="impressum"><img src="images/button_impressum.gif"></td>
        </tr>
        <tr>
          <td class="content" colspan="11" rowspan="9"><div id="content"></div></td>
          <td colspan="3"><img class="bild3" src="images/rechts.gif" align="left"><img src="images/leiste_rechts.gif" align="right"></td>
        </tr>
        <tr>
          <td colspan="11"><img class="bild2" src="images/rechts.gif" align="left"><img class="bild" src="images/bg_rechts.gif" align="right"></td>
        </tr>
        <tr>
          <td colspan="11"><img class="bild3" src="images/rechts.gif" align="left"><img src="images/leiste_rechts.gif" align="right"></td>
        </tr>
        <tr>
          <td colspan="11"><img class="bild2" src="images/rechts.gif" align="left"><img class="bild" src="images/bg_rechts.gif" align="right"></td>
        </tr>
        <tr>
          <td colspan="11"><img class="bild3" src="images/rechts.gif" align="left"><img src="images/leiste_rechts.gif" align="right"></td>
        </tr>
        <tr>
          <td colspan="11"><img class="bild2" src="images/rechts.gif" align="left"><img class="bild" src="images/bg_rechts.gif" align="right"></td>
        </tr>
        <tr>
          <td colspan="11"><img class="bild3" src="images/rechts.gif" align="left"><img src="images/leiste_rechts.gif" align="right"></td>
        </tr>
        <tr>
          <td colspan="11"><img class="bild2" src="images/rechts.gif" align="left"><img class="bild" src="images/bg_rechts.gif" align="right"></td>
        </tr>
        <tr>
          <td colspan="11"><img class="bild4" src="images/rechts.gif" align="left"><img src="images/leiste_unten_rechts.gif" align="right"></td>
        </tr>
      </table>

vielen dank
 
Hi,

ohne die eingebundenen Grafikelemente ist von einem verzogenen Layout erstmal nichts zu erkennen, aber vielleicht hilft es hier auch einfach weiter, wenn der Zellinhalt oben ausgerichtet wird?

Code: 
       .content{
         background-image: url(images/bg_inhalt.gif);
         vertical-align:top;}
Und achte in deinen Beiträgen bitte auf die Groß- und Kleinschreibung, wie in der Netiquette Nr.15 gefordert - vielen Dank.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück