XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Greenhorn bittet dringend um Hilfe! Positionierung! (http://xhtmlforum.de/showthread.php?t=51895)

fromthemoon 19.05.2008 12:58

Greenhorn bittet dringend um Hilfe! Positionierung!
 
Hallo Leute!

seit gestern versuche ich nun erfolglos dieses IMG relativ zum Browserfenster zu fixieren: es soll z.B. right: 100px; top: 200px; ausgerichtet sein, so dass es unabhängig von der Auflösung des Bildschirms an selber Stelle sich einfindet, ohne dass der Abstand zum Browserfester geringer oder grösser wird, angestrebt ist ein konstanter Abstand.

#blur {
background: #a7a7a7 url(img/bspimage.png) no-repeat fixed 890px 450px; opacity:.76;
}

Falls mir jemand helfen könnte , wäre ich sehr dankbar!

paracelsus 19.05.2008 13:06

Grundsätzlich mache es so:
Zitat:

#blur {
background: #a7a7a7 url(img/bspimage.png) no-repeat;
width: 890px;
height: 450px;
/*Positionierung*/
margin-top: 10px;
margin-left: 100px;
}
Du musst den Container, der das Backgroundbild enthält, die Grössen geben und diesen selber positionieren.
Wo willst Du den haben? bzw. wie gross sollen die Abstände sien?

fromthemoon 19.05.2008 20:03

Hallo Paracelsus! besten Dank für Deine Antwort - leider bringt sie mich nicht wirklich weiter...

#blur {
background: #a7a7a7 url(img/bild.png) no-repeat fixed 890px 450px; opacity:.76;
}
Es müsste irgendwie möglich sein, dieses bild.png sa zu positionieren, dass der Abstand zwischen ihm und rechtem sowie unterem bzw. oberem Browserrand unabhängig von der verwendeten Bildschirmauflösung konstant bleibt... Sei es durch position: relative/absolute oder irgendwie anders ;)

Das Problem ist, das sobald ich etwas unternehme (z.B. Deinen Vorschlag umsetze) sich dieses auf andere Elemente auswirkt: diese sollen aber unbeeinflusst bleiben... Ich möchte nur bild.png im konstanten Abstand zum Browserrand haben, dennoch, vielen Dank für Deine Mühe!

paracelsus 19.05.2008 20:28

Also:
Du willst ein Bild das bei 800x600 gleich weit vom Rand entfernt ist, wie bei 1920x1200?
Äh?

Crizzo 19.05.2008 20:36

Geht doch.
Die Positionierung muss dazu 50% sein und natürlich der Container muss die Sache mitmachen.
Denn "50% 0" heißt 50% von der Seite mit einem Bezugspunkt 50% zur Mitte von der linken Kante. Sollte also gehen, wenn ich jetzt nicht total daneben liege...
Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : BACKGROUND-POSITION }

fromthemoon 19.05.2008 20:46

Schaut Euch das bitte live an - eine Spielwiese zum Testen, mehr nicht -


Bei 1280 x 1024 ist das kleine .png image an einer bestimmten Stelle des Panoramafotos. Dort soll es auch bei 1024 x ... oder was auch immer bleiben, na ja, das ist meine Vorstellung... Ich hoffe, Paracelsus und BlackHawk und Community können helfen... ;)

Danke!

Übrigens: ich verlange viel ;) aber je genauer Ihr mir sagen könnt, wie ich dieses anzustellen habe, desto besser kann ich dieses umsetzen, die Materie ist für mich sehr abstrakt: ich befasse mich mit ihr seit gestern abend!

Leute, danke, danke, danke :)

Crizzo 19.05.2008 20:48

"klein .png image" - geht das ein bisschen genauer? Nenn das Kind beim Namen. :)

fromthemoon 19.05.2008 20:57

Nun, sehr wohl, der Herr:



Das ist das "kleine" .png ;)

Crizzo 19.05.2008 21:03

Code:

#blur {
background:#A7A7A7 url(img/blur-gray.png) no-repeat fixed 80% 450px;
opacity:0.76;
}

Den roten Wert musst du dir passend in Prozentwerten einstellen, dann orientiert sich die kleine Grafik relativ zur Breite des Elternelements, was bei dir <body> und damit die Ansichtsbreite ist. ;)

Das gleiche gilt natürlich auch für die anderen "Kleinen-png". :p

paracelsus 19.05.2008 21:07

Ach das.
Na, der Fehler ist simpel, Du musst dem Container, der das Bild enthält ein Grösse geben (so groß wie möglich, allerdings kriegste dann scrollbars, wenn der Viewport kleiner wird)! Das Bildchen das innerhalb dargestellt wird ist ja sonst ausserhalb der Grenzen des Containers und damit nicht sichtbar.
Am besten wäre, du setzt das Bild auf den body:
Zitat:

body {
background: #a7a7a7 url(DeinBild.png) no-repeat fixed 890px 450px; /* oder eben Prozentuale Werte */
opacity:0.76;

}
Dan klappt es auch mit dem fixierten Hintergrund. Was ich nun nicht weiss, wie sich IE kleiner als 7 dabei verhält, da ich an meiner neuen - noch nicht fertigen Maschine - sitze.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023