CSS ( Browser-Auflösung )
0 0 0 0 0 
Jonathan
0 0 Jonathan
0 0 0 0 0 
Struppi
0 
Der Martin
0 
Gunnar Bittersmann
CSS ( Browser-Auflösung )
Hallo zusammen,
ich hab ein Problem. Wenn ich ein CSS-Layer auf unserer Seite einfläge funktioniert alles wunderbar. Nur wenn ich die Bildschirmauflösung meines Rechners ändere passt sich der layer nicht an. Hier mein Code:
<style type="text/css">
#RubrikL01 { position:absolute;
width:236px;
height:151px;
z-index:1;
left: 172px;
top: 30px;
background-image:url(http://testpage.de/pic/1.jpg);}
</style>
Gibt eine Möglichkeit um das Problem mit den Bildschirm auflösung zu lösen(sozusagen das es sich anpasst).
Gruß
Sipatshi
-
Hallo,
Nur wenn ich die Bildschirmauflösung meines Rechners ändere passt sich der layer nicht an.
Wie soll sich der Kontainer denn anpassen? Die Größe skalieren?
Das kann nicht funktionieren wenn du dem Kontainer eine Pixelgenaue Breite gibst.
Versuch mit em statt Pixelangaben zu arbeiten.<style type="text/css">
#RubrikL01 { position:absolute;
width:236px;
height:151px;
z-index:1;
left: 172px;
top: 30px;
background-image:url(http://testpage.de/pic/1.jpg);}
</style>Enthält der Kontainer nur dieses 1 Bild?
Wenn ja brauchst du dafür keinen Kontainer, sondern kannst die Eigenschaften auch direkt auf das Bild anwenden.Grüße, Matze
-
Hallo,
Nur wenn ich die Bildschirmauflösung meines Rechners ändere passt sich der layer nicht an.
Wie soll sich der Kontainer denn anpassen? Die Größe skalieren?
Das kann nicht funktionieren wenn du dem Kontainer eine Pixelgenaue Breite gibst.
Versuch mit em statt Pixelangaben zu arbeiten.<style type="text/css">
#RubrikL01 { position:absolute;
width:236px;
height:151px;
z-index:1;
left: 172px;
top: 30px;
background-image:url(http://testpage.de/pic/1.jpg);}
</style>Enthält der Kontainer nur dieses 1 Bild?
Wenn ja brauchst du dafür keinen Kontainer, sondern kannst die Eigenschaften auch direkt auf das Bild anwenden.Ja, der Layer beinhaltet nur das eine Bild. Der Zweit Layer HTML-Formartierte Text. Und der 3´te Layer ein Bild ( Spiegelung als Bild -png-). Im grunde sind das 3 ebenen übereinander z-index:1 (jpg-bild), z-index:2 (HTML-Textg), z-index:3 (png-bild)
Gruß
Sipatshi
-
Hallo,
bitte zitier nur die Ttextstellen auf die du dich auch in deiner Antwort beziehst.
Ja, der Layer beinhaltet nur das eine Bild.
Dann lass den Kontainer weg und gib dem img-Element die CSS-Angaben.
Breite und Höhe eines Image kannst du nicht automatisch mit der Auflösung skalieren.
Das wäre auch ungünstig wenn man an Width-Screen-Monitore denkt, die das Bild dann verzerren würden.Grüße, Matze
-
Hallo,
bitte zitier nur die Ttextstellen auf die du dich auch in deiner Antwort beziehst.
Ja, der Layer beinhaltet nur das eine Bild.
Dann lass den Kontainer weg und gib dem img-Element die CSS-Angaben.
Breite und Höhe eines Image kannst du nicht automatisch mit der Auflösung skalieren.
Das wäre auch ungünstig wenn man an Width-Screen-Monitore denkt, die das Bild dann verzerren würden.Grüße, Matze
Ich glaub ich mich falsch ausgedrückt. Das Bild will ich nicht skallieren lassen wenn sich die Bildschirauflösung ändert.
Nehmen wir an mit der Bildschirmauflösung XY ist das Bild hinter einem Text positioniert(so wie ich das möchte). Aber wenn ich die Bildschirmauflösung höher oder niedriger setze, ist Bild nicht mehr hinter dem Text Positioniert ( verschiebt sich nach rechts oder links )
Ich möchte einfach nur das das Bild immer an der Gleichen Stelle positioniert ist, egal ob die Bildschirm auflösung höher oder niedriger ist.
-
Hallo Sipatshi,
Ich glaub ich mich falsch ausgedrückt. Das Bild will ich nicht skallieren lassen wenn sich die Bildschirauflösung ändert.
Nehmen wir an mit der Bildschirmauflösung XY ist das Bild hinter einem Text positioniert(so wie ich das möchte). Aber wenn ich die Bildschirmauflösung höher oder niedriger setze, ist Bild nicht mehr hinter dem Text Positioniert ( verschiebt sich nach rechts oder links )
Ich möchte einfach nur das das Bild immer an der Gleichen Stelle positioniert ist, egal ob die Bildschirm auflösung höher oder niedriger ist.
Die Bildschirmauflösung hat damit gar nichts zu tun. Höchstens die Größe des Viewports. Guck also einfach, wie deine Webseite reagiert, wenn du z.B. das Browserfenster verkleinerst oder vergrößerst und passe entsprechend deine Seite an. Schreibe Code der sinnvoll ist und keinen Code der bei ner bestimmen Viewportgröße gut aussieht.
"Position"-Positionsabgaben sind für Anfänger eh nicht zu empfehlen - Unter anderem wegen solchen Problemen.
Jonathan
-
Die Bildschirmauflösung hat damit gar nichts zu tun. Höchstens die Größe des Viewports. Guck also einfach, wie deine Webseite reagiert, wenn du z.B. das Browserfenster verkleinerst oder vergrößerst und passe entsprechend deine Seite an. Schreibe Code der sinnvoll ist und keinen Code der bei ner bestimmen Viewportgröße gut aussieht.
Ich bin ja nicht auf eine Bildschirmauslöung fixiert(grr).
Ich möchte auch nicht mein Code auf eine Bestimmte Auslösung schreiben (schön des öfteren erwähnt) :)
Gibt es überhaupt eine Möglichkeit das Design-Technisch in eine CSS-Datei anzupassen ( für verschiedene Ansichten -Viewport- ?!?! )"Position"-Positionsabgaben sind für Anfänger eh nicht zu empfehlen - Unter anderem wegen solchen Problemen.
Wie machen es den die Profis?
-
Hallo Sipatshi,
Ich bin ja nicht auf eine Bildschirmauslöung fixiert(grr).
Irgendwie schilderst du mir das Verhalten deiner Webseite anders. ;-)
Ich möchte auch nicht mein Code auf eine Bestimmte Auslösung schreiben (schön des öfteren erwähnt) :)
Tust du aber anscheinend. ;-)
Gibt es überhaupt eine Möglichkeit das Design-Technisch in eine CSS-Datei anzupassen ( für verschiedene Ansichten -Viewport- ?!?! )
Der Sinn ist eben, gerade _nicht_ für verschiedene Viewportgrößen anzupasen sondern ein Layout zu basteln was mit (möglichst) allen funktioniert. Das Problem mit position:absolute ist, dass die Boxen sich gegenseitig beliebig überlappen können und die Größe/Position in vielen Fällen nicht voneinander und nicht vom Inhalt ausreichend abhängig ist.
Wie machen es den die Profis?
Elemente, die untereinander stehen sollen, werden ganz normal im Elementfluss gelassen und mit margin/padding ausgerichtet, bei nebeneinanderliegenden Elementen benutzt man üblicherweise floats. Das kann dann auch relativ komplex werden so wie hier: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout, aber der Vorteil ist deutlich, dass es sehr flexibel ist und vor allem mit (ziemlich) jeder Viewportgröße und Schriftgröße funktioniert.
Andere "Profis" benutzen Tabellenlayouts, die ich hier wirklich nicht empfehlen möchte, aber doch viele der geschilderten Nachteile von position:absolute auch nicht haben.
Jonathan
-
-
-
Hallo Sipatshi,
Nehmen wir an mit der Bildschirmauflösung XY ist das Bild hinter einem Text positioniert(so wie ich das möchte).
Kann es sein, daß Du eigentlich ein Hintergrundbild definieren möchtest?
Gruß aus Köln-Ehrenfeld,
Elya
--
-
Hallo Elya
Ich möchte in der CSV-Datei definieren können:
Wenn Bildschirmauflösung 1024 x 768, dann Position(XY)
und
Wenn Bildschirmauflösung 800 x 600, dann Position(XY)
usw.
usw.Gruß
Sipatshi
-
Yerf!
Ich möchte in der CSV-Datei definieren können:
Wenn Bildschirmauflösung 1024 x 768, dann Position(XY)
Glaub ich nicht. Denn a) gibt es zu viele verscheidene Auflösungen und b) sagt die nichts über die Viewportgröße im Browser (das erigentlich entscheidende) aus.
Du willst eher herausfinden, weshalb die Position bei verschiedenen Größen nicht stimmt und das korrigieren, so dass jede Vieportgröße passend aussieht. Ohne einen Link zu deiner Seite, dass man sich das ganze mal ansehen kann wird dir hier aber dabei keiner weiterhelfen können.
Gruß,
Harlequin
-
Yerf!
Ich möchte in der CSV-Datei definieren können:
Wenn Bildschirmauflösung 1024 x 768, dann Position(XY)
Glaub ich nicht. Denn a) gibt es zu viele verscheidene Auflösungen und b) sagt die nichts über die Viewportgröße im Browser (das erigentlich entscheidende) aus.
Du willst eher herausfinden, weshalb die Position bei verschiedenen Größen nicht stimmt und das korrigieren, so dass jede Vieportgröße passend aussieht. Ohne einen Link zu deiner Seite, dass man sich das ganze mal ansehen kann wird dir hier aber dabei keiner weiterhelfen können.
Gruß,
Harlequin
Hier der Links zu der Seite ( mit dem test Layer ):
http://www.expertmobile.de/lshop,showrub,29174,d,1192621216-4071,handy_flatrate_base,,,,.htmWenn du nun die Bildschirmauslösung änderst, wirst du sehen können das sich die Position ändert.
Ich möchte für 6 Verschiedene Bildschirmauflösungen das individuell gestallten können.
Gruß
-
Gruß,
Harlequin
Du hast bereits den Hinweis bekommen, nur das stehen zu lassen worauf sich deine Antwort bezieht, es wäre freundlich von dir, wenn du diesen Hinweis nicht ignorieren würdest.
Hier der Links zu der Seite ( mit dem test Layer ):
http://www.expertmobile.de/lshop,showrub,29174,d,1192621216-4071,handy_flatrate_base,,,,.htmWenn du nun die Bildschirmauslösung änderst, wirst du sehen können das sich die Position ändert.
die Position ist sowieso sehr willkürlich, bei mir mitten im horizontalen Menü. Von daher ist nicht erkennbar wohin du das Bild haben willst.
Ich möchte für 6 Verschiedene Bildschirmauflösungen das individuell gestallten können.
An der Seite liegt viel im argen.
192 Fehler im HTML code sind nicht zu verachten. Du solltest die Seite auch nicht im Quirksmode darstellen lassen sondern deiner Seite einen Doctype gönnen, der den Browser in den Standardmode versetzt. Bevor du irgendwelche Optimierungsversuche machst.Struppi.
-
Hallo,
Hier der Links zu der Seite ( mit dem test Layer ):
http://www.expertmobile.de/lshop,showrub,29174,d,1192621216-4071,handy_flatrate_base,,,,.htmwas sollte ich denn auf dieser Seite sehen? Ein ziemlich starres Layout, bei dem mit abnehmender Fensterbreite irgendwann ein horizontaler Scrollbalken erscheint. Die Größe und Position aller Elemente zueinander bleibt aber fix, auch wenn ich die Fenstergröße beliebig ändere (IE5.5, IE6, Opera 8.54).
Wenn du nun die Bildschirmauslösung änderst, wirst du sehen können das sich die Position ändert.
Bitte versteh' es endlich: Die Bildschirmauflösung hat *überhaupt nichts* damit zu tun, entscheidend ist nur die Größe des Browserfensters.
Ich möchte für 6 Verschiedene Bildschirmauflösungen das individuell gestallten können.
Im Moment hast du es, soweit ich das sehe, für jede beliebige Fenstergröße fest verankert - notfalls mit horizontalem Scrolling. Das ist zwar nicht die Ideallösung, aber auch nicht die schlechteste.
Ciao,
Martin--
F: Was ist schneller: Das Licht oder der Schall?
A: Offensichtlich der Schall. Wenn man den Fernseher einschaltet, kommt immer erst der Ton, und dann erst das Bild.
-
-
-
-
-
-
-
-
Hello out there!
Nur wenn ich die Bildschirmauflösung meines Rechners ändere passt sich der layer nicht an.
Und wenn du die Browserfenstergröße änderst, auch nicht. Alte Leier.
Wie soll sich der Kontainer denn anpassen? Die Größe skalieren?
Das kann nicht funktionieren wenn du dem Kontainer eine Pixelgenaue Breite gibst.Bis hierhin richtig.
Versuch mit em statt Pixelangaben zu arbeiten.
Was an dem Problem rein gar nichts ändert. em bezieht sich auch in keinster Weise auf den Viewport.
See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)-
Hallo,
Versuch mit em statt Pixelangaben zu arbeiten.
Was an dem Problem rein gar nichts ändert. em bezieht sich auch in keinster Weise auf den Viewport.
Sorry, war in Eile und hab den Fehler jetzt erst bemerkt.
Dumm von mir. In dem Fall wären natürlich Prozentangaben sinnvoll.Grüße, Matze
-
-