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

Maik · 6. September 2009

Einfach so

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>CSS-Beispiel 1: position_fixed</title>

<style type="text/css">
<!--
html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        padding: 0;
}
body {
        overflow: hidden;        /* Scrollbalken im Fenster unterbinden */
        margin-left: 0px;
}
#mitte {
        position: absolute;
        left: 0px;                /* Abstand zum linken Fensterrand */
        top: 70px;                /* Abstand zum oberen Fensterrand */
        right: 0;                /* Abstand zum rechten Fensterrand */
        bottom: 50px;                /* Abstand zum unteren Fensterrand */
        overflow: auto;                /* Scrollbalken, falls notwendig */

/* nur für IE: */
        width: expression((document.body.clientWidth - 300) + "px");
                                /* left-Wert + right-Wert = 300 */
        height: expression((document.body.clientHeight - 200) + "px");                                /* top-Wert + bottom-Wert = 200 */
}
#mitte .inhaltDiv {
        margin: 20px;                /* Abstand des Inhalts zum Blockrand */
}
#oben {
        position: absolute;
        top: 0;                        /* Abstand zum oberen Fensterrand */
        left: 0;                /* Abstand zum linken Fensterrand */
        right: 0;                /* Abstand zum rechten Fensterrand */
        height: 70px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        background-color: #fff;
        overflow: hidden;        /* Scrollbalken unterbinden */
/* nur für IE: */
        width: expression(document.body.clientWidth + "px");
                                /* left-Wert + right-Wert = 0 */
}
#oben .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}
#unten {
        position: absolute;
        left: 0px;                /* Abstand zum linken Fensterrand */
        bottom: 0 !important;        /* Abstand zum unteren Fensterrand */
        bottom: -1px;                /* nur für IE */
        right: 0;                /* Abstand zum rechten Fensterrand */
        height: 75px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        background-color: #fff;
        overflow: hidden;        /* Scrollbalken unterbinden */
/* 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 */
}
.Stil39 {        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FF0000;
        font-weight: bold
}
a:link {
        color: #000000;
}
a:visited {
        color: #000000;
}
a:hover {
        color: #000000;
}
a:active {
        color: #FF0000;
}

.outer {
        position:relative;
        display:table;
        height: 100%;
        width: 100%;
        vertical-align: middle;
        text-align: center;
        background:red;
        float:left
}
.inner {
        width:100%;
        display:table-cell;
        vertical-align:middle;
        position:relative;
}
-->
</style>
<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>

<div id="mitte">
<div class="outer">
  <div class="inner">
    <p>This is some random text : </p>
  </div>
</div>
</div>

<div id="oben">
<div class="inhaltDiv">
</div>
</div>

<div id="unten">
<div class="inhaltDiv">
</div>
</div>

</body>
</html>

mfg Maik

netzjunkie · 6. September 2009

Einfach so ist gut gesagt

Für dich vielleicht *g*

Und schon wieder tausend Dank an Dich

Da habe ich ja wieder etwas zum lernen für die nächsten Tage...

Gruss
Netzjunkie

netzjunkie · 13. September 2009

Hallo Maik

eigentlich komme ich ganz gut vorran - dachte ich

Mir ist dann nämlich aufgefallen das im Firefox alles richtig angezeigt wird, aber im Internet Explorer der mittlere Teil nicht mittig ist und viel zu groß ist.
Kannst Du bitte einmal gucken warum das so ist ?
Wie mir aufgefallen ist ist das auch unter dem oben genannten Link (http://www.pmob.co.uk/temp/vertical-align9.htm) im IE so, daß er dieses falsch darstellt.

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;
}
body {
        overflow: hidden;        /* Scrollbalken im Fenster unterbinden */
        margin-left: 0px;
}
#mitte {
        position: absolute;
        left: 0px;                /* Abstand zum linken Fensterrand */
        top: 80px;                /* Abstand zum oberen Fensterrand */
        right: 0;                /* Abstand zum rechten Fensterrand */
        bottom: 60px;                /* Abstand zum unteren Fensterrand */
        overflow: auto;                /* Scrollbalken, falls notwendig */

/* nur für IE: */
        width: expression((document.body.clientWidth - 300) + "px");
                                /* left-Wert + right-Wert = 300 */
        height: expression((document.body.clientHeight - 200) + "px");                                /* top-Wert + bottom-Wert = 200 */
}
#mitte .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}
#oben {
        position: absolute;
        top: 0;                        /* Abstand zum oberen Fensterrand */
        left: 0;                /* Abstand zum linken Fensterrand */
        right: 0;                /* Abstand zum rechten Fensterrand */
        height: 80px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        background-color: #fff;
        overflow: hidden;        /* Scrollbalken unterbinden */
/* nur für IE: */
        width: expression(document.body.clientWidth + "px");
                                /* left-Wert + right-Wert = 0 */
}
#oben .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}
#unten {
        position: absolute;
        left: 0px;                /* Abstand zum linken Fensterrand */
        bottom: 0 !important;        /* Abstand zum unteren Fensterrand */
        bottom: -1px;                /* nur für IE */
        right: 0;                /* Abstand zum rechten Fensterrand */
        height: 60px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        overflow: hidden;        /* Scrollbalken unterbinden */
		background-color: #FBFAFB;
/* nur für IE: */
        width: expression((document.body.clientWidth - 200) + "px");
                                /* left-Wert + right-Wert = 200 */
}
#unten .inhaltDiv {
        margin: 0px;                /* Abstand des Inhalts zum Blockrand */
}
a:link {
        color: #000000;
}
a:visited {
        color: #000000;
}
a:hover {
        color: #FF0000;
}
a:active {
        color: #FF0000;
}

.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;
}
.Stil40 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	font-weight: bold;
}
.outer2 {
        position:relative;
        display:table;
        height: 100%;
        width: 100%;
        vertical-align: middle;
        text-align: center;
        float:left;
		border: 1px solid #CCCCCC;
		background-color: #FAFAFA;
}
.inner2 {
        width:100%;
        display:table-cell;
        vertical-align:middle;
        position:relative;
		background-color: #FAFAFA;
}
-->
</style>
<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>

<div id="mitte">
<div class="outer">
<div class="inner">
Test
</div>
</div>
</div>

<div id="oben">
<div class="inhaltDiv">
Test
</div>
</div>

<div id="unten">
<div class="outer2">
<div class="inner2">
Test
</div>
</div>
</div>

</body>
</html>

Gruss und Danke im Voraus
Thorsten

EDIT:
Wenn ich den Befehl

HTML:

<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->

rasunehme, dann wird es auch im IE richtig angezeigt.
Die Frage die ich jetzt aber habe ist, ob durch das Löschen des Codes es nicht zu anderen Fehlern kommen könnte...

Gruss
Thorsten

Maik · 13. September 2009

Schau mal, was hier Widersprüchliches festgelegt ist:

Code:

#mitte {
        position: absolute;
        left: 0px;                /* Abstand zum linken Fensterrand */
        top: 80px;                /* Abstand zum oberen Fensterrand */
        right: 0;                /* Abstand zum rechten Fensterrand */
        bottom: 60px;                /* Abstand zum unteren Fensterrand */
        overflow: auto;                /* Scrollbalken, falls notwendig */

/* nur für IE: */
        width: expression((document.body.clientWidth -300) + "px");
                                /* left-Wert + right-Wert = 300 */

Wenn left:0 und right:0 als Startposition festgelegt ist, lautet es korrekterweise:

Code:

width: expression((document.body.clientWidth) + "px");

Gleiches gilt übrigens auch für den Block #unten.

Und mit diesen Zeilen:

Code:

<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->

und dem dazugehörigen Markup:

HTML:

<div id="mitte">
<div class="outer">
<div class="inner">
<p>Test</p>
</div>
</div>
</div>

wird im IE der Textabsatz in vertikalen Mitte seines Anzeigebereichs ausgerichtet.

mfg Maik

netzjunkie · 13. September 2009

Hallo Maik

auch mit der Veränderung auf 0 wird er bei mir im IE nicht als mittig dargestellt.

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>test</title>

<style type="text/css">
<!--
html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        padding: 0;
}
body {
        overflow: hidden;        /* Scrollbalken im Fenster unterbinden */
        margin-left: 0px;
}
#mitte {
        position: absolute;
        left: 0;                /* Abstand zum linken Fensterrand */
        top: 75px;                /* Abstand zum oberen Fensterrand */
        right: 0;                /* Abstand zum rechten Fensterrand */
        bottom: 60px;                /* Abstand zum unteren Fensterrand */
        overflow: auto;                /* Scrollbalken, falls notwendig */
/* nur für IE: */
        width: expression(document.body.clientWidth + "px"); /* left-Wert + right-Wert */
        height: expression((document.body.clientHeight -135) + "px");  /* top-Wert + bottom-Wert */
}
#mitte .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}
#oben {
        position: absolute;
        top: 0;                        /* Abstand zum oberen Fensterrand */
        left: 0;                /* Abstand zum linken Fensterrand */
        right: 0;                /* Abstand zum rechten Fensterrand */
        height: 75px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        background-color: #FFF;
        overflow: hidden;        /* Scrollbalken unterbinden */
/* nur für IE: */
        width: expression(document.body.clientWidth + "px");
                                /* left-Wert + right-Wert */
}
#oben .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}
#unten {
        position: absolute;
        left: 0px;                /* Abstand zum linken Fensterrand */
        bottom: 0 !important;        /* Abstand zum unteren Fensterrand */
        bottom: -1px;                /* nur für IE */
        right: 0;                /* Abstand zum rechten Fensterrand */
        height: 60px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        overflow: hidden;        /* Scrollbalken unterbinden */
		background-color: #FBFAFB;
/* nur für IE: */
        width: expression(document.body.clientWidth + "px");
                                /* left-Wert + right-Wert  */
}
#unten .inhaltDiv {
        margin: 0px;                /* Abstand des Inhalts zum Blockrand */
}
a:link {
        color: #000000;
}
a:visited {
        color: #000000;
}
a:hover {
        color: #FF0000;
}
a:active {
        color: #FF0000;
}

.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;
}
.Stil40 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	font-weight: bold;
}
.outer2 {
        position:relative;
        display:table;
        height: 100%;
        width: 100%;
        vertical-align: middle;
        text-align: center;
        float:left;
		border: 1px solid #CCCCCC;
		background-color: #FAFAFA;
}
.inner2 {
        width:100%;
        display:table-cell;
        vertical-align:middle;
        position:relative;
		background-color: #FAFAFA;
}
-->
</style>
<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![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">
OBEN
</div>
</div>

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

<div id="mitte">
<div class="outer">
<div class="inner">
MITTE
</div>
</div>
</div>

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

<div id="unten">
<div class="outer2">
<div class="inner2">
UNTEN
</div>
</div>
</div>

</body>
</html>

Maik · 13. September 2009

Der Inhalt kann auch nicht in der vertikalen Mitte erscheinen, denn:

CSS:

Code:

#mitte {
        position: absolute;
        left: 0px;                /* Abstand zum linken Fensterrand */
        top: 75px;                /* Abstand zum oberen Fensterrand */
        right: 0px;                /* Abstand zum rechten Fensterrand */
        bottom: 60px;                /* Abstand zum unteren Fensterrand */
        overflow: auto;                /* Scrollbalken, falls notwendig */
/* nur für IE: */
        width: expression((document.body.clientWidth) + "px");

        height: expression((document.body.clientHeight - 135) + "px");                                /* top-Wert + bottom-Wert = 135 */
}

HTML:

Code:

<div id="mitte">
<div class="outer">
<div class="inner">
<p>MITTE</p>
</div>
</div>
</div>

Mitlesen und mitdenken ist hier schon erwünscht.

mfg Maik

netzjunkie · 13. September 2009

Das mit der 135 hatte ich gerade noch gesehen und korrigiert.
Trotzdem erscheint das nicht in der Mitte
Nur wenn ich diesen Zusatz

HTML:

<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->

wegnehme funktioniert es.
Ich habe ja im unteren Bereich auch das Inner und Outer eingefügt, welches im <!--[if IE ]> nicht erscheint. Da es dort nicht erscheint denke ich funktioniert es im untern Bereich das es mittig ist

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>test</title>

<style type="text/css">
<!--
html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        padding: 0;
}
body {
        overflow: hidden;        /* Scrollbalken im Fenster unterbinden */
        margin-left: 0px;
}
#mitte {
        position: absolute;
        left: 0;                /* Abstand zum linken Fensterrand */
        top: 75px;                /* Abstand zum oberen Fensterrand */
        right: 0;                /* Abstand zum rechten Fensterrand */
        bottom: 60px;                /* Abstand zum unteren Fensterrand */
        overflow: auto;                /* Scrollbalken, falls notwendig */
/* nur für IE: */
        width: expression(document.body.clientWidth + "px"); /* left-Wert + right-Wert */
        height: expression((document.body.clientHeight - 135) + "px");  /* top-Wert + bottom-Wert */
}
#mitte .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}
#oben {
        position: absolute;
        top: 0;                        /* Abstand zum oberen Fensterrand */
        left: 0;                /* Abstand zum linken Fensterrand */
        right: 0;                /* Abstand zum rechten Fensterrand */
        height: 75px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        background-color: #FFF;
        overflow: hidden;        /* Scrollbalken unterbinden */
/* nur für IE: */
        width: expression(document.body.clientWidth + "px");
                                /* left-Wert + right-Wert */
}
#oben .inhaltDiv {
        margin: 10px;                /* Abstand des Inhalts zum Blockrand */
}
#unten {
        position: absolute;
        left: 0px;                /* Abstand zum linken Fensterrand */
        bottom: 0 !important;        /* Abstand zum unteren Fensterrand */
        bottom: -1px;                /* nur für IE */
        right: 0;                /* Abstand zum rechten Fensterrand */
        height: 60px;                /* Blockhöhe */
        padding: 0;                /* Interpretation Boxmodell! */
        overflow: hidden;        /* Scrollbalken unterbinden */
		background-color: #FBFAFB;
/* nur für IE: */
        width: expression(document.body.clientWidth + "px");
                                /* left-Wert + right-Wert  */
}
#unten .inhaltDiv {
        margin: 0px;                /* Abstand des Inhalts zum Blockrand */
}
a:link {
        color: #000000;
}
a:visited {
        color: #000000;
}
a:hover {
        color: #FF0000;
}
a:active {
        color: #FF0000;
}

.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;
}
.Stil40 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	font-weight: bold;
}
.outer2 {
        position:relative;
        display:table;
        height: 100%;
        width: 100%;
        vertical-align: middle;
        text-align: center;
        float:left;
		border: 1px solid #CCCCCC;
		background-color: #FAFAFA;
}
.inner2 {
        width:100%;
        display:table-cell;
        vertical-align:middle;
        position:relative;
		background-color: #FAFAFA;
}
-->
</style>
<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![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>OBEN</p>
</div>
</div>

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

<div id="mitte">
<div class="outer">
<div class="inner">
<p>MITTE</p>
</div>
</div>
</div>

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

<div id="unten">
<div class="outer2">
<div class="inner2">
<p>UNTEN</p>
</div>
</div>
</div>

</body>
</html>

Maik · 13. September 2009

Tut mir leid, mit meinen Vorschlägen erscheint "MITTE" im IE dort, wo es erwünscht ist (#oben hab ich hier mal spaßeshalber eine Hintergrundfarbe gegönnt, damit die Boxengrenzen zu erkennen sind):

Vielleicht mal zwischendurch den Browsercache leeren.

mfg Maik

netzjunkie · 13. September 2009

Welche Version des IE nutzt du denn ?

bei mir sieht es so aus

Maik · 13. September 2009

Hab's mir bislang im IE6 + IE7 angeschaut.

Dein Schnappschuß stammt aus'm IE8, und den kann ich bei mir bestätigen.

mfg Maik

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

Maik

netzjunkie

Mitglied

netzjunkie

Mitglied

Maik

netzjunkie

Mitglied

Maik

netzjunkie

Mitglied

Maik

netzjunkie

Mitglied

Anhänge

Maik

Neue Beiträge