verschiedene CSS für unterschiedliche Browserfenstergrößen

[b-guided]

Hallo zusammen,

brauche Hilfe bei einem wahrscheinlich kleinen Problem.
Ich möchte gerne die aktuelle Größe des aktiven Browserfenster (NICHT Monitordarstellung) beim Nutzer abfragen und für z.B. Browserfenster mit weniger als 500px Höhe ein anderes CSS ansteuern als für grosse Browserfenster. Da ich auf diesem Auge leider blind bin, erhoffe ich mir eine Hilfestellung aus dem Forum.

Gruss und Danke im voraus ...

[Beat]

Ich möchte gerne die aktuelle Größe des aktiven Browserfenster (NICHT Monitordarstellung) beim Nutzer abfragen und für z.B. Browserfenster mit weniger als 500px Höhe ein anderes CSS ansteuern als für grosse Browserfenster. Da ich auf diesem Auge leider blind bin, erhoffe ich mir eine Hilfestellung aus dem Forum.

Vermutlich willst du eher du eher herausfinden, wie breit das html Element ist, wenn es eine width von 100% hat.

clientWidth / clientHeight
und offsetWidth / offsetHight
sind für alle gängigen Browser verständlich.
Im Prinzip würde ich nicht das CSS, sondern lediglich Klassen umschreiben.

mfg Beat

[Gunnar Bittersmann]

@@b-guided:

nuqneH

Ich möchte gerne die aktuelle Größe des aktiven Browserfenster (NICHT Monitordarstellung) beim Nutzer abfragen und für z.B. Browserfenster mit weniger als 500px Höhe ein anderes CSS ansteuern als für grosse Browserfenster.

In CSS 3 gibt es dafür Media Queries. [CSS3-MEDIAQUERIES]

Qapla'

[b-guided]

@@b-guided:

nuqneH

Ich möchte gerne die aktuelle Größe des aktiven Browserfenster (NICHT Monitordarstellung) beim Nutzer abfragen und für z.B. Browserfenster mit weniger als 500px Höhe ein anderes CSS ansteuern als für grosse Browserfenster.

In CSS 3 gibt es dafür Media Queries. [CSS3-MEDIAQUERIES]

Qapla'

Danke erst mal für die schnellen Antworten. Habe jetzt mal eine Beispielseite ins Netz hochgeladen ( http://www.b-guided.de/KSM/IndexTEST.html) und meine zwei Stylesheets eingebunden. Eigentlich wird die zentrierte Darstellung bevorzugt, bei Browserfenstern mit weniger als 500px Höhe verschwindet allerdings dann die Hauptnavigation oben, daher würde ich in diesem Fall dann gerne auf das Stylesheet KSM TOP.css verweisen um den Inhalt oben auszurichten. Leider fehlt mir noch immer der Durchblick wo ich die entsprechende Abfrage einbaue, ob im html oder im css direkt. Wie finde ich zudem heraus ob ich schon mit css3 arbeite und die mediaqueries nutzen kann? (Bin halt ein Profiamateur...) Wäre toll wenn mir jemand eine einigermassen detaillierte Vorgehensweise aufzeigen könnte.

Gruss

[Shadowcrow]

'ǝɯɐu$ ıɥ

Wie finde ich zudem heraus ob ich schon mit css3 arbeite und die mediaqueries nutzen kann?

Hä? Wer außer dir weiß was du tust? Oder meinst du welche Browser das unterstützen?

ssnɹƃ
ʍopɐɥs

[b-guided]

'ǝɯɐu$ ıɥ

Wie finde ich zudem heraus ob ich schon mit css3 arbeite und die mediaqueries nutzen kann?

Hä? Wer außer dir weiß was du tust? Oder meinst du welche Browser das unterstützen?

ssnɹƃ
ʍopɐɥs

Hallo Shadow,

Deiner Antwort nach zu urteilen ist das mit dem css3 also browserabhängig und hat nichts mit meinem Stylesheet zu tun. Soweit so gut und schon was dazu gelernt! Kannst Du mir bzgl. meiner weiteren Fragen Rat geben? Habe in einem Stylesheet einen "Trick" (im Netz gefunden) angewendet um den div-Container im Browserfenster zu zentrieren. Wenn ich dann allerdings das Browserfenster kleiner mache (bitte selber testen und nachvollziehen) schiebt es mir den oberen Teil des Containers aus dem Browserfenster raus. Bin natürlich auch für andere elegante Lösungen des Problems offen ...

Gruss

[Shadowcrow]

'ǝɯɐu$ ıɥ

Wie finde ich zudem heraus ob ich schon mit css3 arbeite und die mediaqueries nutzen kann?

Hä? Wer außer dir weiß was du tust? Oder meinst du welche Browser das unterstützen?

Deiner Antwort nach zu urteilen ist das mit dem css3 also browserabhängig und hat nichts mit meinem Stylesheet zu tun.

Falsch, DU schreibst in deinem CSS CSS3, ob und was verschiedene Browser davon umsetzen ist deren Sache. Stell dir vor du sagst deiner Frau: "Bring mir ein Bier", vlt. macht Sie es oder auch nicht, nur das ein Browser dich einfach ignoriert und nicht in die *piep* tritt.

Du weißt anscheinend nicht was zu CSS3 gehört und was nicht, das sollte überall Dokumentiert sein, sprich: da wo du die CSS Anweisungen her hast sollten auch die Einschränkungen dabei stehen, es gibt sicher auch eine Übersicht der CSS3 Anweisungen und der Browserumsetzung. Tantchen wird dich da gerne Beraten.

Kannst Du mir bzgl. meiner weiteren Fragen Rat geben? Habe in einem Stylesheet einen "Trick" (im Netz gefunden) angewendet um den div-Container im Browserfenster zu zentrieren. Wenn ich dann allerdings das Browserfenster kleiner mache (bitte selber testen und nachvollziehen) schiebt es mir den oberen Teil des Containers aus dem Browserfenster raus. Bin natürlich auch für andere elegante Lösungen des Problems offen ...

Wenn ich deinen Trick kennen würde ganz sicher aber, meine Glaskugel ist in der Reinigung was das Testen angeht: ohne Code, erst mal können vor Lachen. Halt dich an http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/index.htm.

Ich bezweifle übrigens das ein DIV aus dem "Browserfenster" herausragt.

ssnɹƃ
ʍopɐɥs

[b-guided]

'ǝɯɐu$ ıɥ

Wie finde ich zudem heraus ob ich schon mit css3 arbeite und die mediaqueries nutzen kann?

Hä? Wer außer dir weiß was du tust? Oder meinst du welche Browser das unterstützen?

Deiner Antwort nach zu urteilen ist das mit dem css3 also browserabhängig und hat nichts mit meinem Stylesheet zu tun.

Falsch, DU schreibst in deinem CSS CSS3, ob und was verschiedene Browser davon umsetzen ist deren Sache. Stell dir vor du sagst deiner Frau: "Bring mir ein Bier", vlt. macht Sie es oder auch nicht, nur das ein Browser dich einfach ignoriert und nicht in die *piep* tritt.

Du weißt anscheinend nicht was zu CSS3 gehört und was nicht, das sollte überall Dokumentiert sein, sprich: da wo du die CSS Anweisungen her hast sollten auch die Einschränkungen dabei stehen, es gibt sicher auch eine Übersicht der CSS3 Anweisungen und der Browserumsetzung. Tantchen wird dich da gerne Beraten.

Kannst Du mir bzgl. meiner weiteren Fragen Rat geben? Habe in einem Stylesheet einen "Trick" (im Netz gefunden) angewendet um den div-Container im Browserfenster zu zentrieren. Wenn ich dann allerdings das Browserfenster kleiner mache (bitte selber testen und nachvollziehen) schiebt es mir den oberen Teil des Containers aus dem Browserfenster raus. Bin natürlich auch für andere elegante Lösungen des Problems offen ...

Wenn ich deinen Trick kennen würde ganz sicher aber, meine Glaskugel ist in der Reinigung was das Testen angeht: ohne Code, erst mal können vor Lachen. Halt dich an http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/index.htm.

Ich bezweifle übrigens das ein DIV aus dem "Browserfenster" herausragt.

ssnɹƃ
ʍopɐɥs

Hallo nochmals,

Freut mich, dass Du Dich mit diesen Amateurfragen beschäftigen kannst während Deine Glaskugel in der Reinigung ist.

anbei der "Trick" aus meinem CSS:

.BODY {
height: 538px;
width: 816px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -269px;
margin-left: -408px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #666666;
text-decoration: none;
background-image: url(../Images/BACKGROUND.png);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
z-index: 2;
}

Das Ergebnis, dass der Container auch in der Höhe zentriert ist und nach oben rausschiebt kannst Du unter

http://www.b-guided.de/KSM/IndexTEST.html

testen und nachvollziehen.

Der Trick soll wohl der sein, bei marin-top und margin-left mit negativen Werten (height/2, width/2)zu arbeiten. Vielleicht gibts aber auch dafür eine funktionalere Lösung!?

Grüsse

[Shadowcrow]

'ǝɯɐu$ ıɥ

Das Ergebnis, dass der Container auch in der Höhe zentriert ist und nach oben rausschiebt kannst Du unter

http://www.b-guided.de/KSM/IndexTEST.html

testen und nachvollziehen.

Verstehe nicht so ganz was du meinst (in welchem Browser hast du getestet?), verpasse body mal ein min-width bzw. min-height.

Der Trick soll wohl der sein, bei marin-top und margin-left mit negativen Werten (height/2, width/2)zu arbeiten. Vielleicht gibts aber auch dafür eine funktionalere Lösung!?

Ja, siehe http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte@title=hier, der Nachteil ist halt das man die Größe des Objektes kennen/definieren muss.

ssnɹƃ
ʍopɐɥs

P.S.
Bitte sinnvoll zitieren und nicht einfach alles.