Je nach Browser-Fenster Groesse eine andere CSS...???

[Kaischo]

Hallo zusammen,

Ich kann leider kein JavaScript. Deswegen suche ich wirklich direkt nach jemandem der mir das kur schreiben kann oder mir einen Link senden kann, auch wenn das nicht ganz der tolle weg ist. Ich schau mir den Code dann schon an um beim naechsten Mal nicht fragen zu muessen.

Ich will dass man die Aufloesung/Groesse des Browserfensters abfragt. Wenn man nur die Bildschirm-Aufloesung abfragt, dann kann es ja dennoch sein, dass der Benutzer sein Browserfesnter gerade KLEINER hat als sein Bildschirm Platz bietet. Geht dass denn so ??? UNd geht dass sogar on-the-fly ????

Das waere ja hammer krass. Jemand hat einen 1920x1080 TFT und geht auf die Seite, es wird die style1.css geladen. Er zieht sein Fenster klein und sobald sein Browserfesnter in der Breite 1024 oder weniger Pixel hat wird direkt style2.css geladen und die Seite aendert sich entsprechend.....

Geht sowas ? Wie weit kann ich das realisieren ??? HILFE!!! >D Danke euch schonmal

Viele Gruesse

Kaischo

EDIT:

Habe gerade einen Schnipsel gefunden der fuer mich aussieht nach dem was ich suche, aber ich weiss nicht wie ich denn zum funktionieren bekomme. Wo muss der hin...???
{

if (screen.width>600 & screen.width<=800)
{
document.write("<LINK REL='stylesheet' HREF='../../stylesheets/format20px.css'>");
}
if (screen.width>800)
{
document.write("<LINK REL='stylesheet' HREF='../../stylesheets/format20px.css'>");
}

 

[vcr80]

das sollte mit javascript gehen, das sich alle paar minuten automatisch wieder ausführt.

 

[bezierkurve]

Sehr guter Artikel zum Thema: Dynamic Resolution Dependent Layouts.

 

[vcr80]

EDIT:

Habe gerade einen Schnipsel gefunden der fuer mich aussieht nach dem was ich suche, aber ich weiss nicht wie ich denn zum funktionieren bekomme. Wo muss der hin...???
{

if (screen.width>600 & screen.width<=800)
{
document.write("<LINK REL='stylesheet' HREF='../../stylesheets/format20px.css'>");
}
if (screen.width>800)
{
document.write("<LINK REL='stylesheet' HREF='../../stylesheets/format20px.css'>");
}

das muss in einen script tag

<script Language="JavaScript">
if (screen.width>600 & screen.width<=800)
{
document.write("<LINK REL='stylesheet' HREF='../../stylesheets/format20px.css'>");
}
if (screen.width>800)
{
document.write("<LINK REL='stylesheet' HREF='../../stylesheets/format20px.css'>");
}
</script>

und der muss jetzt in den HTML-HEAD-Tag. Das sollte reichen.

 

[Kaischo]

Jo das sieht ja richtig super aus fuer mich!!! Im Prinzip die Loesung. Wenn es nicht geht nachdem ich es implementiert habe melde ich mich hier wieder Gerne aber noch mehr Links und Loesungen! Ist auch gut bei dem Ding wenn JavaScript deaktiveiert ist geht halt nur die erste CSS. Der User sieht aber wenigstens was!

 

[pepi]

"Die Lösung" außer wenn jemand JavaScript abgeschaltet hat, dann hat Deine Seite nämlich überhaupt keinen Style mehr so… Sieht sicher schick aus… Fixe Dein CSS anstatt künstliche Perversionen zu basteln.
Gruß Pepi

 

[naich]

Also du solltest natürlich dein Standard-CSS normal ohne Javascript drüber irgendwo einbinden...

Ein weiteres Problem: Du musst deine Funktion bei jedem resizen des Fensters erneut aufrufen - da wird dann document.write Probleme geben, denke ich...

Wie es ordentlich zu machen geht, steht recht gut in dem schon oben verlinkten Artikel. Ich würde mir das Beispiel einfach einmal herunterladen und damit rumspielen.
Und da in diesem Fall die CSS normal eingebunden werden, sollte es auch bei deaktiviertem Javascript keine Probleme geben.

 

[myJ]

<noscript>
CSS Code mit <link> oder <style>
</noscript>
<script>
Auflösungs abhängiges CSS mit document.write
</script>

noscript wird nur ausgeführt wenn javascript deaktiviert ist
script wird logischerweise nur ausgewführt wenn javascript aktiviert ist