je nach auflösung css einbinden

[Melanie]

hallo,

ich möchte je nach auflösung andere stylesheets in meine homepage einbinden. sie passt ab 1024x768 sowieso, aber für 800x600 möchte ich veränderungen vornehmen.

habe schon in alten beiträgen gesucht und folgende lösung gefunden. leider funzt das net so richtig. kann mir jemand sagen, was denn da net funktioniert? kenn mich mit javascript nur sehr wenig aus...
danke, melanie

<script language="text/javascript">
<!--
  if(screen.height <= 600)
    document.write('<link rel="stylesheet" href="css\normal800.css" type="text/css">');
    document.write('<link rel="stylesheet" href="css\inhalt800.css" type="text/css">');
  else
     document.write('<link rel="stylesheet" href="css\normal1024.css" type="text/css">');
    document.write('<link rel="stylesheet" href="css\inhalt1024.css" type="text/css">');
// -->
</script>

[Christian Seiler]

Hallo Melanie,

<script language="text/javascript">

Das language-Attribut ist unnötig, das type-Attribut dagegen Pflicht:

<script type="text/javascript">

<!--
  if(screen.height <= 600)

Hier fehlt eine geschweifte Klammer auf:

if(screen.height <= 600) {

document.write('<link rel="stylesheet" href="css\normal800.css" type="text/css">');
    document.write('<link rel="stylesheet" href="css\inhalt800.css" type="text/css">');
  else

Hier fehlen zwei geschweifte Klammern:

} else {

document.write('<link rel="stylesheet" href="css\normal1024.css" type="text/css">');
    document.write('<link rel="stylesheet" href="css\inhalt1024.css" type="text/css">');

Hier fehlt eine geschweifte Klammmer zu:

}

// -->
</script>

Noch etwas: Die Bildschirmgröße hat höchstens bedingt etwas mit der größe des Anzeigebereichs der Webseite zu tun. Ich kann unter meiner Auflösung von 1280x1024 mein Fenster 640x480 Pixel groß machen, es aber auch auf den gesamten Bildschirm ausdehnen. Daher ist die Bildschrimgröße die denkbar schelchteste Idee, um eine Weiche zu realiseren. Desweiteren bekommen diejenigen, die JavaScript deaktiviert haben, bei Deiner Lösung überhaupt kein CSS zu Gesicht.

Viele Grüße,
Christian

[Melanie]

mir ist schon klar, dass die fenster nicht vollbild sein müssen. aber wie bezieht man das auch noch mit ein? das fenster kann ja beliebig groß sein und auf alles kann ich doch auch net reagieren.

ab 1024 wird ja alles korrekt angezeigt, aber wie löst du denn das problem 800x600? für mich ists nämlich ein problem ;-)

mfg melanie

[Fabian Transchel]

Hi

ab 1024 wird ja alles korrekt angezeigt, aber wie löst du denn das problem 800x600? für mich ists nämlich ein problem ;-)

Skalierbare Seiten produzieren.

Grüße aus Barsinghausen,
Fabian

[Melanie]

Skalierbare Seiten produzieren.

das problem ist halt, dass ich eine auflösung von 1400x... hab und da brauch ich eine größere schrift, damit man überhaupt noch was lesen kann.
bei einer auflösung von 800x... ist die schrift dann riesig und alles passt nicht drauf...

ich hab die seite jetzt mal kurz hochgeladen, würd mich auch über feedback, was das aussehen betrifft, freuen - bin mir nicht ganz sicher, ob mir die seite schon gefällt...

mfg, melanie

[Christian Seiler]

Hallo Melanie,

ich hab die seite jetzt mal kurz hochgeladen, würd mich auch über feedback, was das aussehen betrifft, freuen - bin mir nicht ganz sicher, ob mir die seite schon gefällt...

Ich bekomme gar keine Stylesheets mit. Warum? Du verwendest den falschen Pfadtrenner: css\normal1024.css - \ ist falsch, Du musst / verwenden: css/normal1024.css Alle Browser, die bei Deiner Seite trotzdem die Stylesheets laden, halten sich in der Hinsicht nicht an den Standard.

Viele Grüße,
Christian

[Melanie]

Hallo Christian,

ich bin schon ziemlich doof. ist aber jetzt repariert. würdest dus dir nochmal kurz anschauen?

wie löst ud das problem der schriftgröße bei verschiedenen auflösungen?

melanie

[Christian Seiler]

Hallo Melanie,

ich bin schon ziemlich doof. ist aber jetzt repariert. würdest dus dir nochmal kurz anschauen?

Das IFrame ist bei mir so winzig (Standardgröße, Du selbst hast anscheinend keine größe festgelegt) dass ich da sowieso nicht viel erkennen kann, der größte Teil der Seite ist einfach nur weißer Hintergrund.

Aber selbst da erkenne ich keine Probleme, das Fenster auf eine Breite von 800 Pixel runterzuskalieren, das einzige, was ein bisschen stört, ist die breite Graphik. (eventuell zwei drausmachen und die nebeneinanderstellen, dass sie bei zu geringer breite untereinander geraten, wie ein normaler Umbruch)

Was die Schriftgrößen an sich angeht: Lies mal http://www.netandmore.de/faq/fom-serve/cache/414.html - vor allem der Abschnitt über die Einheit "em".

Viele Grüße,
Christian

[Melanie]

hallo

Das IFrame ist bei mir so winzig (Standardgröße, Du selbst hast anscheinend keine größe festgelegt)

ich hab den iframe sehr wohl eingestellt und zwar in der normal1024.css

iframe{
 width=740px;
 height=69%;
 position:absolute;
 left:190px;
 top:130px;
 border-style:solid;
 border-width:2px;}

wieso zeigt er das nicht an?
melanie

[Christian Seiler]

Hallo Melanie,

width=740px;

width:740px;

height=69%;

height:69%;

wieso zeigt er das nicht an?

Falsches Trennzeichen. Dem IE ist das egal, meinem Browser nicht. (und laut Standard hat meiner Recht, aber das ist eine andere Diskussion...)

Viele Grüße,
Christian

[Melanie]

hallo zurück,

heute stelle ich mich wirklich besonders blöd an... hab jetzt auch das repariert - der nächste fehler kommt bestimmt ;-)

melanie

[Christian Seiler]

Hallo Melanie,

mir ist schon klar, dass die fenster nicht vollbild sein müssen. aber wie bezieht man das auch noch mit ein? das fenster kann ja beliebig groß sein und auf alles kann ich doch auch net reagieren.

Doch. document.body.offsetWidth/document.body.offsetHeight für den IE und window.innerWidth/window.innerHeight für alle anderen Browser. (die das können) Da steht die größe des _Anzeigebreichs_ drinnen, was nicht mal notwendigerweise die Fenstergröße ist.

Allerdings: Warum machst Du es nicht so, wenn Du schon eine Auflösungsweiche brauchst:

<link rel="stylesheet" href="css/normal800.css" type="text/css">
<link rel="stylesheet" href="css/inhalt800.css" type="text/css">
<script language="text/javascript">
<!--
  if (window.innerWidth) {
    breite = window.innerWidth;
  } else if (document.body.offsetWidth) {
    breite = document.body.offsetWidth;
  } else {
    breite = 640;
  }
  if (breite > 1000) {
    document.write('<link rel="stylesheet" href="css/normal1024.css" type="text/css">');
    document.write('<link rel="stylesheet" href="css/inhalt1024.css" type="text/css">');
  }
// -->
</script>

(keine Garantie, dass es im IE immer funktioniert, in SELFHTML wird vor dem, was ich gerade mache, gewarnt, siehe http://selfhtml.teamone.de/javascript/objekte/window.htm#inner_width)

Dann sehen auch Leute mit deaktiviertem JavaScript die Stylesheets. Allerdings ist es eher zu empfehlen, die Seite möglichst Auflösungsunabhängig zu schreiben.

ab 1024 wird ja alles korrekt angezeigt, aber wie löst du denn das problem 800x600?

Ohne Deine Seite zu kennen, kann ich Dir da nicht weiterhelfen.

Viele Grüße,
Christian

[MudGuard]

Hi,

Ich kann unter meiner Auflösung von 1280x1024 mein Fenster 640x480 Pixel groß machen, es aber auch auf den gesamten Bildschirm ausdehnen.

Geht auch größer, einfach mal

javascript:resizeTo(5000,5000);

in die Adreßzeile eingeben...

cu,
Andreas

[Christian Seiler]

Hallo Andreas,

javascript:resizeTo(5000,5000);

Bei mir passiert gar nichts. ;-)

Viele Grüße,
Christian