• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite sieht im Dreamweaver anders aus als im Browser :s

ExoMania

Neues Mitglied
Hallo,

ich habe ein Problem und zwar mache ich mir gerade eine Page und habe das Problem, dass sie mir im Dreamweaver anders als im Browser angezeigt wird.

Hier mal der Vergleich

Directupload.net - D7b86d5kz.png

Also ich hab jetzt die Bilder etc. Farben etc. nur so gewählt um nen Unterschied zu sehen, wird natürlich noch geändert :s

Hier der HTML-Code:

Code:
<body>

<div id="content" align="center"> <!--Content ON-->
    <div id="header"> <!--Header ON-->
        <div id="logo"> <!--Logo ON-->
        </div> <!--Logo OFF-->
    </div> <!--Header OFF-->
    
    <div id="navi" align="center"> <!--Navi ON-->
        <div class="topnavi_container"> <!--Container ON-->
            <ul>
                <li>
                    <a href="index.php">Home</a>
                  </li>
                <li>
                    <a href="http://www.google.de">Games</a>
                   </li>    
                <li>
                    <a href="http://www.facebook.com">Movies</a>
                   </li>
                <li>
                    <a href="http://www.fettspielen.de">Music</a>
                   </li>
                   <li>
                    <a href="http://www.albi.de">Photos</a>
                   </li>
                <li>
                    <a href="http://imdb.com">People</a>
                   </li>
             </ul>   
        </div> <!--Container OFF-->
    </div> <!--Navi OFF-->
    <div id="sidenavi">
        <div id="loginbox">
        </div>
    </div>
<!--    
    <div id="loginbox" align="left">
    </div>-->
    
</div> <!--Content OFF-->
</body>

Und CSS:

Code:
/* CSS-Datei für Rate your Fav */

body {
    background:url(images/background.png)
}

/*#advertisment {
    background-color:blue;
    height:30px;
}
*/

#sidenavi {
    width:185px;
    height:824px;
    background-color:red;
    margin-top:200px;    
}

#content {
    width:1280px;
    height:1024px;
    float:none;
    margin-left:auto;
    margin-top:50px;
}

#logo {
    background:url(images/header.png);
    background-repeat:no-repeat;
    width:400px;
    height:200px;
    background-image: url(images/header.png);
    float:left;
    vertical-align:bottom;
    
}

#loginbox {
    width:185px;
    height:185px;
    background-color:white;
    margin-left:0px;
}


/*NAVIGATION ANFANG*/
#navi {
  font:"Orator Std";
  line-height:30px;
  height:30px;
  float:left;
  
  margin-left: auto; 
  margin-right: auto;
  margin-top:170px; 
  text-align: center;
  display: inline;
  background:url(images/navi/gamesbutton.png);
  vertical-align:bottom;
  
}

.topnavi_container {
  font-weight: bold;
  height: 30px;
  background-repeat:no-repeat;
  margin:0px;

}
.topnavi_container ul {
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.topnavi_container ul li  {
  text-align: center;
  margin: 0;
  padding: 0;
  width: 81px;
  display: block;
  float: left;
  font-weight: bold;
}
.topnavi_container ul li a {
  background: url(images/navi/topnavitrenn.gif) no-repeat center transparent;
  color: #525151;
  text-align: center;
  margin: 0;
  padding: 0;
  width: 81px;
  height: 30px;
  border: 0px;
  display: block;
  font-weight: bold;
}
.topnavi_container a:link {
  color: #FFFFFF;
  text-decoration: none;
}
.topnavi_container a:active {
  color: #FFFFFF;
  text-decoration: none;
}
.topnavi_container a:visited {
  color: #FFFFFF;
  text-decoration: none;
}
.topnavi_container ul li a:hover  {
  background: url(images/navi/topnavitrennhover.gif) no-repeat center transparent;
  color: #FFFFFF;
  font-weight: bold;
}
/*NAVIGATION ENDE*/


Alles als Zip:
Gamefront
 
Willkommen im Forum.

Dreamweaver verwendet gewissermaßen eine eigene Rendering Engine, die nicht der eines Browser entspricht. Das ist die Gefahr bei WYSIWYG-Editoren: Auch wenn es im Editor richtig aussieht, muss es vom Code her/in der Darstellung in Client X nicht korrekt sein.

Poste bitte den vollständigen HTML-Code (mit DOCTYPE und allem).

Dein verlinkter Archiv-Download funktioniert nicht (sowas nutzt aber ohnehin kaum jemand).

Code:
#content {
    width:1280px;
    height:1024px;
    float:none;
    margin-left:auto;
    margin-top:50px;
}

Das ist ziemlich sicher ungünstig. Was soll es bezwecken, die Webseite auf diese Größe festzulegen?

Und last but not least: Worin besteht eigentlich deine Frage? ;)
 
Dreamweaver verwendete von Version 7 bis CS3 die Presto-Engine, die auch von Opera genutzt wird. Seit CS4 ist es WebKit, welches u.a. von Safari und Google Chrome genutzt wird (Quelle). Die Darstellung im Dreamweaver kann sich somit deutlich vom Firefox unterscheiden, wenn Du im HTML- und CSS-Code entscheidende Fehler einbaust. Wie schon gesagt wäre der komplette HTML-Code wichtig um das genauer beurteilen zu können.
 
Zurück
Oben