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!



    Antworten  Antworten Zitat  Zitat
  • 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 } ...
    Antworten  Antworten Zitat  Zitat

[ 1 ] Seite 1 von 1


Neuste Tutorials

Neuste Forenthemen

Neuste Kommentare

       ALL-INKL.COM - Webhosting Server Hosting Domain Provider