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

[Maik]

Mach das mal. Ich gönne mir jetzt erstmal etwas DFB-Pokal und dann eine Mütze voll Schlaf

mfg Maik

 

[netzjunkie]

Ich hoffe deine Mannschaft hat gewonnen

Das mit dem Hintergrund habe ich hinbekommen, aber nicht mit der Grafik, sondern mit einer kleinen Grafikkachel die ich dann wiederholen lasse. Diese habe ich dann aber auch in den BODY oben gepackt und die 3 Container einfach 100px vom rechten und linken Rand entfernt, so dass man bei diesem 'Rahmen' die Grafik sieht.

War zwar Bastelei, aber das macht Spaß wenn man wenigstens den Erfolg sieht.

Gruss
Thorsten

Danke nochmals für die ganzen Tips und hilfen !

 

[netzjunkie]

Hallo Maik,

eine kurze Frage.
Wenn ich links komplett ein DIV mache erstelle ich das wie folgt (was auch klappt)

#links {
        position: absolute;
        left: 54px;                /* Abstand zum linken Fensterrand */
        top: 10px;                /* Abstand zum oberen Fensterrand */
        width: 46px;                /* Blockbreite */
        bottom: 10px;                /* Abstand zum unteren Fensterrand */
        overflow: hidden;                /* Scrollbalken, falls notwendig */
	background-image: url(templates/4dark/images/Homepage/links.jpg);  
}

Jetzt aber kommt der ZUsatz für den IE

/* nur für IE: */
        width: expression((document.body.clientWidth - xx) + "px"); /* left-Wert + right-Wert */
        height: expression((document.body.clientHeight - 20) + "px");  /* top-Wert + bottom-Wert */

Wie errechne ich denn die Weite wenn ich nur einen left-Wert habe aber keinen direkten right-Wert ?

Gruss
Thorsten

EDIT
Ich habe es hinbekommen *freu*

/* nur für IE: */
        width: 46px; 
        height: expression((document.body.clientHeight - 20) + "px");  /* top-Wert + bottom-Wert */

 

[Maik]

Hab noch einen kleinen Tipp, so kurz vorm Pokalspiel-Anstoß

Auf die expression()-Deklarationen kannst du im Stylesheet gänzlich verzichten, wenn du stattdessen ie7-js implementierst.

Das Script fixt daneben im IE6 noch weitere seiner typischen Bugs und Mangelerscheinungen (siehe unter Examples).

mfg Maik

 

[netzjunkie]

Kann ich das dann so schreiben ?

<!--[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]-->

 

[Maik]

jo

mfg Maik

 

[netzjunkie]

Das habe ich versucht und alle expression() gelöscht. Dann hatte ich aber wieder Darstellungsfehlern. Mit den expression() habe ich die nicht.
Deswegen habe ich die jetzt wieder reingemacht.

Gruss
Thorsten

 

[Maik]

Was für Darstellungsfehler waren das denn genau?

Grundsätzlich funktioniert nämlich die angewandte CSS-Technik zur Positionierung der einzelnen DIV-Blöcke in Verbindung mit dem ie7-Script anstelle der expression()s im IE6 einwandfrei.

mfg Maik

 

[netzjunkie]

Wenn ich zum Beispiel von

#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");

Die IE-Ergänzung wegnehme wird der rechte Rand etwas nach links hin verschoben

Gruss
Thorsten

 

[Maik]

Besitzt das Dokument noch den XML-Prolog vor der Doctype-Deklaration?

Wenn ja, entferne ihn, damit der IE6 nicht mehr in den Quirksmodus switcht, sondern wie die anderen Browser im standardkonformen Modus läuft.

mfg Maik