per JavaScript Bildschirmauflösung auslesen und dann die passende CSS Datei einbinden

[pepe_C]

hallo mein problem

ich möchte meine seite für die verschiedenen auflösungen anpassen

800 x 600

1024 x 768

1280 x1024

und will per javascript die auflösung abfragen und dann einfach die passende CSS Datei einbinden geht das überhaupt habe ein Script gefunden was wie ich denke in die richtige richtung geht aber ich habe keine ahnung von javascript

hier das script

<noscript>

Dieser Text wird ausgegeben, falls der Benutzer JavaScript deaktiviert hat.

</noscript>

<script language="JavaScript">

if (screen.width >= 1024)

window.location.href = "hohe_aufloesung.html"

else if (screen.width == 800)

window.location.href = "niedrige_aufloesung.html"

</script>

aber wie binde ich css damit ein

bitte bitte heft mir

mfg

[pepe_C]

ein vorschlag den ich gerade zusammen gegoogelt habe

<script language="JavaScript">

if (screen.width >= 1280)

document.write("<link href="style.css" rel="stylesheet" type="text/css">");

else if (screen.width >= 1024)

document.write("<link href="style_mittlere_aufloesung.css" rel="stylesheet" type="text/css">");

else if (screen.width < 1024)

document.write("<link href="style_kleine_aufloesung.css" rel="stylesheet" type="text/css">");

</script>

[Manitu71]

sollte schon möglich sein aber ist das nicht ein wenig aufwendig?

Ich gehe da jetzt nicht vom Skript aus, sondern von den versch. CSS.

Weil da musst ja auch eine genaue Vorstellung haben. Dann Schriftgröße etc.

Kann ja auch unterschiedlich eingestellt sein. Dann bräuchtest das Skript auf jeder Seite, da man denke ich auch auf Unterseiten zu dir gelangen könnte.

Ich finds vom Aufand her schon ein wenig heftig. In der jetzigen Zeit hat der Großteil 17er mit 1024x768. Wenn dann würde ich da nur die wenigen zusätzlich ansprechen, die kleiner fahren. Sprich also die 800x600er. Und selbst die steigen jetzt immer mehr um.

Ich verkauf von 100 Monitoren vielleicht noch fünf 17 Zöller. Der Rest nimmt gleich 19er. Zudem ist der Preisunterschied nimmer so heftig wie früher. Die Anzahl der umsteigenden nimmt rapide zu, weil die ihre klobigen CRT langsam mal loswerden wollen, damit auf ihren Tischen wieder etwas mehr Platz ist.

[geloescht_JesterDay]

ein vorschlag den ich gerade zusammen gegoogelt habe

Und wenn der Besucher seinen Browser gar nicht Fullscreen laufen hat? Oder wenn er die Taskleiste im Gegensatz zu dir immer eingeblendet hat (Taskleiste ist 56 Pixel hoch) oder umgekehrt? Oder wenn er die Browsergröße ändert, nachdem er deine Seite aufgerufen hat?

Auflösungsabhängige CSS-Dateien sind Blödsinn. Die Arbeit, die du in diese Javascriptzeilen und deine 3 CSS-Dateien gesteckt hast, hättest du lieber in eine CSS-Datei gesteckt, der die Auflösung egal ist.

[etreu]

Wie wäre es damit?

/*

 * cross-browser solution found at 

 * 	http://www.quirksmode.org/viewport/compatibility.html#link2

 */

// all except Explorer

if (self.innerHeight)  {

	screenx = self.innerWidth;

	screeny = self.innerHeight;

}

// Explorer 6 Strict Mode

else if (document.documentElement && document.documentElement.clientHeight) {

	screenx = document.documentElement.clientWidth;

	screeny = document.documentElement.clientHeight;

}

// other Explorers

else if (document.body) {

	screenx = document.body.clientWidth;

	screeny = document.body.clientHeight;

}

[/PHP]

[pepe_C]

Und wenn der Besucher seinen Browser gar nicht Fullscreen laufen hat? Oder wenn er die Taskleiste im Gegensatz zu dir immer eingeblendet hat (Taskleiste ist 56 Pixel hoch) oder umgekehrt? Oder wenn er die Browsergröße ändert, nachdem er deine Seite aufgerufen hat?

Auflösungsabhängige CSS-Dateien sind Blödsinn. Die Arbeit, die du in diese Javascriptzeilen und deine 3 CSS-Dateien gesteckt hast, hättest du lieber in eine CSS-Datei gesteckt, der die Auflösung egal ist.

wenn ich mich mit CSS genau auskennen würde bzw ich wüste mit welcher eigenschaft ich es hinbekomme das ich

links bei 200px anfange und dann ne 100% weite habe dann würde ich auch das spiel mit den verschiedenenen CSS dateiennicht machen

denn ganz ehrlich mir sind deine gedanken auch durch den kopf gegangen aber was soll ich machen lieber erstmal ne funktionierende lösung als gar keine und eine bessere kann ich dann immer noch einbauen

mfg

[geloescht_JesterDay]

links bei 200px anfange und dann ne 100% weite habe

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>test</title>

</head>

<body>

<div style="padding-left: 200px;">

Oc succresco Filius excellentia ait to annus offendo Tam, 

ac Crimen, agna Convenio congressio. Accubo inaestimandus 

Hic inopia quin lux te lemma Quibus torqueo effero, 

caveo sufficienter qui Litigo cui Contactus reprobabilis reddo. 

sustineo munio tenus Versutia Flagitium, spurcus comprovincialis 

Equinus ile re Placeo ivi Effodio ater ruo Augeo pia Erilis, hae virgo 

incolo ora Praemoneo deprecativ.

</div>

</body>

</html>

Wenn es weiter nichts ist

Du musst erstmal lernen "in CSS zu denken", und wegkommen vom Tabellen/Puzzle-Denken.

CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell

Schau dir das Boxmodell an. Boxen können nicht nur Texte als Inhalt haben, sondern auch wiederum andere Boxen. Entsprechend addieren sich dann die unterschiedlichen Einstellungen zu den Boxen.

Das geht nicht von heute auf morgen und kommt nach und nach, aber es geht immer besser (war bei mir zumindest so).

EDIT:

Du darfst nicht einfach deine Seite in Tabellenzellen zusammendenken und dass dan versuchen mit Divs anstelle der Zellen umsetzen zu wollen. Divs sind nur Hilfskonstrukte. Genausogut hättest du das Beispiel oben mit einem <body style="padding-left: 200px"> hinbekommen.

CSS != Divs

[pepe_C]

habs so geklärt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Unbenanntes Dokument</title>

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

<!--<link href="style.css" rel="stylesheet" type="text/css">-->

<style type="text/css">

/*==== Das sind die allgemeinen layout definitionen ======*/

html, body,#innen{ height:100%;}

body{ margin:0px; border:0px; padding:0px;  height:100%;}

#komplett{height:100%;	width:100%;	margin:0px;z-index: 0; }

#grund{ width:100%; height:100%;  }

#menue{ width:160px;  position:absolute; height:100%; top:0px; left:0px; overflow:auto; }

#mitte{ top:0px; left:160px; width:32px; position:absolute; height:100%;}

#inhalt{ margin-left:192px;   top:0px; height:100%; overflow:auto; }

/*========================================================*/

body{ font:Arial, Helvetica, sans-serif; font-size:12px; }

#grund{ background-color:#FF6600; }

#menue{ background-color:#33FF33;}

#mitte{ background-color:#0000FF; }

#inhalt{ background-color:#CCCCCC;}

</style>

</head>


<body>	

<div id="komplett">

	<div id="innen">

		<div id="grund">

			<div id="inhalt">CONTENTBEREICH<br></div>

			<div id="menue">MENUEBEREICH<br>MENUEBEREICH<br></div>

			<div id="mitte">ind3</div>	

		</div>	

	</div>

</div>

</body>

</html>

und es geht so ich hab es auf beiden (mozilla und ie) probiert

mfg

was hältst du davon

[geloescht_JesterDay]

was hältst du davon

Hm, also ich hät es so nicht gemacht, das heißt jetzt aber nicht, dass es deswegen schlecht ist. Diese Art des 3-spaltigen Layouts hab ich so noch nicht gesehen.

Was mich etwas "stört" ist die abolute Positionierung, aber das geht so wohl nicht anders. Insgesamt sollte man das ja vermeiden, aber kann man denk ich durchgehen lassen. Ich seh das glaub ich manchmal zu eng und man lernt ja immer dazu

Dein workaround mit html, body { height: 100%; } mag in den Fall sogar gehen, allerdings sollte deine Mitte nie höher als 1 Bildschirm werden Bei den anderen beiden fängt der overflow: auto das ab.

Und deine font Angabe: 12px. Wieso das denn? Was ist denn mit einem, der schlechter sieht und ne andere Auflösung hat als du? Der kann die Schrift dann im Browser auf "extra groß" eingestellt haben, bei dir is sie immer nur 12px groß. Solltest du nicht machen.

Und du hast ne Menge unnötiges in der Datei stehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Unbenanntes Dokument</title>

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

<!--<link href="style.css" rel="stylesheet" type="text/css">-->

<style type="text/css">

/*==== Das sind die allgemeinen layout definitionen ======*/

html, body { height:100%;}

body{ margin:0px; border:0px; padding:0px;  height:100%;}

#menue{ width:160px;  position:absolute; height:100%; overflow:auto; }

#mitte{ left:160px; width:32px; position:absolute; height:100%;}

#inhalt{ margin-left:192px; height:100%; overflow:auto; }

/*========================================================*/

body{ font:Arial, Helvetica, sans-serif; font-size:0.8em; }

#grund{ background-color:#FF6600; }

#menue{ background-color:#33FF33;}

#mitte{ background-color:#0000FF; }

#inhalt{ background-color:#CCCCCC;}

</style>

</head>


<body>

  <div id="menue">MENUEBEREICH<br>MENUEBEREICH<br></div>

  <div id="mitte">ind3</div>

  <div id="inhalt">CONTENTBEREICH<br></div>

</body>

</html>

ist genau dasselbe

Da du menue und mitte eh absolut positionierst, ist es egal wo sie im Quelltext stehen. Du kannst es also so einrichten, dass der Quelltext ansich in einer guten, logischen Reihenfolge ist. Also das Menü am Anfang, Mitte wird wohl eh nicht viel drin stehen und dann der Inhalt. Ist meiner Meinung nach logisch.

Mit CSS (Trennung Layout und Inhalt) sollte ja auch die Struktur des Textes berücksichtigt werden. Also der Text ansich als gutverständlicher Text und das Layout dann als Sahnehäubchen obendrauf. Hilft z.B. auch Suchmaschinen deinen Text besser zu verstehen.

[pepe_C]

hallo,

hab deinen Code mal im Dreamweaver probiert, die höhen funktionieren nur im IE setzt er mir das gesamte bild halt margin-left:192px

ich habe IE 6 & Firefox 2.0 auf meinem Rechner.

Das drei Spalten Layout wollte ich auch nicht aber meine Cheffin willes habe oder halt Frames (so wie die Seite jetzt schon besteht) ich will aber mit Frames nicht arbeiten deshalb muss ich es mit CSS hinbekommen

ich habe es jetzt so gemacht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>

<title>designer html</title>

<!--<link href="fileadmin/css/style.css" rel="stylesheet" type="text/css">-->

<style type="text/css">

/*==== Das sind die allgemeinen layout definitionen ======*/

html, body,#innen{ height:100%;}

body{ margin:0px; border:0px; padding:0px; height:100%;}

#komplett{height:100%; width:100%; margin:0px;z-index: 0; }

#grund{ width:100%; height:100%; }

#menue{ width:170px; position:absolute; height:100%; top:0px; left:0px; overflow:auto; }

#mitte{ top:0px; left:170px; width:32px; position:absolute; height:100%;}

#inhalt{ margin-left:202px; top:0px; height:100%; overflow:auto; }

#header{ float:left; left:0px; top:0px; width:100%; height:50px; background-color:#FFFFFF;}

/*========================================================*/

body{ font:Arial, Helvetica, sans-serif; font-size:12px; }

#grund{ /*background-color:#FF6600;*/ }

#menue{ /*background-color:#33FF33;*/}

#mitte{ /*background-color:#0000FF;*/ background-image:url(../html/leiste.gif); background-repeat:-y;}

#inhalt{ background-color:#CCCCCC;}

#header{ background-image:url(../html/image001.gif); background-repeat:no-repeat; background-position:right;}

</style>

</head>

<body>

<!-- ###DOKUMENT### start -->

<div id="komplett">

<div id="innen">

<div id="grund">

<div id="inhalt">

<div id="header">

<!--Inhalt des header in dem main bereich -->

###HEADER###

<!-- ende des headers-->

</div>

###INHALT###

</div>

<div id="menue">###MENU###</div>

<div id="mitte"><!--###MITTE###--></div>

</div>

</div>

</div>

<!-- ###DOKUMENT### end -->

</body>

</html>

Und damit komme ich dem was es machen soll echt richtig nahe und meiner Cheffin gefällts auch (auch wenn sie es sich nicht vorstellen kann das man mit CSS solche Sachen machen kann und dabei ist es doch nur ein xx tel von dem was CSS leisten kann) naja was soll ich machen.

mfg

[geloescht_JesterDay]

hallo,

hab deinen Code mal im Dreamweaver probiert, die höhen funktionieren nur im IE setzt er mir das gesamte bild halt margin-left:192px

ich habe IE 6 & Firefox 2.0 auf meinem Rechner.

Ok, hab es erst mit Opera, IE und FF probiert. Ging und dann hab ich nochwas mehr aufgeräumt (und dann nur im FF probiert ob es noch tut).

Du musst beim Menü und Middle das top: 0px; hinzufügen, dann macht der IE auch was er soll.

(IE 6)

[pepe_C]

habs jetzt

echt super einfach

<style type="text/css">

/*==== Das sind die allgemeinen layout definitionen ======*/

html, body { height:100%;}

body{ margin:0px; border:0px; padding:0px; height:100%;}

#menue{ top:0px; width:160px; left:0px; position:absolute; height:100%; overflow:auto; }

#mitte{ top:0px;left:160px; width:32px; position:absolute; height:100%;}

#inhalt{ margin-left:192px; height:100%; overflow:auto; }

/*========================================================*/

body{ font:Arial, Helvetica, sans-serif; font-size:0.8em; }

#menue{ background-color:#33FF33;}

#mitte{ background-image:url(leiste.gif); background-repeat:repeat-y; }

#inhalt{ background-color:#CCCCCC;}

</style>

ich musste einfach das menu left:0px; setzten und schon war das problem geklärt ich werd wohl noch viele Stunden mit CSS zubringen bis ich es ansatzweise verstehe danke dir Jesterday

mfg