✔ Wie Homepage für verschiedene Auflösungen passend machen?

Den hier ?
Also die erste Zeile davon ?

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Scheint zu klappen :)

Gruss
Thorsten
 
Klappt jedoch leider nicht
Sobald ich eine IE-Ergänzung wegnehme wird der Rand verschoben

Ausschnitt aus dem Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SP-Fotostudio</title>

<style type="text/css">
<!--
html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        padding: 0;
	background-image: url(templates/4dark/images/Homepage/body_bg.jpg); 

	
}
body {
	overflow: hidden;        /* Scrollbalken im Fenster unterbinden */

}
#oben {
        position: absolute;
        top: 10px;                        /* Abstand zum oberen Fensterrand */
        left: 100px;                /* Abstand zum linken Fensterrand */
        right: 100px;                /* Abstand zum rechten Fensterrand */
        height: 55px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        overflow: hidden;        /* Scrollbalken unterbinden */
		background-color: white;

/* nur für IE: */
        width: expression((document.body.clientWidth - 200) + "px");
 
Das kommt weiter unter....

HTML: 
</style>
<!--[if lt IE 8]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
<![endif]-->
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
 
Wenn cih es nur so mache:

HTML: 
}
#oben {
        position: absolute;
        top: 10px;                        /* Abstand zum oberen Fensterrand */
        left: 100px;                /* Abstand zum linken Fensterrand */
        right: 100px;                /* Abstand zum rechten Fensterrand */
        height: 55px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        overflow: hidden;        /* Scrollbalken unterbinden */
		background-color: white;

Ohne die beide Zeilen für den IE bekomme ich den Darstellungsfehler das der Rand nicht mehr stimmt im IE6
 
Ja, das liegt wieder an meinem Code :(
Im oberen stört irgendwie die erstllte Navigation und in den anderen die erstellten Ränder für rechts und links.
Ohne die Navigation oben verschiebt sich der Rand auch nichrt :(

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SP-Fotostudio</title>

<style type="text/css">
<!--
html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        padding: 0;
	background-image: url(templates/4dark/images/Homepage/body_bg.jpg); 

	
}
body {
	overflow: hidden;        /* Scrollbalken im Fenster unterbinden */

}
#oben {
        position: absolute;
        top: 10px;                        /* Abstand zum oberen Fensterrand */
        left: 100px;                /* Abstand zum linken Fensterrand */
        right: 100px;                /* Abstand zum rechten Fensterrand */
        height: 55px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        overflow: hidden;        /* Scrollbalken unterbinden */
		background-color: white;

/* nur für IE: */
        width: expression((document.body.clientWidth - 200) + "px");
}
#oben .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}
#links {
        position: absolute;
        left: 54px;                /* Abstand zum linken Fensterrand */
        top: 10px;                /* Abstand zum oberen Fensterrand */
        width: 46px;                /* Blockhöhe */
        bottom: 10px;                /* Abstand zum unteren Fensterrand */
        overflow: hidden;                /* Scrollbalken, falls notwendig */
	    background-image: url(templates/4dark/images/Homepage/links.jpg);  
/* nur für IE: */
        width: 46px; 
        height: expression((document.body.clientHeight - 20) + "px");  /* top-Wert + bottom-Wert */
}
#rechts {
        position: absolute;
        right: 54px;                /* Abstand zum linken Fensterrand */
        top: 10px;                /* Abstand zum oberen Fensterrand */
        width: 46px;                /* Blockhöhe */
        bottom: 10px;                /* Abstand zum unteren Fensterrand */
        overflow: hidden;                /* Scrollbalken, falls notwendig */
	background-image: url(templates/4dark/images/Homepage/rechts.jpg);  
/* nur für IE: */
        width: 46px; 
        height: expression((document.body.clientHeight - 20) + "px");  /* top-Wert + bottom-Wert */
}
#mitte {
        position: absolute;
        left: 100px;                /* Abstand zum linken Fensterrand */
        top: 65px;                /* Abstand zum oberen Fensterrand */
        right: 100px;                /* Abstand zum rechten Fensterrand */
        bottom: 60px;                /* Abstand zum unteren Fensterrand */
        overflow: hidden;                /* Scrollbalken, falls notwendig */
		background-color: white;
/* nur für IE: */
        width: expression((document.body.clientWidth - 200) + "px"); /* left-Wert + right-Wert */
        height: expression((document.body.clientHeight - 125) + "px");  /* top-Wert + bottom-Wert */
}
#mitte .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}

#unten {
        position: absolute;
        left: 100px;                /* Abstand zum linken Fensterrand */
        bottom: 10px !important;        /* Abstand zum unteren Fensterrand */
        bottom: 9px;                /* nur für IE */
        right: 100px;                /* Abstand zum rechten Fensterrand */
        height: 50px;                /* Blockhöhe */
        padding: 0px;                /* Interpretation Boxmodell! */
        overflow: hidden;        /* Scrollbalken unterbinden */
		text-align: center;
		background-color: #FAFAFA;
		border-color: #CCCCCC ;
		border-width:1px; 
		border-style:solid;
/* nur für IE: */
        width: expression((document.body.clientWidth - 200) + "px");
                                /* left-Wert + right-Wert = 200 */
}
#unten .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}

.outer {
        position:relative;
        display:table;
        height: 100%;
        width: 100%;
        vertical-align: middle;
        text-align: center;
        float:left;
}
.inner {
	width:100%;
	display:table-cell;
	vertical-align:middle;
	position:relative;
}

a:link {
        color: #000000;
}
a:visited {
        color: #000000;
}
a:hover {
        color: #FF0000;
}
a:active {
        color: #FF0000;
}
.Stil43 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	font-weight: bold;
  }

  ul#Navigation {
    margin: 0; padding: 0.5em;
    text-align: center;

  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
  }

  ul#Navigation a, ul#Navigation span {
    float: right; width: 6em;
    margin: 0.4em; padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: white; background-color: #3D3D3D;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* Korrektur fuer IE 5.x */
    width: 8em;
    w\idth: 6em;
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: black; background-color: #F7F7F7;
  }
  ul#Navigation div {
     clear: left;
  }


.Stil63 {font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight: bold; }
-->
</style>
<!--[if lt IE 8]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<!-- Programmierung für oberen Container -->

<div id="oben">
<div class="inhaltDiv">
<p>{header}</p>
<table width="95%" height="35" border="0" align="center">
<tr><td width="280" valign="top">
<div align="left"><a href="http://www.sp-fotostudio.de"><img src="templates/4dark/images/Homepage/Logo.jpg" alt="" border="0" /></a>
<br />
</div></td>
<td>
<ul id="Navigation">
                <li><a href="#Beispiel">Gästebuch</a></li>
                      <li><a href="#Beispiel">Kontakt</a></li>
                      <li><a href="#Beispiel">Fotografin</a></li>
                      <li><a href="#Beispiel">Preise</a></li>
                      <li><a href="#Beispiel">Workshops</a></li>
                      <li><a href="galerie.php">Galerie</a></li>
          </ul>
        </td>
</tr>
</table>
</div>
</div>

<!-- Programmierung für mittleren Container -->

<div id="mitte">
<div class="outer">
<div class="inner">
<p><table width="900" height="250" border="0" align="center" background="http://www.sp-fotostudio.de/test/templates/4dark/images/Homepage/SP.jpg">
  <td valign="center" align="center">
<strong>Herzlich Willkomen :)<br /><br />
Hier entsteht zur Zeit mein neues Design - laßt Euch überraschen...</strong>
</td>
</table></p>
<br />
<p><img src="http://www.sp-fotostudio.de/test/templates/4dark/images/Homepage/oben.jpg" /></p>
<p class="Stil43">Alle Rechte der hier gezeigten Bilder liegen beim Fotografen oder den Modellen und d&uuml;rfen nicht <br />
ohne schriftliche Genehmigung des Rechteinhabers weiter verwendet werden.</p>
</div>
</div>
</div>

<!-- Programmierung für unteren Container -->

<div id="unten">
{footer}
</div>

</body>
</html>

<div id="links">
</div>
</body>
</html>

<div id="rechts">
</div>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück