Loading...   Upload Image

Div verrutscht!Forum » Webzone » (X)HTML & CSS » Div verrutscht!

Neues Thema verfassen Neues Thema

  • SasumiUser ist offline
    Newbie


    Sasumi

    Registriert: 01.04.2009
    Beitraege: 2

    17.07.2011 um 22:19 Uhr

    Hey,
    Ich hab ein kleines Problem mit meinem Div.Ich bin gerade dabei meinen eigenen Blog zu erstellen und benutze einen Div der sich bei Firefox auf dem richtigen Platz befindet bei Safari und Google Chrome jedoch verrutscht. Kann mir bitte jemand helfen? Ich bin echt ratlos.

    Hier ist mein HTML-Code:

    <!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
    <html>
    <head>
      <title>test3</title>
    
    
      <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
    
    </head>
    
    
    <body style=\"background-image: url(http://www.bilder-hochladen.net/files/3a3j-8a-f90f.jpg);\">
    
    <table style=\"text-align: left; position: absolute; left: 207px; width: 796px; height: 100%; top: 0pt;\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
    
      <tbody>
    
        <tr>
    
          <td colspan=\"5\" align=\"left\" background=\"http://www.bilder-hochladen.net/files/big/3a3j-8b-9c83.jpg\" height=\"280\" valign=\"middle\">
          <div class=\"navi\"><a href=\"#\">Home</a>
          </div>
    
          <div class=\"navi2\"><a href=\"#\">Stuff</a></div>
    
          <div style=\"position: absolute; left: 207px; width: 799px; top: 254px; height: 35px;\"><span class=\"nav\"><a href=\"#\">Diary</a></span>
          <span class=\"nav\"><a href=\"#\">Sweets</a></span><span class=\"nav\"><a href=\"#\">Literary
    Box</a><span class=\"nav\"><a href=\"#\">Fangasm</a></span>
          <span class=\"nav\"><a href=\"#\">Profile </a></span><span class=\"nav\"><a href=\"#\">Music?</a></span></span></div>
    
          </td>
    
        </tr>
    
        <tr>
    
          <td class=\"inhalt\">At vero eos et accusam et justoduo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
    est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum
    iriure dolor in hendrerit in &nbsp;&nbsp; vulputate velit esse
    molestie consequat,
    vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
    iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
    duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
    veniam, quis nostrud exerci &nbsp; ptua. At vero eos et accusam et justo duo dolores et ea
    rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
    est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum
    iriure dolor in hendrerit in vulputate velit esse molestie consequat,
    vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
    iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
    duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
    veniam, quis nostrud exerci
    Lorem
    ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
    est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum
    iriure dolor in hendrerit in vulputate velit esse molestie consequat,
    vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
    iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
    duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
    veniam, quis nostrud exerci </td>
    
        </tr>
    
        <tr>
    
          <td colspan=\"5\" class=\"footer\" align=\"left\" background=\"http://www.bilder-hochladen.net/files/3a3j-89-839a.jpg\" height=\"123\" valign=\"middle\"> </td>
    
        </tr>
    
      </tbody>
    </table>
    
    </body>
    </html>
    


    Hier ist mein CSS-Code:
    tbody {
    float: left;
    color: #000000;
    font-family: Georgia;
    text-align:justify;
    line-height: 12px;
    font-size: 10px;
    letter-spacing: 0px;
    cursor: url(http://cur.cursors-4u.net/smilies/smi-2/smi166.cur), progress;
    }
    
    .inhalt {
    padding: 20px;
    padding-top: 10px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;
    }
    
    .inhalt2 {
    padding: 20px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    width: 150px;
    }
    
    .nav a:link, .navi a:visited
    { color:#e7e3e2; 
    text-decoration:none;
    font-family: Corbel, sans-serif; 
    font-size: 14px;
    text-align:center; 
    vertical-align:middle;
    border-right: 2px solid #FFFFFF;
    filter:alpha(opacity=30); /* IE */
    opacity:0.3; /* allgemein */
    -moz-opacity:0.3; /* Mozilla */
    -khtml-opacity:0.3; /* KTHML */
    -opera-opacity:0.3; /* Opera */
    }
    
    .nav a:hover 
    {color:#FFFFFF; 
    text-decoration:none; 
    font-family: Corbel, sans-serif; 
    font-size: 14px; 
    text-align:center; 
    vertical-align:middle;
    border-right: 2px solid #b30026;
    cursor: url(http://cur.cursors-4u.net/smilies/smi-2/smi166.cur), progress;
    text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset \'blur\' colour */
      -moz-text-shadow: 0 0 2px #000;
      -webkit-text-shadow: 0 0 2px #000;
    filter:alpha(opacity=100); /* IE */
    opacity:1; /* allgemein */
    -moz-opacity:1; /* Mozilla */
    -khtml-opacity:1; /* KTHML */
    -opera-opacity:1; /* Opera */
    }
    
    
    .navi a:link, .navi a:visited
    { color:#e7e3e2; 
    text-decoration:none;
    font-family:vani; 
    font-size:11px;
    background-image:url(http://www.bilder-hochladen.net/files/3a3j-8c-1700.jpg);
    background-repeat:repeat-x;
    display: inline-block;  
    width:320px;
    height:135px;
    position: absolute;
    float: center; 
    left: 683px; 
    width: 320px; 
    padding-top: 0px;
    top: 0px; 
    text-align:center; 
    vertical-align:middle;
    } 
    
    
    
    
    
    
    .navi a:hover 
    {color:#FFFFFF; 
    text-decoration:italic; 
    font-family:Tw Cen MT Condensed Extra Bold; 
    font-size:28px; 
    background-image:url(http://www.bilder-hochladen.net/files/3a3j-8e-6883.jpg); 
    background-repeat:repeat-x; 
    display: inline-block; 
    width:320px;
    height:135px;
    height:135px;
    position: absolute;
    float: center; 
    left: 683px; 
    width: 320px; 
    padding-top: 0px;
    top: 0px;
    text-align:center; 
    vertical-align:middle;
    cursor: url(http://cur.cursors-4u.net/smilies/smi-2/smi166.cur), progress;
    text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset \'blur\' colour */
      -moz-text-shadow: 0 0 2px #000;
      -webkit-text-shadow: 0 0 2px #000;
    
    }
    
    .navi{
        text-align:left;
        margin:0 auto;    
    }
    
    
    .navi2 a:link, .navi a:visited
    { color:#e7e3e2; 
    text-decoration:none;
    font-family:vani; 
    font-size:12px;
    background-image:url(http://www.bilder-hochladen.net/files/3a3j-8d-53c3.jpg);
    background-repeat:repeat-x;
    display:inline-block;  
    width:320px;
    height:135px;
    position: absolute; 
    left: 683px; 
    width: 320px; 
    top: 126px;
    text-align:left; 
    vertical-align:middle;
    }
    
    .navi2 a:hover 
    {color:#FFFFFF; 
    text-decoration:italic; 
    font-family:Tw Cen MT Condensed Extra Bold;
    font-size:28px; 
    background-image:url(http://www.bilder-hochladen.net/files/3a3j-8f-4918.jpg); 
    background-repeat:repeat-x; 
    display:inline-block; 
    width:320px;
    height:135px;
    position: absolute; 
    width: 320px; 
    top: 126px;
    text-align:left; 
    vertical-align:middle;
    cursor: url(http://cur.cursors-4u.net/smilies/smi-2/smi166.cur), progress;
    text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset \'blur\' colour */
      -moz-text-shadow: 0 0 2px #000;
      -webkit-text-shadow: 0 0 2px #000;
    
    }
    
    .navi2{
        text-align:left;
        margin:0 auto;
     }   
    


    Hier hab ich auch noch ein Bild von dem verrutschten Div in Safari:

    klick!



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1058

    21.07.2011 um 10:06 Uhr

    Darf man fragen warum du Tabellen zum Layouten nutzt? o.0
    Tabellen sind zur Tabellarischen Darstellung gedacht ...

    Dann kannst gleich ueberall Tabellen verwenden, dann brauchst dir um die verschobenen Div's keinen Kopf mehr machen. Oder aber du schmeisst die Tabellen raus und nutzt stattdessen Div's...

    Such's dir aus, in so nem Mix, mag ich nicht wirklich drin rum wuehlen, um dem verschobenen Div auf die Schliche zu kommen...



    ... { signatur } ...

[ 1 ] Seite 1 von 1


       ALL-INKL.COM - Webhosting Server Hosting Domain Provider