# Homepage wird falsch angezeigt



## dr-stein (10. Mai 2010)

Hallo liebe tutorialsler...

ich habe ein Problem. Ich habe ein neues Webprojekt und würde gerne ,dass das auf allen PC´s egal welche Bildschirmauflösung der hat richtig, die richtig angezeigt wird. Ich habe das für joomla gebastelt.

CSS Code:


```
/* Allgemeine Einstellungen (body)*/
body {
 overflow-y: scroll;
  overflow-x: hidden;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #656565;
	  margin:0px;
	  padding:0px;
	  background-color:#FCFCFC;
	  text-align:right;
}

td {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #656565;
}


/* Seitenelemente */
#main {
  position:relative;
  width:967px;
  background-color:#FFFFFF;
  margin-bottom:0px;
  margin-top:0px;
  margin-left:auto;
  margin-right:auto;
  padding:0px 0px;
}


.kopf {
  display:block;
  top:120px;
  left: 250px; 
  height:145px; 
  background-color:#fff; 
  text-align:left; 
}

ul.menu {
list-style-type: none;
}

ul.menu li {
padding: 2px;
}



#container {
  position:relative; 
  display:block; 
  background-color:#FFFFFF; 
  border-left:208px solid #fff; 
  border-right:208px solid #fff;
  padding:0px 0px;
}

#inner {
  display:block;
  margin-left:-208px; 
  margin-right:-208px; 
  padding:0px;
 }

#Leiste_links {
  position:absolute; 
  width:208px;
  top:19px;
  left:-40px;
  text-align:left;
}

#Leiste_rechts { 
  position:absolute; 
  width:208px;
  top:10px;
  right: -60px;
  text-align:left;
}

#Content_Home {
  margin-left:208px; 
  margin-right:208px; 
  position:absolute; 
  left: 10%;
  top:380px;
  display:block; 
  text-align:left;
  height:1%;
  border: 0px;
}

#Content {
  overflow:scroll;
  background-color: #000000;
  margin-left:240px; 
  margin-right:238px; 
  position:relative; 
  display:block; 
  text-align:left;
  height:1%;
}

#logo {
  position:absolute;
  top:0px;
  left:0px;
  height:128px; 
}	

#marquee {
  position:absolute;
  top:0px;
  left:208px;
  height:128px;
}

#balcken_links_oben {
  position:absolute;
  top:128px;
  left:0px;
  width:208px;
  height:17px;
}

#pfad {
  position:absolute;
  top:128px;
  left:208px;
  width:551px;
  height:17px;
  color: #FFFFFF;
  background-color:#1B5288;
  padding-left:35px;
}

#balcken_rechts_oben {
  position:absolute;
  text-align: left;
  top:128px;
  left:759px;
  width:208px;
  height:17px;
  color:#FFFFFF;
  background-image:url(images/balken_oben_rechts.gif);
}

#logo {
    position: absolute;
    top: 7px;
    left: 25px;
}


/* Einstellungen Überschriften */
h1 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 20px;
    color: #1B5288;
    font-weight: lighter;
	  margin-top: 0px;
}

h2 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
    color: #1B449C;
    font-weight: bold;
	margin-top: 0px;
	margin-bottom: 0px;
}


/* Einstellungen Navigation */
a.nav              { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px ; color: #303030; text-decoration: none; } 
a.nav:hover        { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #365AA7; text-decoration: none; }


/* Einstellungen Links */
a       { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #365AA7; text-decoration: none; }
a:hover { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #365AA7; text-decoration: underline; }


/* Einstellungen Pfad */
a.pfad              { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none; }
a.pfad:hover        { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none; }

a.pfadangemeldet              { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #FFFF00; text-decoration: none; }
a.pfadangemelet:hover        { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #FFFF00; text-decoration: none; }
```

Die Homepage ist noch nicht online, sonst würde ich Euch ne Vorschau geben.

Gruß, Eike


----------



## Maik (10. Mai 2010)

Hi.





dr-stein hat gesagt.:


> ich habe ein Problem. Ich habe ein neues Webprojekt und würde gerne ,dass das auf allen PC´s egal welche Bildschirmauflösung der hat richtig, die richtig angezeigt wird.


Und welches Problem ergibt sich da bei dir konkret?



dr-stein hat gesagt.:


> Die Homepage ist noch nicht online, sonst würde ich Euch ne Vorschau geben.


Kein Problem, aber dann poste bitte zukünftig zu deinem Stylesheet auch den HTML-Code der Seite, damit wir hier dennoch in den Genuß der Vorschau kommen.

Oder dürfen wir munter raten, wie sich wohl dein HTML-Code im Detail zusammensetzen wird? 

mfg Maik


----------



## dr-stein (10. Mai 2010)

Das Problem ist die Bildschirmauflösung. Bei manchen PC´s wird es richtig angezeigt und bei manchen nicht.


```
<div id="main">





<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->
      <div class="kopf">
      <div style="position:absolute; left:208px;top:145px; width:551px; height:231px; z-index:2;">
      <center><?php mosLoadModules('user1'); ?></center>
      </div>
<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->





<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->
      <div style="position:absolute; left:394px;top:297px; width:350px; height:80px; color:#FFFFFF; z-index:3;">
          <strong></strong>
      </div>
<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->





<!-- Logo oben links in der Ecke -->
      <div id="logo">
      <img src="<?php echo $mosConfig_live_site;?>/templates/_normal/images/logo.gif" width="100" height="100" alt="">
      </div>
<!-- Logo oben links in der Ecke -->





<!-- Headleiste oben, Text Herzlich Willkommen-->
      <div id="marquee">
          <img src="<?php echo $mosConfig_live_site;?>/templates/_normal/images/header.gif" width="759" height="128" alt="Herzlich Willkommen auf unserer Homepage">
      </div>
<!-- Headleiste oben, Text Herzlich Willkommen-->





<!-- Kleiner Balken oben über der Navigation -->
      <div id="balcken_links_oben">
          <img src="<?php echo $mosConfig_live_site;?>/templates/_normal/images/balken_oben_links.gif" width="208" height="17" alt="">
      </div>
<!-- Kleiner Balken oben über der Navigation -->






      <div id="pfad">
      
      </div>
      </div>






<!-- Kleiner Balken über der Aktuellesbox -->
      <div id="balcken_rechts_oben">
        <div style="margin-left:22px; margin-top:2px;">Aktuelles
        </div>
        </div>
<!-- Kleiner Balken über der Aktuellesbox -->





<!-- Ende des Kopfbereichs wird durch den unten geschriebenen Befehl
festgelegt. -->
        </div>
<!-- Ende des Kopfbereichs wird durch den oben geschriebenen Befehl
festgelegt. -->





<!-- HTML -->
    <div id="container">
    <div id="inner">
<!-- HTML -->





<!-- Navigation -->
    <div id="Leiste_links">
    <?php mosLoadModules('left'); ?>
    </div>
<!-- Navigation -->





<!-- Ende des inner wird durch den unten geschriebenen Befehl
festgelegt. -->
    </div>
<!-- Ende des inner wird durch den oben geschriebenen Befehl
festgelegt. -->





<!-- Aktuellesleiste rechts -->
    <div id="Leiste_rechts">
    <?php mosLoadModules('right'); ?>
    </div>
    </div>
<!-- Aktuellesleiste rechts -->





<!-- Ende des Containers wird durch den unten stehenden Befehl festgelegt -->
    </div>
<!-- Ende des Containers wird durch den oben stehenden Befehl festgelegt -->





<!-- Mitgliedschaft (nicht sichtbar) -->
               <div id="mitglied">
                    <table border="0" cellspacing="0" cellpadding="0" width="208">
		                          <tr><td bgcolor="FFFFFF" height="18 "width="22">&nbsp;</td><td bgcolor="#FFFFFF"> </td></tr>
		                          <tr><td colspan="2" height="10"></td></tr>
		                          <tr><td width="22">&nbsp;</td><td><a href="" target="_blank">
                              </a></td></tr>
                              <tr><td colspan="2">&nbsp;</td></tr>

                    </table>
          </div></div>
<!-- Mitgliedschaft (nicht sichtbar) -->





<!-- Content -->
      <div id="Content_Home">
<br>
          <style type="text/css">
            p { margin-top:5px; margin-bottom:0px; }
          </style>

      <div style="position:relative; top:0px; left:23px; width:500px; border:1px solid #FFFFFF">
        <table border="0" cellspacing="0" cellpadding="0" width="480">
          <tr>
          <div id="overflow">
          <?php mosMainBody(); ?>
          </div>
            </table>
      </div>
<!-- Content -->

      </div>
      </div>
      </div>
      </div>
```

Eike


----------



## Maik (10. Mai 2010)

dr-stein hat gesagt.:


> Das Problem ist die Bildschirmauflösung. Bei manchen PC´s wird es richtig angezeigt und bei manchen nicht.


Jo, soweit waren wir schon  

Geht's vielleicht einen Tick genauer, wie sich der Fehler (in welchem Browser) darstellt?

Ich kann da nämlich jetzt soweit keine Darstellungsfehler registrieren, wenn ich das Browserfenster skaliere 

mfg Maik


----------



## dr-stein (10. Mai 2010)

Bei der Auflösung 1280 x 800 bei Win 7 zeigt die Homepage richtig an. (Mozilla) bei 1280 x 720 win 7 (Mozilla) zeigt er die HP auch richtig an. Bei 1024 x 768 bei win 7 (Mozilla) zeigt er es falsch an. Alles an der richtigen Stelle, bis auf die Navigation und der Balken rechts. Der rückt unter das Bild.

Eike

hier nochmal eben der Code in einem mit beispiel und beschriftungstext:


```
<style>



/* Allgemeine Einstellungen (body)*/
body {
 overflow-y: scroll;
  overflow-x: hidden;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #656565;
	  margin:0px;
	  padding:0px;
	  background-color:#FCFCFC;
	  text-align:right;
}

td {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #656565;
}


/* Seitenelemente */
#main {
  position:relative;
  width:967px;
  background-color:#FFFFFF;
  margin-bottom:0px;
  margin-top:0px;
  margin-left:auto;
  margin-right:auto;
  padding:0px 0px;
}


.kopf {
  display:block;
  top:120px;
  left: 250px; 
  height:145px; 
  background-color:#fff; 
  text-align:left; 
}

ul.menu {
list-style-type: none;
}

ul.menu li {
padding: 2px;
}



#container {
  position:relative; 
  display:block; 
  background-color:#FFFFFF; 
  border-left:208px solid #fff; 
  border-right:208px solid #fff;
  padding:0px 0px;
}

#inner {
  display:block;
  margin-left:-208px; 
  margin-right:-208px; 
  padding:0px;
 }

#Leiste_links {
  position:absolute; 
  width:208px;
  top:19px;
  left:-40px;
  text-align:left;
}

#Leiste_rechts { 
  position:absolute; 
  width:208px;
  top:10px;
  right: -60px;
  text-align:left;
}

#Content_Home {
  margin-left:208px; 
  margin-right:208px; 
  position:absolute; 
  left: 10%;
  top:380px;
  display:block; 
  text-align:left;
  height:1%;
  border: 0px;
}

#Content {
  overflow:scroll;
  background-color: #000000;
  margin-left:240px; 
  margin-right:238px; 
  position:relative; 
  display:block; 
  text-align:left;
  height:1%;
}

#logo {
  position:absolute;
  top:0px;
  left:0px;
  height:128px; 
}	

#marquee {
  position:absolute;
  top:0px;
  left:208px;
  height:128px;
}

#balcken_links_oben {
  position:absolute;
  top:128px;
  left:0px;
  width:208px;
  height:17px;
}

#pfad {
  position:absolute;
  top:128px;
  left:208px;
  width:551px;
  height:17px;
  color: #FFFFFF;
  background-color:#1B5288;
  padding-left:35px;
}

#balcken_rechts_oben {
  position:absolute;
  text-align: left;
  top:128px;
  left:759px;
  width:208px;
  height:17px;
  color:#FFFFFF;
  background-image:url(images/balken_oben_rechts.gif);
}

#logo {
    position: absolute;
    top: 7px;
    left: 25px;
}


/* Einstellungen Überschriften */
h1 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 20px;
    color: #1B5288;
    font-weight: lighter;
	  margin-top: 0px;
}

h2 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
    color: #1B449C;
    font-weight: bold;
	margin-top: 0px;
	margin-bottom: 0px;
}


/* Einstellungen Navigation */
a.nav              { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px ; color: #303030; text-decoration: none; } 
a.nav:hover        { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #365AA7; text-decoration: none; }


/* Einstellungen Links */
a       { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #365AA7; text-decoration: none; }
a:hover { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #365AA7; text-decoration: underline; }


/* Einstellungen Pfad */
a.pfad              { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none; }
a.pfad:hover        { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none; }

a.pfadangemeldet              { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #FFFF00; text-decoration: none; }
a.pfadangemelet:hover        { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #FFFF00; text-decoration: none; }

</style>

      <div id="main">





<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->
      <div class="kopf">
      <div style="position:absolute; left:208px;top:145px; width:551px; height:231px; z-index:2;">
      <center>Bild ist hier</center>
      </div>
<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->





<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->
      <div style="position:absolute; left:394px;top:297px; width:350px; height:80px; color:#FFFFFF; z-index:3;">
          <strong></strong>
      </div>
<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->





<!-- Logo oben links in der Ecke -->
      <div id="logo">
      <img src="<?php echo $mosConfig_live_site;?>/templates/_normal/images/logo.gif" width="100" height="100" alt="">
      </div>
<!-- Logo oben links in der Ecke -->





<!-- Headleiste oben, Text Herzlich Willkommen-->
      <div id="marquee">
          <img src="<?php echo $mosConfig_live_site;?>/templates/_normal/images/header.gif" width="759" height="128" alt="Herzlich Willkommen auf unserer Homepage">
      </div>
<!-- Headleiste oben, Text Herzlich Willkommen-->





<!-- Kleiner Balken oben über der Navigation -->
      <div id="balcken_links_oben">
          <img src="<?php echo $mosConfig_live_site;?>/templates/_normal/images/balken_oben_links.gif" width="208" height="17" alt="">
      </div>
<!-- Kleiner Balken oben über der Navigation -->






      <div id="pfad">
      
      </div>
      </div>






<!-- Kleiner Balken über der Aktuellesbox -->
      <div id="balcken_rechts_oben">
        <div style="margin-left:22px; margin-top:2px;">Aktuelles
        </div>
        </div>
<!-- Kleiner Balken über der Aktuellesbox -->





<!-- Ende des Kopfbereichs wird durch den unten geschriebenen Befehl
festgelegt. -->
        </div>
<!-- Ende des Kopfbereichs wird durch den oben geschriebenen Befehl
festgelegt. -->





<!-- HTML -->
    <div id="container">
    <div id="inner">
<!-- HTML -->





<!-- Navigation -->
    <div id="Leiste_links">
    Balken links (Navigation)
    </div>
<!-- Navigation -->





<!-- Ende des inner wird durch den unten geschriebenen Befehl
festgelegt. -->
    </div>
<!-- Ende des inner wird durch den oben geschriebenen Befehl
festgelegt. -->





<!-- Aktuellesleiste rechts -->
    <div id="Leiste_rechts">
    Bilken rechts (Aktuelles-Box)
    </div>
    </div>
<!-- Aktuellesleiste rechts -->





<!-- Ende des Containers wird durch den unten stehenden Befehl festgelegt -->
    </div>
<!-- Ende des Containers wird durch den oben stehenden Befehl festgelegt -->





<!-- Mitgliedschaft (nicht sichtbar) -->
               <div id="mitglied">
                    <table border="0" cellspacing="0" cellpadding="0" width="208">
		                          <tr><td bgcolor="FFFFFF" height="18 "width="22">&nbsp;</td><td bgcolor="#FFFFFF"> </td></tr>
		                          <tr><td colspan="2" height="10"></td></tr>
		                          <tr><td width="22">&nbsp;</td><td><a href="" target="_blank">
                              </a></td></tr>
                              <tr><td colspan="2">&nbsp;</td></tr>

                    </table>
          </div></div>
<!-- Mitgliedschaft (nicht sichtbar) -->





<!-- Content -->
      <div id="Content_Home">
<br>
          <style type="text/css">
            p { margin-top:5px; margin-bottom:0px; }
          </style>

      <div style="position:relative; top:0px; left:23px; width:500px; border:1px solid #FFFFFF">
        <table border="0" cellspacing="0" cellpadding="0" width="480">
          <tr>
          <div id="overflow">
          Text TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText Text
          </div>
            </table>
      </div>
<!-- Content -->

      </div>
      </div>
      </div>
      </div>
```


----------



## Maik (10. Mai 2010)

Da es deine Seite auf deinem Server nicht zu betrachten gibt, der deinen eingepflanzten  PHP-Code verarbeitet, und dem Browser als HTML-Code übergibt, darfst du hier nun als Zugabe deinen geparsten PHP-Code posten (Ansicht -> Seitenquelltext), da vom Inhalt derzeit nichts zu sehen ist.

mfg Maik


----------



## dr-stein (10. Mai 2010)

Schau dir mal den Code an den ich eben veröffentlicht habe. Da ist auch Text drinne...


----------



## Maik (10. Mai 2010)

Wenn deine PHP-Codeblöcke keine weiteren öffnenden HTML-Tags, genauer genommen öffnende <div>-Tags, in den HTML-Code einschleusen, solltest du ihn als aller erstes  validieren, um ihn als mögliche Fehlerquelle kategorisch ausschließen zu können.

Ich zähle nämlich darin 18 öffnende <div>-Tags gegenüber 23 schliessenden </div>-Tags.

Wenn der PHP-Code tatsächlich nichts Passendes im Gepäck haben sollte, eindeutig fünf zuviel, die unabhängig von Auflösung / Browserfenstergröße das Layout zerschießen, denn mindestens einen der öffnenden   <div>-Tags schließen sie unerwünscht, weil vorzeitig.

Je nachdem, an welcher Stelle im Markup dies geschieht, kommen dann mitunter die dollsten Dinger bei raus ;-)

Wie du siehst, kam meine Bitte um den geparsten PHP-Code nicht von ungefähr,  um allein schon solche aufkommenden Ungereimtheiten und Mißverständnisse zu vermeiden, wenngleich mir eben dein "Zwischenpost" mit dem nachgereichten Beispiel-Code entgangen ist, und sich auf deinen zunächst gezeigten Quellcode bezog. 

mfg Maik


----------



## dr-stein (11. Mai 2010)

Hier also der Validierte CSS-CODE:


```
body {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
color : #656565;
margin : 0;
padding : 0;
background-color : #fcfcfc;
text-align : right;
}
td {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
color : #656565;
}
#main {
position : relative;
width : 967px;
background-color : #ffffff;
margin-bottom : 0;
margin-top : 0;
margin-left : auto;
margin-right : auto;
padding : 0 0;
}
.kopf {
display : block;
top : 120px;
left : 250px;
height : 145px;
background-color : #fff;
text-align : left;
}
ul.menu {
list-style-type : none;
}
ul.menu li {
padding : 2px;
}
#container {
position : relative;
display : block;
background-color : #ffffff;
border-left : 208px solid #fff;
border-right : 208px solid #fff;
padding : 0 0;
}
#inner {
display : block;
margin-left : -208px;
margin-right : -208px;
padding : 0;
}
#Leiste_links {
position : absolute;
width : 208px;
top : 19px;
left : -40px;
text-align : left;
}
#Leiste_rechts {
position : absolute;
width : 208px;
top : 10px;
right : -60px;
text-align : left;
}
#Content_Home {
margin-left : 208px;
margin-right : 208px;
position : absolute;
left : 10%;
top : 380px;
display : block;
text-align : left;
height : 1%;
border : 0;
}
#Content {
overflow : scroll;
background-color : #000000;
margin-left : 240px;
margin-right : 238px;
position : relative;
display : block;
text-align : left;
height : 1%;
}
#logo {
position : absolute;
top : 0;
left : 0;
height : 128px;
}
#marquee {
position : absolute;
top : 0;
left : 208px;
height : 128px;
}
#balcken_links_oben {
position : absolute;
top : 128px;
left : 0;
width : 208px;
height : 17px;
}
#pfad {
position : absolute;
top : 128px;
left : 208px;
width : 551px;
height : 17px;
color : #ffffff;
background-color : #1b5288;
padding-left : 35px;
}
#balcken_rechts_oben {
position : absolute;
text-align : left;
top : 128px;
left : 759px;
width : 208px;
height : 17px;
color : #ffffff;
background-image : url(images/balken_oben_rechts.gif);
}
#logo {
position : absolute;
top : 7px;
left : 25px;
}
h1 {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 20px;
color : #1b5288;
font-weight : lighter;
margin-top : 0;
}
h2 {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
color : #1b449c;
font-weight : bold;
margin-top : 0;
margin-bottom : 0;
}
a.nav {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
color : #303030;
text-decoration : none;
}
a.nav:hover {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
color : #365aa7;
text-decoration : none;
}
a {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
color : #365aa7;
text-decoration : none;
}
a:hover {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
color : #365aa7;
text-decoration : underline;
}
a.pfad {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
color : #ffffff;
text-decoration : none;
}
a.pfad:hover {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
color : #ffffff;
text-decoration : none;
}
a.pfadangemeldet {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
color : #ffff00;
text-decoration : none;
}
a.pfadangemelet:hover {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
color : #ffff00;
text-decoration : none;
}
```

Nun der geparste Code aus dem Browserquelltext:


```
<div id="main">





<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->
      <div class="kopf">
      <div style="position:absolute; left:208px;top:145px; width:551px; height:231px; z-index:2;">
      <center>	<table cellpadding="0" cellspacing="0" class="moduletable">
			<tr>
			<td>
				<p><img src="/templates/_normal/images/anzeigebild.gif" border="0" width="545" height="231" /></p>			</td>
		</tr>

		</table>
	</center>
      </div>
<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->





<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->
      <div style="position:absolute; left:394px;top:297px; width:350px; height:80px; color:#FFFFFF; z-index:3;">
          <strong></strong>

      </div>
<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->





<!-- Logo oben links in der Ecke -->
      <div id="logo">
      <img src="/templates/_normal/images/logo_spd.gif" width="100" height="100" alt="">
      </div>
<!-- Logo oben links in der Ecke -->




<!-- Headleiste oben, Text Herzlich Willkommen - daneben Logo -->
      <div id="marquee">
          <img src="/templates/_normal/images/header.gif" width="759" height="128" alt="Herzlich Willkommen auf unserer Homepage">
      </div>
<!-- Headleiste oben, Text Herzlich Willkommen - daneben Logo -->





<!-- Kleiner Balken oben ?ber der Navigation -->
      <div id="balcken_links_oben">
          <img src="/templates/_normal/images/balken_oben_links.gif" width="208" height="17" alt="">
      </div>
<!-- Kleiner Balken oben ?ber der Navigation -->






      <div id="pfad">
      
      </div>

      </div>






<!-- Kleiner Balken ?ber der Aktuellesbox -->
      <div id="balcken_rechts_oben">
        <div style="margin-left:22px; margin-top:2px;">Aktuelles
        </div>
        </div>
<!-- Kleiner Balken ?ber der Aktuellesbox -->





<!-- Ende des Kopfbereichs wird durch den unten geschriebenen Befehl
festgelegt. -->
        </div>
<!-- Ende des Kopfbereichs wird durch den oben geschriebenen Befehl
festgelegt. -->





<!-- HTML -->
    <div id="container">

    <div id="inner">
<!-- HTML -->





<!-- Navigation -->
    <div id="Leiste_links">
    	<table cellpadding="0" cellspacing="0" class="moduletable_menu">
			<tr>
			<td>

				<ul class="menu"><li id="current" class="parent active item1"><a href="startseite.html"><span>Startseite</span></a><ul><li class="item55"><a href="/startseite/unserefreuneundpartner.html"><span>Links</span></a></li></ul></li><li class="parent item27"><a href="/ueberuns.html"><span>Über uns</span></a></li><li class="item2"><a href="/downloads.html"><span>Downloads</span></a></li><li class="item37"><a href="/aktuelles.html"><span>Aktuelles</span></a></li><li class="parent item60"><a href="/galerie.html"><span>Galerie</span></a></li><li class="parent item41"><a href="/intranetanmeldung.html"><span>Login</span></a></li><li class="parent item54"><a href="/kontaktmituns.html"><span>Kontakt aufnehmen</span></a></li><li class="item58"><a href="/impressum.html"><span>Impressum</span></a></li></ul>			</td>
		</tr>
		</table>
		<table cellpadding="0" cellspacing="0" class="moduletable">

			<tr>
			<td>
				<link rel="stylesheet" href="/components/com_uddeim/templates/default/css/uddemodule.css" type="text/css" /><div id='uddeim-module'><p class='uddeim-module-head'>Sie sind nicht eingeloggt.</p></div>			</td>
		</tr>
		</table>
	    </div>
<!-- Navigation -->




<!-- Ende des inner wird durch den unten geschriebenen Befehl
festgelegt. -->
    </div>
<!-- Ende des inner wird durch den oben geschriebenen Befehl
festgelegt. -->





<!-- Aktuellesleiste rechts -->
    <div id="Leiste_rechts">
    	<table cellpadding="0" cellspacing="0" class="moduletable_text">

			<tr>
			<td>
				<div class="bannergroup_text">

<div class="banneritem_text"><b>Weisheit</b><br><div class="clr"></div>
	</div>

</div>			</td>
		</tr>

		</table>
	    </div>
    </div>
<!-- Aktuellesleiste rechts -->





<!-- Ende des Containers wird durch den unten stehenden Befehl festgelegt -->
    </div>
<!-- Ende des Containers wird durch den oben stehenden Befehl festgelegt -->




<!-- Mitgliedschaft (nicht sichtbar) -->
               <div id="mitglied">
                    <table border="0" cellspacing="0" cellpadding="0" width="208">
		                          <tr><td bgcolor="FFFFFF" height="18 "width="22">&nbsp;</td><td bgcolor="#FFFFFF"> </td></tr>
		                          <tr><td colspan="2" height="10"></td></tr>
		                          <tr><td width="22">&nbsp;</td><td><a href="/" target="_blank">
                              </a></td></tr>

                              <tr><td colspan="2">&nbsp;</td></tr>

                    </table>
          </div></div>
<!-- Mitgliedschaft (nicht sichtbar) -->





<!-- Content -->
      <div id="Content_Home">
<br>

          <style type="text/css">
            p { margin-top:5px; margin-bottom:0px; }
          </style>

      <div style="position:relative; top:0px; left:23px; width:500px; border:1px solid #FFFFFF">
        <table border="0" cellspacing="0" cellpadding="0" width="480">
          <tr>
          <div id="overflow">
          <div class="componentheading">
	Willkommen auf der Startseite</div>

<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">
					<div>
		
<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<p><small>Lorem Ipsum</small></p>
<h1>Lorem Ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla enim turpis, placerat eget pellentesque nec, vehicula fermentum odio. Nullam dictum tortor non mi egestas in fringilla justo adipiscing. Cras ut eros at massa ornare pretium. Vivamus nec dignissim elit. Suspendisse potenti. Morbi in nunc vitae tortor sollicitudin feugiat. Integer at lacus a magna commodo malesuada ac dictum leo. Mauris dapibus ullamcorper hendrerit. Donec sed nisl vitae lectus suscipit facilisis fringilla a dolor. Fusce ut purus nec velit ullamcorper aliquam.
Maecenas scelerisque lorem nec erat luctus congue. Maecenas consectetur sapien massa. Aliquam erat volutpat. Quisque ultricies turpis vel justo facilisis lobortis. In a diam non urna semper facilisis tristique vel nunc. Sed vulputate eros vitae quam consectetur sed ornare diam pulvinar. Integer in enim nunc, ac sodales turpis. Nam in purus ut est condimentum egestas. Phasellus at nisi enim. Integer non nibh velit. Morbi cursus dapibus quam, et malesuada nunc cursus et. Donec non sapien est, quis suscipit mi.
Ut dictum sem ac sapien tincidunt in semper leo mollis. Ut lorem nulla, rhoncus id placerat in, fringilla at urna. Praesent ultricies libero venenatis purus iaculis sed viverra urna lacinia. Duis bibendum leo a risus bibendum condimentum. Nunc vel enim in sem laoreet vestibulum. Aenean sit amet tortor eget tellus tempor posuere et in mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eget tortor ac nisl rhoncus condimentum. Vestibulum sit amet nisi erat, vitae varius tellus. Sed convallis quam vitae augue vehicula hendrerit iaculis leo tincidunt. Praesent arcu odio, mollis at elementum eget, lobortis eu eros. Nunc cursus, magna sed auctor interdum, velit lectus iaculis urna, non sollicitudin felis massa ac sem. Maecenas quis eros vel turpis eleifend tincidunt. Proin bibendum posuere ultrices.
Praesent congue ornare diam, eget vehicula tellus varius non. Etiam sit amet velit nulla, vel varius nisi. Aliquam in porttitor libero. Maecenas aliquam felis quis augue semper sit amet tristique nisl hendrerit. Curabitur vestibulum lacus leo, ut facilisis sem. Ut iaculis neque id metus ultricies varius. Donec nec magna ac justo laoreet rhoncus. Pellentesque nisl lectus, consequat at adipiscing ac, mollis ut erat. Ut ut rhoncus sem. Nulla nec sapien et magna posuere rhoncus sed et felis. Fusce augue urna, convallis nec vulputate ac, placerat in massa. Mauris porttitor, libero non condimentum feugiat, felis dui mollis leo, dapibus lobortis diam erat vulputate tortor. Phasellus vel magna et lorem gravida ullamcorper. Vivamus vitae augue nec felis hendrerit ullamcorper.
Etiam eu risus a felis fermentum mollis sit amet in eros. Mauris consectetur porta massa, sit amet dignissim ante commodo fringilla. Praesent congue vulputate dignissim. Nunc eleifend, tortor eu interdum gravida, diam lectus ultrices diam, sed gravida nisi est ac urna. Proin nulla felis, pharetra ut fringilla quis, lacinia viverra sapien. Nam nec enim diam. Nulla sit amet tellus libero. Suspendisse potenti. In hac habitasse platea dictumst. Praesent bibendum, felis sed pellentesque blandit, magna tellus vulputate eros, ut faucibus dolor nibh at dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
</tr>



</table>
<span class="article_separator">&nbsp;</span>
		</div>
		</td>
</tr>


</table>
          </div>
            </table>

      </div>
<!-- Content -->

      </div>
      </div>
      </div>
      </div>
```

Gruß, Eike


----------



## Maik (11. Mai 2010)

Moin,

es bleibt bei meiner gestrigen Aussage, dass dort fünf schliessende </div>-Tags zuviel enthalten sind (das Verhältnis lautet nun 24:29), und du zumindest in diesem Punkt erstmal für einen validen HTML-Code zu sorgen hast, bevor hier überhaupt mögliche Fehler im Stylesheet erörtert werden können.

Dein validierter CSS-Code nützt hier in diesem Fall  herzlich wenig.

mfg Maik


----------



## Maik (12. Mai 2010)

Hi,

ist es dir eigentlich bislang nicht sonderbar vorgekommen, dass in deinem CSS die right-Positionsangabe für *#Leiste_rechts*  "-60px" anstelle von "-208px" lautet, um den Block über dem 208px breiten rechten weißen Rahmen von *#container* zu positionieren? 

Gleiches gilt in diesem Zusammenhang für den gegenüberliegenden DIV-Block  *#Leiste_links* und dessen left-Positionsangabe, um ihn über den linken Rahmen von *#container* auszurichten.

Wie gesagt, durch den Überschuß an schliessenden </div>-Tags, werden diverse DIV-Blöcke im HTML-Code durch sie frühzeitig geschlossen, was zur Folge hat, dass sich die absoluten Positionsangaben von *#Leiste_rechts* nicht, wie zu erwarten, auf die Boxenränder des relativ positionierten DIV-Blocks *#main*, sondern auf den Dokumentkörper (rechter Fensterrand) beziehen, und daher dieser Block nach links verschoben wird, wenn die Browserfensterbreite herunterskaliert wird. Zur Gegenprobe kannst du  right:0  für *#Leiste_rechts* festlegen, und schauen, wo sich das Element anschließend wiederfindet.

Mit dem nachfolgenden HTML-Code, den ich von den fünf überschüssigen  </div>-Tags befreit und  jeweils mit  einem Kommentar versehen habe, behält *#Leiste_rechts* unter Berücksichtigung der korrekten right-Regel beim Skalieren der Fensterbreite seine angedachte Position bei.


```
<!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
```


```
<div id="main">





<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->
      <div class="kopf">
      <div style="position:absolute; left:208px;top:145px; width:551px; height:231px; z-index:2;">
      <center>        <table cellpadding="0" cellspacing="0" class="moduletable">
                        <tr>
                        <td>
                                <p><img src="/templates/_normal/images/anzeigebild.gif" border="0" width="545" height="231" /></p>                        </td>
                </tr>

                </table>
        </center>
      </div>
<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->





<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->
      <div style="position:absolute; left:394px;top:297px; width:350px; height:80px; color:#FFFFFF; z-index:3;">
          <strong></strong>

      </div>
<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->





<!-- Logo oben links in der Ecke -->
      <div id="logo">
      <img src="/templates/_normal/images/logo_spd.gif" width="100" height="100" alt="">
      </div>
<!-- Logo oben links in der Ecke -->




<!-- Headleiste oben, Text Herzlich Willkommen - daneben Logo -->
      <div id="marquee">
          <img src="/templates/_normal/images/header.gif" width="759" height="128" alt="Herzlich Willkommen auf unserer Homepage">
      </div>
<!-- Headleiste oben, Text Herzlich Willkommen - daneben Logo -->





<!-- Kleiner Balken oben ?ber der Navigation -->
      <div id="balcken_links_oben">
          <img src="/templates/_normal/images/balken_oben_links.gif" width="208" height="17" alt="">
      </div>
<!-- Kleiner Balken oben ?ber der Navigation -->






      <div id="pfad">

      </div>

      <!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->






<!-- Kleiner Balken ?ber der Aktuellesbox -->
      <div id="balcken_rechts_oben">
        <div style="margin-left:22px; margin-top:2px;">Aktuelles
        </div>
        </div>
<!-- Kleiner Balken ?ber der Aktuellesbox -->





<!-- Ende des Kopfbereichs wird durch den unten geschriebenen Befehl
festgelegt. -->
        </div>
<!-- Ende des Kopfbereichs wird durch den oben geschriebenen Befehl
festgelegt. -->





<!-- HTML -->
    <div id="container">

    <div id="inner">
<!-- HTML -->





<!-- Navigation -->
    <div id="Leiste_links">
            <table cellpadding="0" cellspacing="0" class="moduletable_menu">
                        <tr>
                        <td>

                                <ul class="menu"><li id="current" class="parent active item1"><a href="startseite.html"><span>Startseite</span></a><ul><li class="item55"><a href="/startseite/unserefreuneundpartner.html"><span>Links</span></a></li></ul></li><li class="parent item27"><a href="/ueberuns.html"><span>Über uns</span></a></li><li class="item2"><a href="/downloads.html"><span>Downloads</span></a></li><li class="item37"><a href="/aktuelles.html"><span>Aktuelles</span></a></li><li class="parent item60"><a href="/galerie.html"><span>Galerie</span></a></li><li class="parent item41"><a href="/intranetanmeldung.html"><span>Login</span></a></li><li class="parent item54"><a href="/kontaktmituns.html"><span>Kontakt aufnehmen</span></a></li><li class="item58"><a href="/impressum.html"><span>Impressum</span></a></li></ul>                        </td>
                </tr>
                </table>
                <table cellpadding="0" cellspacing="0" class="moduletable">

                        <tr>
                        <td>
                                <link rel="stylesheet" href="/components/com_uddeim/templates/default/css/uddemodule.css" type="text/css" /><div id='uddeim-module'><p class='uddeim-module-head'>Sie sind nicht eingeloggt.</p></div>                        </td>
                </tr>
                </table>
            </div>
<!-- Navigation -->




<!-- Ende des inner wird durch den unten geschriebenen Befehl
festgelegt. -->
    </div>
<!-- Ende des inner wird durch den oben geschriebenen Befehl
festgelegt. -->





<!-- Aktuellesleiste rechts -->
    <div id="Leiste_rechts">
            <table cellpadding="0" cellspacing="0" class="moduletable_text">

                        <tr>
                        <td>
                                <div class="bannergroup_text">

<div class="banneritem_text"><b>Weisheit</b><br><div class="clr"></div>
        </div>

</div>                        </td>
                </tr>

                </table>
            </div>
    <!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
<!-- Aktuellesleiste rechts -->





<!-- Ende des Containers wird durch den unten stehenden Befehl festgelegt -->
    </div>
<!-- Ende des Containers wird durch den oben stehenden Befehl festgelegt -->




<!-- Mitgliedschaft (nicht sichtbar) -->
               <div id="mitglied">
                    <table border="0" cellspacing="0" cellpadding="0" width="208">
                                          <tr><td bgcolor="FFFFFF" height="18 "width="22">&nbsp;</td><td bgcolor="#FFFFFF"> </td></tr>
                                          <tr><td colspan="2" height="10"></td></tr>
                                          <tr><td width="22">&nbsp;</td><td><a href="/" target="_blank">
                              </a></td></tr>

                              <tr><td colspan="2">&nbsp;</td></tr>

                    </table>
          </div><!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
<!-- Mitgliedschaft (nicht sichtbar) -->





<!-- Content -->
      <div id="Content_Home">
<br>

          <style type="text/css">
            p { margin-top:5px; margin-bottom:0px; }
          </style>

      <div style="position:relative; top:0px; left:23px; width:500px; border:1px solid #FFFFFF">
        <table border="0" cellspacing="0" cellpadding="0" width="480">
          <tr><td>
          <div id="overflow">
          <div class="componentheading">
        Willkommen auf der Startseite</div>

<table class="blog" cellpadding="0" cellspacing="0">
<tr>
        <td valign="top">
                                        <div>

<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<p><small>Lorem Ipsum</small></p>
<h1>Lorem Ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla enim turpis, placerat eget pellentesque nec, vehicula fermentum odio. Nullam dictum tortor non mi egestas in fringilla justo adipiscing. Cras ut eros at massa ornare pretium. Vivamus nec dignissim elit. Suspendisse potenti. Morbi in nunc vitae tortor sollicitudin feugiat. Integer at lacus a magna commodo malesuada ac dictum leo. Mauris dapibus ullamcorper hendrerit. Donec sed nisl vitae lectus suscipit facilisis fringilla a dolor. Fusce ut purus nec velit ullamcorper aliquam.
Maecenas scelerisque lorem nec erat luctus congue. Maecenas consectetur sapien massa. Aliquam erat volutpat. Quisque ultricies turpis vel justo facilisis lobortis. In a diam non urna semper facilisis tristique vel nunc. Sed vulputate eros vitae quam consectetur sed ornare diam pulvinar. Integer in enim nunc, ac sodales turpis. Nam in purus ut est condimentum egestas. Phasellus at nisi enim. Integer non nibh velit. Morbi cursus dapibus quam, et malesuada nunc cursus et. Donec non sapien est, quis suscipit mi.
Ut dictum sem ac sapien tincidunt in semper leo mollis. Ut lorem nulla, rhoncus id placerat in, fringilla at urna. Praesent ultricies libero venenatis purus iaculis sed viverra urna lacinia. Duis bibendum leo a risus bibendum condimentum. Nunc vel enim in sem laoreet vestibulum. Aenean sit amet tortor eget tellus tempor posuere et in mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eget tortor ac nisl rhoncus condimentum. Vestibulum sit amet nisi erat, vitae varius tellus. Sed convallis quam vitae augue vehicula hendrerit iaculis leo tincidunt. Praesent arcu odio, mollis at elementum eget, lobortis eu eros. Nunc cursus, magna sed auctor interdum, velit lectus iaculis urna, non sollicitudin felis massa ac sem. Maecenas quis eros vel turpis eleifend tincidunt. Proin bibendum posuere ultrices.
Praesent congue ornare diam, eget vehicula tellus varius non. Etiam sit amet velit nulla, vel varius nisi. Aliquam in porttitor libero. Maecenas aliquam felis quis augue semper sit amet tristique nisl hendrerit. Curabitur vestibulum lacus leo, ut facilisis sem. Ut iaculis neque id metus ultricies varius. Donec nec magna ac justo laoreet rhoncus. Pellentesque nisl lectus, consequat at adipiscing ac, mollis ut erat. Ut ut rhoncus sem. Nulla nec sapien et magna posuere rhoncus sed et felis. Fusce augue urna, convallis nec vulputate ac, placerat in massa. Mauris porttitor, libero non condimentum feugiat, felis dui mollis leo, dapibus lobortis diam erat vulputate tortor. Phasellus vel magna et lorem gravida ullamcorper. Vivamus vitae augue nec felis hendrerit ullamcorper.
Etiam eu risus a felis fermentum mollis sit amet in eros. Mauris consectetur porta massa, sit amet dignissim ante commodo fringilla. Praesent congue vulputate dignissim. Nunc eleifend, tortor eu interdum gravida, diam lectus ultrices diam, sed gravida nisi est ac urna. Proin nulla felis, pharetra ut fringilla quis, lacinia viverra sapien. Nam nec enim diam. Nulla sit amet tellus libero. Suspendisse potenti. In hac habitasse platea dictumst. Praesent bibendum, felis sed pellentesque blandit, magna tellus vulputate eros, ut faucibus dolor nibh at dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</tr>



</table>
<span class="article_separator">&nbsp;</span>
                </div>
                </td>
</tr>


</table>
          </div>
            </table>

      </div>
<!-- Content -->

      </div>
      </div>
      <!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
      <!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
```


mfg Maik


----------

