✔ Darstellung vs. Übertragungsgeschwindigkeit

08154711 · 1. Oktober 2007

Hallo,
Meine Frage : Kann die Übertragungsgeschwindigkeit die Darstellung der Webseiten beeinflussen? Habe an einer Webseite mitgearbeitet wo alles richtig dargestellt wird, validiert etc. Bei einem Freund wird die Seite total verschoben dargestellt dieser hat allerdings eine 56k Verbindung? Im Umfeld konnte ich feststellen das dieses Phänomen nur bei einigen Leuten auftritt die kein DSL haben, mit DSL wird alles richtig dargestellt.

Hier der Code

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tante JU</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
#content { overflow-x: hidden;}
</style>
<meta name="Keywords" content="Tante Ju,TanteJu,Dresden,Konzerte,Musik,Music,Music and More,Party,Events,Metal,Hardcore,Scene,Feiern,Fliegen,Flugschau,Flugplatz,Junkers, Industriegel&auml;nde," />
<meta name="Description" content="Willkommen bei Tante JU. Wenn Ihr Musikfans seid , Ihr gern eure Lauscher verw&ouml;hnt dann seid Ihr hier richtig. Hier gibt es ein Musikspektrum das in Dresden einzigartig ist. Dabei reicht die Palette der Musik von Blues &uuml;ber Hardcore, von Metal bis hin zu K&uuml;nstlern aus heimischen Gefilden. Bei uns gibt es wahrhaft nur himmlische Events. " />
<meta name="DC.Description" content="Tante Ju - die ultimative Partyst&auml;tte in Dresden, die einzige mit Ju Flair" />
<meta name="title" content="Tante Ju Music and More Dresden" />
<meta name="language" content="German, de, deutsch" />
<meta name="author" content="city.Zound" />
<meta name="publisher" content="city.Zound" />
<meta name="copyright" content="Tante Ju" />
<meta name="revisit-after" content="after 5 days" />
<meta name="page-topic" content="Music and More" />
<meta name="page-type" content="Veranstaltung, Party, Events" />
<meta name="audience" content="alle" />
<meta name="robots" content="index,follow" />
<meta name="generator" content="http://www.tanteju.com/" />
<meta name="pragma" content="no-cache" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id="content"> <img class="header" src="images/header.gif" alt="header"/> <img class="left" src="images/left.gif" alt="left" /> <img class="footer" src="images/footer.gif" alt="footer" /> <img class="right" src="images/right.gif" alt="right" /> <img class="tanteju" src="images/tanteju.jpg" alt="tanteju" />
  <div><a href="rueckblick06.html"><img src="images/rueckblick1.jpg" alt="r&uuml;ckblick" border="0" class="r&uuml;ckblick"/></a></div>
  <div class="marquee">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','500','height','70','movie','marquee/tanteju','quality','high', 'wmode','opaque' ); //end AC code
  </script>
    <noscript>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="70">
      <param name="movie" value="marquee/tanteju.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
    </object>
    </noscript>
  </div>
  <!-- ImageReady Slices (navigation.jpg) -->
  <table id="Tabelle_01" width="783" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img id="navigation_01" src="images/navigation_01.gif" width="50" height="110" alt="" /></td>
      <td><a href="index.html"> <img id="news" src="images/news.gif" width="76" height="110" border="0" alt="index" /></a></td>
      <td><a href="terminal.html"> <img id="terminal" src="images/terminal.gif" width="75" height="110" border="0" alt="terminal" /></a></td>
      <td><a href="tickets.html"> <img id="tickets" src="images/tickets.gif" width="76" height="110" border="0" alt="tickets" /></a></td>
      <td><a href="luftpost.html"> <img id="luftpost" src="images/luftpost.gif" width="76" height="110" border="0" alt="luftpost" /></a></td>
      <td><a href="anfahrt.html"> <img id="anfahrt" src="images/anfahrt.gif" width="75" height="110" border="0" alt="anfahrt" /></a></td>
      <td><a href="clubinfo.html"> <img id="clubinfo" src="images/clubinfo.gif" width="76" height="110" border="0" alt="clubinfo" /></a></td>
      <td><a href="vermietung.html"> <img id="vermietung" src="images/vermietung.gif" width="76" height="110" border="0" alt="vermietung" /></a></td>
      <td><a href="kontakt.html"> <img id="kontakt" src="images/kontakt.gif" width="75" height="110" border="0" alt="kontakt" /></a></td>
      <td><a href="http://453186.guestbook.onetwomax.de/"> <img id="gaestebuch" src="images/gaestebuch.gif" width="76" height="110" border="0" alt="gaestebuch" /></a></td>
      <td><img id="navigation_11" src="images/navigation_11.gif" width="52" height="110" alt="" /></td>
    </tr>
  </table>
  <!-- End ImageReady Slices -->
  <br />
  <p class="index"><span class="pind">+++ Kik It Like FALCO +++</span><span class="pinddate">Freitag, 7. September, 20 Uhr</span> <br />
    <br />
    FALCO ...back to the 80th 
    7 professionelle Musiker inszenieren mit ihrer B&uuml;hnen-Show eine Hommage an das musikalische Leben von FALCO und lassen f&uuml;r den Zuschauer die unangepasste, extravagante Pers&ouml;nlichkeit des Falken in einem glamour&ouml;sen Live-Spektakel wieder neu zum Leben erwachen.  - Groovy Sounds, Welthits zum mitsingen, perfekter Style -<br />
  </p>
  <p></p>
  <p class="index"><span class="pind">+++ Van Wilks +++</span><span class="pinddate">Freitag, 14. September, 21 Uhr</span> <br />
    <br />
    Van Wilks wird in Austin, Texas einer Stadt, die f&uuml;r ihre exzellenten Gitarristen bekannt ist, schon lange als einer der Besten gefeiert. Sein Talent verhalf ihm dazu, dass er neben einigen legend&auml;ren Gitarrengr&ouml;&szlig;en in die ‚Texas Music Hall of Fame’ gew&auml;hlt wurde.<br />
  </p>
  <p></p>
  <p class="index"><span class="pind">+++ 2. Weltmusikbasar +++</span><span class="pinddate">Samstag, 22. September, 18 Uhr</span> <br />
    <br />
    Unter dem Thema „Indische N&auml;chte“ pr&auml;sentiert city.Zound YATRA, Sitar Beat, Electric Oud, Harianu Harshita und DJ Delhi. In dem abwechslungsreichen Programm mit vielen indischen Spezialit&auml;ten sind vor allem Kinder zum Mitmusizieren besonders angesprochen. <br />
  </p>
  <p></p>
  <p class="index"><span class="pind">+++ Ben*jammin +++</span><span class="pinddate">Freitag, 28. September, 21 Uhr</span> <br />
    <br />
    Ben*jammin das ist adrenalingeladener, gnadenloser Hip-Funk, der durch die Ohren direkt in die Beine geht. Funky Rhythmusgruppe meets Synthi-Artistik im Hochfrequenzbereich meets soulige Hooklines, die sich sofort ins Gehirn einbrennen.<br />
    <br />
  </p>
  <p></p>
  <p align="right" class="impressum"><a href="impressum.html" target="_blank"><img src="images/impressum.jpg"  alt="Impressum" border="0"/></a></p>
  <br />
</div>
<!-- end content -->
</body>
</html>

Code:

body {background-color: #000066;}
.back {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-weight:bold;	color:#013998;	font-size:11px;	margin-left: 45px;	margin-top:30px;}
#content {width: 783px;height:525px;background-color: #FFFFFF;overflow: scroll;	margin: 50px auto;}
.clubinfotechnik {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #013998;	text-align:justify;	padding-left: 45px;	padding-right: 45px;}
.clubinfotechnikeinzug {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	padding-left: 320px;margin-top: -180px;}
.clubinfoJU {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:11px;color: #013998;padding-left: 45px;padding-right: 45px;text-align: justify;padding-top: 5px;clear: left;}
.fortsetzung {font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 13px;color: #013998;	padding-left:113px;	padding-bottom:40px;font-weight:bold;	padding-top: 10px;}
.fotooben {	background-image:url(terminalinfo/klimakalima.jpg);	background-repeat:no-repeat;margin-top: 30px;float: right;	margin-right: 40px;	margin-left: 10px;	margin-bottom: 5px;}
.fotoobentext {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #013998;	text-align:justify;	margin-top: 30px;	margin-left: 40px;	margin-right: 40px;}
.fotoobendatum {font-family: Verdana, Arial, Helvetica, sans-serif;	color: #990000;	font-size:11px;	font-weight: bold;	margin-left: 40px;}
.fotounten {	padding-right: 40px;	margin-top: -10px;}
.fotountentext {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	padding: 10px 40px 0 40px;}
.fotountendatum {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color:#990000;	text-align:justify;	font-weight:bold;	margin-left: 40px;	margin-top: -93px;}
.footer {	background-image:url(../images/footer.gif);	position: fixed;	width: 770px;	height:15px;	margin-top:510px;}
.header {background-image: url(../images/header.gif); position:fixed; width:770px; z-index:10;}
.left {	background-image:url(../images/left.gif);height:520px; position:fixed;}
.navileiste {	margin-top: 0px;	margin-left: 15px;}
.rückblick {	height:70px;	width:70px;	padding-left: 660px;	margin-top: -60px;}
.right {background-image:url(../images/right.gif);position: fixed;height:520px;width: 15px; margin-left:755px;}
/*.p {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #013998;	text-align:justify;	padding-left: 45px;	padding-right: 45px;}*/
.pind {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-weight: bold;	color: #990000;	font-size:11px;	font-style: oblique;}
.newstop { margin-top:140px;}
.pclubinfo {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	padding-left: 45px;	padding-right: 45px; padding-top:10px;}
.pclubinfo1 {font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #013998;padding-right: 45px;padding-top: 5px;}
.clubinfoJU {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:11px;color: #013998;padding-left: 45px;padding-right: 45px;text-align: justify;padding-top: 5px;clear: left;}
.fotoju {	padding-right: 40px;	padding-left: 10px;	padding-top: 5px;}
.pback {	font-family:Verdana, Arial, Helvetica, sans-serif;	color:#013998;	font-size:11px;	font-weight:normal;	margin-top: -15px;	padding-left: 45px;	padding-bottom: 20px;}
.pbackeinzug {	font-family:Verdana, Arial, Helvetica, sans-serif;	color:#013998;	font-size:11px;	font-weight:normal;	padding-left: 300px;	margin-top: -225px;}
.pindtop { margin-top:35px;}
.pinddate {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-weight:bold;	color:#013998;	font-size:11px;	font-style:oblique;	margin-top: -15px;	float: right;}
.preis {font-family: Verdana, Arial, Helvetica, sans-serif;	color: #013998;	font-size:11px;	font-weight:bold;}
.Stil1 {color: #FF0000;	font-weight: bold;}
.Stil3 {color: #013998;	right: 50px;}
.tanteju {	width:145px;	height:80px;	padding-left: 15px;	margin-top: 15px;}
th,td,tr { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-align:justify;}
th { color: #013998; font-weight:normal;}
td { color: #013998;}
.imganfahrt { margin-right:70px;}
.impressum {font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #013998;padding-left: 45px;padding-top: 20px;padding-right: 45px;background-repeat: o-repeat;}
.panfahrt {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	margin-left: 120px;	margin-top: -260px;}
.print {font-size: 12px;color: #013998;	font-weight:bold;	font-family:Verdana, Arial, Helvetica, sans-serif;	margin-left: 120px;} 
.luftpost {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	padding-left: 130px;padding-top: 30px;	text-align: justify;	padding-right: 130px;}
.luftpostemail {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	color: #013998;	text-align:justify;	font-weight: bold;	margin-left: 320px;	padding-top: 15px;	border-bottom-color: #990000;	border-bottom-style: solid;	width: 140px;	border-width: 1px;}
.marquee { width:500px; height:70px; margin-left: 160px; margin-top: -70px; z-index:1; }
.vermietung {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	padding-left: 45px;	padding-right: 45px;	padding-top: 15px;}
.tickets {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #013998;	text-align:justify;	padding-left: 100px;padding-right: 45px;}
.ticketseinzug {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;color: #013998;	text-align:justify;	padding-left: 320px;margin-top: -272px; }
.ticketreservierung {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:11px;	font-weight: bold;	color: #013998;	padding-left: 562px;	margin-top: -100px;	text-decoration: underline;}
.kontakt {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #013998;	text-align:justify;	padding-left: 100px;padding-top: 20px;	padding-right: 150px;}
.termdate { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#990000}
.table { margin-top:10px;}
.welt {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	margin-top: 30px;margin-left: 40px;	margin-right: 40px;	clear: left;}
.welt1 {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	margin-top: 0px;margin-left: 40px;	margin-right: 40px;	clear: right;}
.weltimg {	padding-top: 35px;	padding-left: 15px;	padding-bottom: 10px;	padding-right: 40px;}
.weltimg1 {	margin-top: 0px;	margin-left: 40px;	margin-right: 15px;}
.www {	padding-left: 40px;}
.links2img {margin-top: 0px;	margin-right: 15px;}
.kopfhörer {padding-left: 100px;margin-top: -40px;}
.fotorechts {padding-top: 35px;	padding-left: 15px;	padding-bottom: 10px;	padding-right: 40px;}
.fotolinks {margin-top: 0px;	margin-left: 40px;	margin-right: 15px;}
.fotolinkstext {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	margin-top: 0px;margin-left: 40px;	margin-right: 40px;	clear: right;}
.fotorechtstext {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;color: #013998;	text-align:justify;	margin-top: 30px;margin-left: 40px;	margin-right: 40px;	clear: left;}
.index{font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #013998;	text-align:justify; padding-left:45px; padding-right:45px; padding-top:20px;}

Maik · 1. Oktober 2007

Hi,

die 56k-Zeiten sind bei mir schon ein paar Jahre her, aber soweit ich mich erinnern kann, hat zwar der Seitenaufbau das eine oder andere mal länger gedauert, aber dass eine Seite abschliessend verschoben dargestellt wurde, daran kann ich mich nicht erinnern. Was jetzt aber nicht heißen soll, dass ich es für abwegig halte.

Ich wüsste aber nicht, wo man da den Hebel ansetzen soll, wenn das Stylesheet von den Browsern korrekt interpretiert wird.

Man könnte aber den CSS-Code optimieren und verschlanken, wenn ich mir da beispielsweise die immer wiederkehrende Schriftartenformatierung anschaue, die einmal global für das Dokument festgelegt werden kann.

08154711 · 2. Oktober 2007

Das Problem hat sich geklärt(hoffe ich). Die Position fixed bei allen entfernt und dafür absolute eingesetzt, marginwerte angepasst und jedem img ein div zugewiesen.

✔ Darstellung vs. Übertragungsgeschwindigkeit

08154711

Erfahrenes Mitglied

Maik

08154711

Erfahrenes Mitglied

Neue Beiträge