Wie Homepage für verschiedene Auflösungen passend machen? - Seite 6 @ tutorials.de: Tutorials, Forum & Hilfe

Maik · 23.09.09 22:20

Und wozu dann noch die expression() im CSS-Code? Entweder, oder.

mfg Maik

netzjunkie · 23.09.09 22:22

Wenn cih es nur so mache:

HTML-Code:

}
#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

Maik · 23.09.09 22:29

Tut mir leid, bei mir paßt weiterhin der rechte Rand von #oben:

Wie Homepage für verschiedene Auflösungen passend machen?-ie6.jpg

mfg Maik

netzjunkie · 23.09.09 22:37

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-Code:

<?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>

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Verschiedene Auflösungen

Verschiedene Auflösungen bei unterschiedlichen Benutzerkonten

C4D Bilder für Webseitenlayout "passend" machen?

Verschiedene Auflösungen im Browser/Kacheln abstellen

2 Frameset für verschiedene Auflösungen ohne Javascript

E-Mail:

Abonnieren Abbestellen