Ergebnis 1 bis 5 von 5

Thema: Div verrutscht!

  1. #1
    HTML Newbie
    Registriert seit
    17.07.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div verrutscht!

    Hallo,

    Ich bin gerade dabei meinen eigenen Blog zu erstellen und benutze einen Div wo sich Bilder drin befinden sollen die beim Mouseover switchen aber das ist jetzt eher unwichtig, mein eigentliches Problem ist ja, dass bei Firefox der Div sich auf dem richtigen Platz befindet beim Safari und Google Chrome jedoch verrutscht. Kann mir bitte jemand helfen? Ich bin echt ratlos.

    Hier ist mein HTML Code:
    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="#">&nbsp;&nbsp;&nbsp;
          <br>
          <br>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp;Home</a>
          </div>
          <div class="navi2"><a href="#"><br>
          <br>
    &nbsp; Stuff</a></div>
          <div
     style="position: absolute; left: 207px; width: 799px; top: 254px; height: 35px;"><span
     class="nav"><a href="#">&nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
    Diary&nbsp;</a></span>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp;&nbsp;&nbsp; <span class="nav"><a
     href="#">Sweets </a></span>&nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp;&nbsp; <span class="nav"><a href="#">Literary
    Box &nbsp;</a></span> &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp;<span class="nav"><a href="#">Fangasm&nbsp;</a></span>
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
    &nbsp; &nbsp;&nbsp; <span class="nav"><a
     href="#">Profile </a></span>&nbsp;
    &nbsp; &nbsp;
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; <span class="nav"><a href="#">Music?&nbsp;</a></span></div>
          </td>
        </tr>
        <tr>
          <td class="inhalt">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 &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 <br>
          <br>
    &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.<br>
          <br>
          <br>
    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 <br>
          <br>
          <br>
    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.<br>
          <br>
          <br>
    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 <br>
          <br>
          <br>
          </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>
    <br>
    </body>
    </html>
    Und hier mein CSS-Code:
    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!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Div verrutscht!

    Also, dass bei dem Design Darstellungsfehler auftreten ist ja kein Wunder, was sollen die ganzen nbsp's und <br />? Abstände werden mit CSS gemacht.

  3. #3
    Unregistriert
    Gast

    Standard AW: Div verrutscht!

    Immer wichtig: Link zur Seite, damit man sich das ansehen kann.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    17.07.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div verrutscht!

    Danke für die schnelle Antwort, ich bin noch recht unerfahren beim Coding ^^" Aber ich habs jetzt mal ohne <br> und so versucht aber der Darstellungsfehler besteht noch immer.

    Edit: Die Seite ist "noch" nicht online.
    Geändert von Maki (17.07.2011 um 21:50 Uhr)

  5. #5
    Unregistriert
    Gast

    Standard AW: Div verrutscht!

    Zitat Zitat von Maki Beitrag anzeigen
    Die Seite ist "noch" nicht online.
    Das kann man ändern, zur Not bei einem Freehoster

Ähnliche Themen

  1. Tabelle verrutscht
    Von Vivi im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 28.05.2007, 02:28
  2. Inhalt verrutscht
    Von Stormfighter im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 17.02.2007, 11:33
  3. Layout verrutscht
    Von Chrissi91 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 19.01.2007, 14:19
  4. design verrutscht
    Von sebrA im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 21.11.2005, 12:53
  5. Tabelle verrutscht
    Von Janet im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 15.08.2005, 15:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •